CSS Profi?

Status
Nicht offen für weitere Antworten.
M

Maik20

Erfahrenes Mitglied
Hallo,

ich brauche mal Hilfe von einem CSS Profi.
Ich habe folgende Struktur:

Code: 
<div id="main">
<div id="left">
<div id="logo">LOGO</div> // LINKS OBEN
<div id="navigation">NAVIGATION</div> // LINKS UNTEN
</div>
<div id="right">
<div id="search"></div> // RECHTS OBEN
<div id="content"></div> // RECHTS UNTEN
</div>
</div>

Dazu habe ich folgenden CSS Code:

Code: 
#main{width:100%;position:relative; margin:0 auto; padding:0px;}
#logo{width:240px; height:100px; text-align:left; float:left; margin:0 auto; padding:0; background:url(../images/left-top2.jpg) 0 0 no-repeat;}
#search{width:100%; height:80px; text-align:right; color:#ffffff;}
#navigation{position: absolute;left:0px;top:125px;width:200px; display:block; background:url(../images/menu-bg.jpg) 0 0 no-repeat; padding-left:20px;padding-top:50px;padding-right:50px; font:12px "Trebuchet ms","Gill Sans MT", "Gill sans", sans-serif;}
#content{margin-left:250px;width:100%;}

Ich habe jedoch folgende Probleme:

1) Wenn ich im Content-DIV sehr viel Text habe, wird die Seite > 100% bzw. der Browser zeigt eine horizontale Scrollleiste an. Ich möchte aber das die Seite max. Bildschirmbreite hat und dann eben der Text umgebrochen wird.

2) Die DIVs Navigation und Content sitzen im unteren Bereich nebeneinander. Wenn ich im DIV Tag keinen Text habe möchte ich das der Content DIV eben weiter links anfägt.

Ich habe leider noch wenig mit CSS gemacht. Früher habe ich immer alles mit Tabellen ausgerichtet, jetzt wollte ich mir mal was neues antun ;-)

Kann mir jemand ein paar Tips geben?
 
Hi,

zu deiner ersten Frage: entferne die width:100%-Deklaration für #content, damit im Fenster kein horizontaler Scrollbalken erscheint, denn gemäß dem CSS-Boxmodell werden u.a. diese beiden Eigenschaften für ein Element zusammenaddiert, womit die Box um 250px in den rechten nicht-sichtbaren Bereich des Fensters hineinragt.

Da sich Blockelemente im "Normalfall" (keine absolute Positionierung, keine float-Deklaration) innerhalb ihres Elternelements automatisch in der Horizontalen auf 100% ausdehnen, ist diese Breitenangabe nicht erforderlich. Einfach mal dem Element eine Hintergrundfarbe spendieren, um seine Boxengrenzen zu visualisieren.

Zur zweiten Frage muß ich mich jetzt erstmal stärken gehen, denn mit einem Hungergefühl lässt sich schwer konzentriert arbeiten. ;-)

mfg Maik
 
Maik20 hat gesagt.:
2) Die DIVs Navigation und Content sitzen im unteren Bereich nebeneinander. Wenn ich im DIV Tag keinen Text habe möchte ich das der Content DIV eben weiter links anfägt.
Zum Vergrößern anklicken....
Mit anderen Worten: du planst da die eine oder andere Projektseite, die an dieser Stelle keine Navigation besitzt, und den Seitenbesucher dem ersten Augenschein nach in eine Sackgasse führt?

Ein Hoch auf die history.back()-Methode bzw. den "Zurück"-Button im User-Agent.

Na, dann entfällt eben auf diesen Seiten die margin-left:250px-Deklaration für das DIV#content, damit es an den linken Fensterrand rutscht.

Hierfür kannst du in den einzelnen Projektseiten dem body-Element eine eindeutige ID zuordnen (#home, #news, #contact, etc.) und in den Dokumenten ohne Navigationsblock die Regel für #content so aufstellen:

Code: 
body#contact #content { margin-left:0; }
In den übrigen Seiten incl. der Navigation lautet die Regel dann entsprechend:

Code: 
body#home #content { margin-left:250px; }

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück