13.10.2010, 13:39
|
|||
|
|||
Probleme mit meinem content wrapper
hi,
in meinem design hätte ich gern eine navi höhe von zb 60 pixeln und das logo sollte 100 pixel sein. darunter kommt der wrapper für den inhalt. der inhalt besteht aus 3 spalten in dennen jeweils eine box ist in dennen dann der content erscheint. das problem ist, das ich nicht weiss wie ich den content wrapper auf eine mindest größe bekomme. ich habe immer das problem das zb die linke spalte über den footer überlappt hier der code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {
height:100.5%;
}
* { margin:0px; padding:0px; border:0px; }
body { text-align:center; }
#wrapper {
width: 960px;
margin: 0 auto 0 auto;
text-align:left;
}
#nav {
height:60px;
}
#logo {
height:100px;
}
#advertising {
position:relative;
top:10px;
left:20px;
bottom:0px;
height:50px;
width: 275px;
}
#content_wrapper {
min-height:100%;
}
#left_outer {
float:left;
height:auto;
width:144px;
}
#left_inner_wrapper{
margin: 10px 10px 10px 10px;
border: 1px solid #000;
}
#left_inner_header {
height:30px;
}
#middle_outer {
float:left;
width:672px;
}
#middle_inner_wrapper{
margin: 10px 10px 10px 10px;
border: 1px solid #000;
}
#middle_inner_header {
height:30px;
}
#right_outer {
float:left;
width:144px;
}
#right_inner_wrapper{
margin: 10px 10px 10px 10px;
border: 1px solid #000;
}
#right_inner_header {
height:30px;
}
#footer {
width 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">navigation</div>
<div id="logo">
<div id="advertising">werbung</div>
</div>
<div id="content_wrapper">
<div id="left_outer">
<div id="left_inner_wrapper">
<div id="left_inner_header">inner header</div>
<div id="left_inner_content">inner content</div>
</div>
</div>
<div id="middle_outer">
<div id="middle_inner_wrapper">
<div id="middle_inner_header">inner header</div>
<div id="middle_inner_content">inner content</div>
</div>
</div>
<div id="right_outer">
<div id="right_inner_wrapper">
<div id="right_inner_header">inner header</div>
<div id="right_inner_content">inner content</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
danke im vorraus =) 
|
| Sponsored Links |
|
13.10.2010, 14:08
|
|||
|
|||
In deinem Fall würde ich wrapper auch floaten lassen. (Stichwort: Block Formatting context) Wrapper erkennt die innenliegenden floatenden Elemente nicht, weil sie aus dem Elementefluss herausgenommen sind durch das float.
Deswegen überlappen die. Andere Möglichkeiten, einen BFC zu erzeugen, gäbe es, aber bei unbekannt hohem Content wäre das im Zweifel wenig produktiv.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
13.10.2010, 14:30
|
|||
|
|||
|
kannst ja einen margin definieren...., versuchs einfach mal.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
13.10.2010, 15:10
|
|||
|
|||
|
scheint zu funktionieren =)
gibts ne möglichkeit das jetzt noch automatisch zentrieren anstatt es x pixel vom rand weg zu machen? momentan siehts so aus: Code:
html {
height:100.5%;
}
* { margin:0px; padding:0px; border:0px; }
body { text-align:center; }
#wrapper {
margin-right:auto;
float:left;
width: 960px;
margin: 0 auto 0 100px;
text-align:left;
}
|
|
13.10.2010, 15:15
|
|||
|
|||
|
Ein Element das links floatet kann nicht gleichzeitig zentriert sein.
Ich habe nur kurz in den Code geschaut (ein Link fehlt!) und sehe da IMHO mal wieder einen Fall für FAQ Punkt 2. Float für das umgebende Element scheint hier nicht so sinnvoll. Clear mit dem Footer?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
13.10.2010, 15:41
|
|||
|
|||
|
oki danke werd ich mir ansehen :=)
wobei die texte hier und da missverständlich sind muss ich sagen weil gewisse sachen nicht explizit erklärt werden... Beispiel im Grundlagen Text: " Jedes Element, das man floatet, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. " usw. etwas weiter unten steht: " Es ist ein verbreitetes Missverständnis, dass Block-Elemente, die auf ein gefloatetes Element folgen, ebenfalls entlang der Seite des Floats angeordnet werden. Das stimmt nicht. Es sind in der Tat nur die Zeilenboxen (lineboxes) innerhalb der Block-Elemente, die sich so verhalten. (Siehe den ersten Screenshot). " aber in allen artikeln,büchern die ich lese steht meistens, dass wenn ich xyz floate der rest sich automatisch in den fluss begibt und sich diese automatisch "hinten anstellen" (zb in dem fall meine sachen im content wrapper) was gilt nun?! (ich bin verwirrt Oo)
|
|
13.10.2010, 15:49
|
|||
|
|||
|
Das, was du da frei aus "allen Artikeln und Büchern" zitierst, ist für mich nicht verständlich. Was soll "hinten anstellen" bedeuten? Und was hat das mit dem Wrapper zu tun? Und wo ist der Link zu deinem Problem?
Auf jeden Fall stimmt, was du aus dem Grundlagen-Text zitiert hast. Was findest du daran missverständlich? Bitte formuliere eine Frage.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
|
13.10.2010, 15:56
|
|||
|
|||
|
also ich hatte es bisher so verstanden
beispiel: Code:
<div id="wrapper"></div> <div id="box1">blabla</div> <div id="box2">blabla2</div> <div id="box3">blabla3</div> </div> der text sagt aber s ist ein verbreitetes Missverständnis, dass Block-Elemente, die auf ein gefloatetes Element folgen, ebenfalls entlang der Seite des Floats angeordnet werden. Das stimmt nicht. Es sind in der Tat nur die Zeilenboxen (lineboxes) innerhalb der Block-Elemente, [...] also müßte ich bei einem solchen konstrukt theoreitsch alle 3 boxen einzeln floaten das die boxen in einem fluss sind?
|
| Sponsored Links |
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 17:40 |
| Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 14:20 |
| Dynamische Höhe im Content und DIV immer unten | keaton | CSS | 8 | 13.12.2006 18:19 |
| DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 16:30 |
| Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 15:21 |
Linear-Darstellung
