Die Lösung ist im Grunde nicht schwer; zuerst einmal ins Markup schauen, welche Elemente sich wofür anbieten. Desweiteren sollte das a) Box Model Prinzip bekannt sein > hier gucken oder hier, der Umgang mit Margins und Paddings ...
Und Los gehts:
Das Markup um Beispiel Deiner Newslist:
Code:
<h1>Neuigkeiten</h1>
<div class="box">
<div class="mod_newslist block">
<div class="layout_latest block first even">...</div>
<div class="layout_latest block last odd">...</div>
</div>
</div>
<div class="box_footer"/>
Dann macht man im CSS folgendes
Code:
.box{
border: 1px solid #e1e1e1;
border-width:0px 1px;
padding:10px 7px; /*7px oben und unten, 0 px links und rechts*/
}
.box_footer{
height:4px;
margin-bottom:15px;
background-image:url("tl_files/Layout/Hintergrund/box_footer_bg.png");
background-repeat:no-repeat;
}
Die Breitenangaben können wir weglassen; bzw. belassen es bei auto (default), die orientiert sich am Elternelement unter Berücksichtigung von border, margin und padding, dann bekommt .box footer noch eine margin nach unten, damit die Blöcke nicht zusammenkleben - und das wars auch schon ...
Grundsätzlich: versuche Breitenangaben nur da zu machen, wo sie auch wirklich nötig sind; Dein #right Container hat ja schon eine feste Breite; mehr brauchst Du erstmal nicht, der Rest wird bei Block Level Elementen wie schon gesagt von allein berechnet ...
Ich habe jetzt noch eine zweite Navigation hinzugefügt, wie kann ich die beiden Navigationen rechtsbündig machen, so dass ich vllt kein margin-left benutzen muss? Ansonsten muss ich das margin ja immer anpassen, wenn die Navigationen breiter werden.
kannst Du beide Absolut positionieren:
Code:
.mod_customnav,
.mod_navigation {
position: absolute;
right: 20px;
top: 20px;
}
.mod_navigation {
top: 50px;
}
Lesezeichen