zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mehrere kleine Container links neben einem grpßem Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.02.2010, 12:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2010
Beiträge: 3
backlash86 befindet sich auf einem aufstrebenden Ast
Standard Mehrere kleine Container links neben einem grpßem Container

Hallo,

ich bin gerade ganz neu hier im Forum und habe ein kleines Problem:

Ich würde gerne mehrere kleine Container (Menü, Impressum und Zusatzinfos) link neben einem großen Container (Inhalt) platzieren. Neben dem Inhalt soll dann rechts noch ein Container sein (technische Informationen).

Das Ganze hätte ich am liebsten in einem automatisch mitwachsenden Container (Content), um eine Hintergrundfarbe dahinter zu legen.
Darüber und darunter soll ein jeweils anderer Container (Top, Versandinformationen) sein.

Meine CSS sieht so aus:

.content {
background-color:#333;
width:1024px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:5px;
border-style:ridge;
border-width:thin;
overflow:visible;
}

.top {
background-image:url(banner.jpg);
height:250px;
width:1024px;
margin-left:auto;
margin-right:auto;
border-style:ridge;
border-width:thin;
}

.menu {
background-color:#CCC;
width:200px;
padding-left:5px;
padding-top:5px;
height:auto;
margin-top:5px;
margin-left:3px;
border-style:ridge;
border-width:thin;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
float:left;
clear:left;
}

.inhalt {
background-color:#FFF;
width:555px;
height:auto;
margin-left:5px;
margin-top:5px;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
padding-right:5px;
border-style:ridge;
border-width:thin;
float:left;

}

.rechts {
width:234px;
height:auto;
margin-right:5px;
margin-top:5px;
background:#CCC;
font-size:11px;
font-family:Verdana, Geneva, sans-serif;
border-style:ridge;
border-width:thin;
float:right;
clear:right;
}

.impressum {
width:200px;
height:auto;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:3px;
margin-top:20px;
padding-left:5px;
border-style:ridge;
border-width:thin;
float:left;
clear:left;
}

.links {
width:195px;
height:auto;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:3px;
margin-top:20px;
padding-left:5px;
padding-right:5px;
border-style:ridge;
border-width:thin;
float:left;
clear:left;
}

.versand {
background:#CCC;
height:auto;
width:1019px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
padding-left:5px;
border-style:ridge;
border-width:thin;
}

a.menu { display:block; margin-bottom:5px; text-align:center; width:180px;
border-style:ridge; border-width:3px; padding:2px; text-decoration:none; }

a.menu:link { color:#FFF; background-color:#666; }
a.menu:visited { color:#FFF; background-color:#666; }
a.menu:hover { color:#FFF; background-color:#333; }
a.menu:active { color:#FFF; background-color:#666; }

Und das ist die HTML:

<body>

<div class="top"> </div>

<div class="content">
<div class="menu">Menü</div>
<div class="inhalt">
<p>Inhalt

</p>
<p>&nbsp;</p>
</div>
<div class="rechts">technische Informationen (rechts)</div>
<div class="impressum">Impressum</div>
<div class="links">Zusatzinformation (links)</div>
</div>

<div class="versand">Versand
</div>

</body>

Das Problem besteht nun darin, dass sich das Impressum nach untern verschiebt, wenn der Inhalt wächst und nicht, wie ich gerne hätte, 20px unter dem Menü bleibt.
Außerdem wächst der Content nicht mit. Wenn ich ihm eine feste Höhe zuweise, liegt er zwar dahinter, aber ich müsste ihn für jeden Inhalt ensprechend anpassen. Und das kann ja irgenwie nicht Sinn der Sache sein.

Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
Arbeite leider noch nicht so lange mit CSS und dies ist das erste mal, dass ich mit Float und Clear arbeite.

Hier mal ein Screenshot:


Gruß
Sebastian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.02.2010, 15:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2010
Beiträge: 3
backlash86 befindet sich auf einem aufstrebenden Ast
Standard

Also das erste Problem habe ich gelöst, in dem ich um die 3 linken Elemente einen Container gezogen habe, neben dem der Inhalt jetzt rechts is. Dadurch wird nichts mehr verschoben.

Allerdings wächst der Content einfach nicht mit, so dass das unterste Element direkt under dem Banner anzeigt wird.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.02.2010, 15:31
Neuer Benutzer
neuer user
 
Registriert seit: 24.02.2010
Beiträge: 1
fablab befindet sich auf einem aufstrebenden Ast
Standard

bin mir nicht sicher ob ich dein problem verstanden hab, aber wenn du die height einfach mit 100% angibst anstatt mit ner pixelangabe..?
__________________
quelle lebt wieder !
Mit Zitat antworten
  #4 (permalink)  
Alt 24.02.2010, 15:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.02.2010
Beiträge: 3
backlash86 befindet sich auf einem aufstrebenden Ast
Standard

Dann streckt sich der unterste Container vom Banner bis unter den längsten Inhalt.
Also auch nicht so wie es sein sollte.

Ich denke irgendwo habe ich einfach einen Denkfehler...
Mit Zitat antworten
Antwort

Stichwörter
container, css, nebeneinander

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
2 Div Container, unten anordnen, keine feste Höhe Hausmeista CSS 8 07.06.2006 13:44
2 Div Container, unten anordnen, keine feste Höhe Hausmeista (X)HTML 0 06.06.2006 18:28
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
Links unterschiedlich darstellen NEOX CSS 11 22.06.2005 11:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:57 Uhr.