[CSS] Einige Detailprobleme zu 1. HP Webdesign-Kurs

Dieses Thema im Forum "Webdesign" wurde erstellt von Bieber, 17. Januar 2012 .

  1. 17. Januar 2012
    Einige Detailprobleme zu 1. HP Webdesign-Kurs

    Hallo ihr Lieben,

    ich studiere nun im 3. Semester Advertising-Design und habe den Kurs Webdesign belegt und bastel an meiner 1. Homepage in HTML und CSS (das Thema wurde im Kurs festgelegt).

    Im Prinzip wäre ich soweit fertig (das Hintergrundbild wird natürlich noch fein säuberlich ausgewählt ;-) ), allerdings bringen mich einige Kleinigkeiten gerade um den Verstand.

    http://waggon.1x.biz/index.html

    Das ist der Link zu der bisherigen Homepage. Die divs habe ich zur Veranschlaulichung rot eingefärbt, das schreckliche Gelb dient auch nur zu rein demonstrativen Zwecken, keine Angst, das bleibt nicht so. Das ganze soll für Firefox 4 oder neurer optimiert sein und der Inhalt darf nur eine maximale Breite von 990 Pixeln haben.
    Hier eine kleine Liste meiner Probleme:

    1. auf meinem 15 Zoll Laptopbildschirm wird bei den Seiten "The Area" und "Reservations" rechts ein Scrollbalken eingefügt. Klar, der ist wichtig, verschiebt mir aber das ganze Layout minimal um ein paar Pixel nach links. Kann ich einstellen, dass der Scrollbalken den Inhalt nicht verdrängt?

    2. mein Dozent erzählte mir, dass ich den Text-Bereich left-floaten soll und den Bildbereich bei zB "The Area" und den einzelnen Cabooses right-floaten. Am Ende jedes Scriptes soll ich ein <div style="clear:both;></div> einfügen. Leider wird mir nicht klar, was ich damit bezwecken kann bzw. soll (abgesehen davon, dass ich nicht weiß, WO genau ich es im Skript genau positionieren soll) da beide Elemente doch passend positioniert sind - oder habe ich dafür eine unelegante Lösung gewählt?

    3. die Seite "Cabooses" soll insgesamt über 7 Buttons zum Anklicken verfügen. Wie kann ich diese optimal in CSS positionieren? Auf dem 24 Zoll Bildschirm meines Freundes sind sie zB anders positioniert als auf meinem.

    4. und ganz allgemein: Wie kann ich sicher gehen, dass mein Inhalt die 990px nicht überschreitet?

    Ich wäre euch sehr dankbar, wenn ihr mir helfen könntet und freue mich natürlich auch über jede weitere Anregung und jeden Tipp!
     
  2. 17. Januar 2012
    AW: Einige Detailprobleme zu 1. HP Webdesign-Kurs

    Hallo,

    also in deiner Seite ist derzeit eine Breite von 1050px eingestellt. Dies legst du im allumfassenden div container mit der id "wrapper" fest. Hier solltest du zunächst die width auf 990px stellen.

    So nun wirst du merken das deine Navigationselemente verschoben sind. Dies liegt daran das du jedes Element (ul#hauptmenu li) mit einer Breite von 200px angibst. Das macht also schon insgesamt 1000px Breite (5*200px).
    Zudem hat deine Navigation (ul#hauptmenu) einen Innenabstand(padding) von 5px.
    D.h. von deinen 990px Breite bleiben dir noch, nach Abzug der Innenabstände, 980px für die Navigation. Sodass ein Navigationselement genau 196px breit sein darf(980/5=196).

    So jetzt sind wir schon mal soweit das alle Elemente im "wrapper" die Größe von 990px nicht überschreiten sollten.

    Jedoch würde auf einem 990px breiten Monitor immer noch ein horizontaler Scrollbalken eingeblendet werden. Dies liegt daran das viele Browser Hersteller Grunddarstellungen von Elementen angeben. Eine beispielhafte Browservorlage wäre das alle Texte, solang nicht anders beschrieben, schwarz ausgegeben werden.

    So hat der body-Tag browserseitig bereits einen Innen- bzw. Außenabstand. Daher solltest du dem body-Tag noch margin:0 sowie padding: 0 zuweisen.

    Das floaten von Elementen will ich jetzt hier nicht näher beschreiben, da das zu viel Zeit in Anspruch nehmen würde. Vielleicht hilft dir bei diesem Problem jemand anders.

    greetz
     
  3. 17. Januar 2012
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: Einige Detailprobleme zu 1. HP Webdesign-Kurs

    1. nein, es sei denn du baust dir mit js nen "detector" und schiebst den inhalt dann entsprechend nach rechts.

    2. soll für firefox4 optimiert werden? dann ist float sinnfrei, da du andere technologien verwenden kannst.

    u.a.:
    http://www.quirksmode.org/css/multicolumn.html oder
    display:box (https://developer.mozilla.org/en/CSS/box-flex)

    hier hab ich das ganze schonmal beschrieben:
    [CSS] Frage zum Footer und Boxes

    3. position:absolute + margin

    4. overflow-x:hidden
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.