Elemente in einem zentr. DIV schauen raus

Computer: Software & Programmierung HTML & CSS
#1

hi,
ich versuche gerade, mein Design zu CSSisieren. Jetzt aber folgendes Problem:
In meinem Div-hauptcontainer (.maincontainer) sind neben dem header und dem footer noch zwei Spalten (.leftcol und .rightcol); die schauen aus dem maincontainer raus. Das soll so aber nicht sein.

CSS:

body, html {
 font-family: DejaVu Sans, Sans;
 font-size: 14px;
 text-align: center;
}
h1 {
 font-size: 25px;
}
h2 {
 font-size: 20px;
}
h3 {
 font-size: 16px;
}
.maincontainer {
 width: 1000px;
 border: 1px solid #ccc;
 text-align: left;
 margin: 0 auto;
}
.header {}
.leftcol {
 float:left;
 width:880px;
 margin: 0px;
}
.rightcol {
 float:right;
 width:110px;
 margin: 0px;
}

;
HTML:

 Test-Seite 
 
 
 Text 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
 
 
 Titel bla 

Menü
 
 
footer

grtz
michi

#2

folgendes Problem:
In meinem Div-hauptcontainer (.maincontainer) sind neben dem
header und dem footer noch zwei Spalten (.leftcol und
.rightcol); die schauen aus dem maincontainer raus. Das soll
so aber nicht sein.

Hallo, du brauchst am Ende deines maincontainer ein Element, das nicht mehr um die col’s fließt. Das erreichst du mit der CSS-Regel „clear:both;“.

Die kannst du z.B. für den footer eintragen:

.footer {
clear:both;
}

Kleiner Tipp noch: Wenn du für Elemente eindeutige Namen vergibst (header, leftcol, footer, …), kannst du diese als id angeben:

#footer {
clear:both;
}

und im HTML:

Das hat in der weiteren Verwendung noch Vorteile.

Gruß
A

#3

danke! Des ist doch mal kompetent. Da geb ich mal nen Stern.

#4

Moin,

Kleiner Tipp noch: Wenn du für Elemente eindeutige Namen
vergibst, kannst du diese als id angeben

Das hat in der weiteren Verwendung noch Vorteile.

Welche?

Grüße,
-Efchen

#5

Kleiner Tipp noch: Wenn du für Elemente eindeutige Namen
vergibst, kannst du diese als id angeben

Das hat in der weiteren Verwendung noch Vorteile.

Welche?

Hallo,

zum halte ich es bei der Seitenpflege für übersichtlicher, wenn ein eindeutliges Element eine ID statt einer allgemeinen Klasse trägt.

Und dann benutze ich ID’s z.B. als Zielanker für Hyperlinks - soweit ich mich erinnere, kann man das seit der HTML-Version 4.01 so tun.

Wenn ich mich recht erinnere, gilt auch: In XHTML sollte (v1.0) bzw darf (v1.1) ein Anker nicht mehr über das name-Attribut des a-Tags gesetzt werden. Und wenn man eh id’s benutzt, ist der Sprung an diese Stellen ohne zusätzliche Auszeichnung möglich.

Gruß
A

#6

Bin einverstanden mit der Antwort :wink: