| Autor |
Nachricht |
lekat
Threadersteller
Dabei seit: 22.09.2006
Ort: -
Alter: 40
Geschlecht: 
|
Verfasst So 29.04.2007 17:20
Titel [css] div floaten - warum klappts nicht? |
  |
|
Hallo,
ich versuche gerade das erste Mal eine Homepage komplett mit CSS aufzubauen, komme aber beim float nicht weiter. In der Navi funktioniert es, beim Hauptinhalt (main bzw. news, die sollen nebeneinander stehen) nicht. Ich weiß dass sich float auf das Elterneleent bezieht (wrapper), aber sobald ich bei main und news float einfüge, verschwindet wrapper dort und main und news stehen ohne wrappers hintergrundfarbe alleine da - warum?
Hier das HTML:
| Code: | <body>
<div id="wrapper">
<div id="header">
<div id="navi_top">
<div id="navitext">Link Link Link</div>
<div id="navitextrechts">Kontakt Impressum</div>
</div>
</div>
<div id="main">
Hallo Text<br /><br />Noch mehr Text
</div>
<div id="news">News</div>
</div>
</body> |
und css:
| Code: |
#wrapper {
width: 801px;
margin-left:auto;
margin-right:auto;
background-color: #dfdfb9;
text-align:left;
border-left: #666666 4px dashed;
border-right: #666666 4px dashed;
border-bottom: #666666 4px dashed;
border-width: 1px;
}
#header {
background: url(images/header.jpg) no-repeat #F7F7E9;
width: 801px;
height: 143px;
}
a:active {
color: #ff0000;
}
#navi_top {
margin-top: 123px;
float: left;
width: 799px;
height: 20px;
border-bottom: #666666 4px dashed;
border-width: 1px;
}
#navitext, #navitextrechts {
padding: 1px;
}
#navitext {
float: left;
margin-left: 10px;
font: 14px Geneva, Arial, Helvetica, sans-serif;
}
#navitextrechts {
float: right;
margin-top: 2px;
margin-right: 20px;
text-align: right;
font: 11px Geneva, Arial, Helvetica, sans-serif;
}
#main {
float: left;
width: 600px;
padding: 10px;
min-height: 400px;
font-size: 13px;
}
#news {
float: right;
padding: 2px;
background-color: white;
} |
Der Unterschied bei der Navi ist ja, dass es einen zusätzlichen Layer mit float:left als Elternelement gibt (navi_top), aber wenn ich das für main und news auch mache, funktioniert es auch nicht.
Bitte zerreisst mich nicht 
Zuletzt bearbeitet von lekat am So 29.04.2007 17:33, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst So 29.04.2007 19:24
Titel
|
|
|
http://www.css4you.de/clear.html
Hier im Forum einfach mal nach clear suchen, da finden sich noch ein paar
andere Methoden zum clearen von floats.
|
|
| |
 |
|
|
Anzeige
|
|
|
Ranta
Dabei seit: 28.02.2006
Ort: Ratingen
Alter: -
Geschlecht:
|
Verfasst Mo 30.04.2007 09:16
Titel
|
|
|
2 möglichkeiten, entweder das das wrapper-div auch floaten, dann ist es aber nicht mehr zentriert und man müsste noch ein div drumherum packen, oder unter das main und das news div ein neues div aufspannen, dass die beiden cleared
HTML
| Code: |
<div id="main">
Hallo Text<br /><br />Noch mehr Text
</div>
<div id="news">News</div>
<div id="clearer"> </div>
|
CSS:
| Code: |
#clearer
{
height: 0;
line-height: 0;
clear: both;
}
|
Zuletzt bearbeitet von Ranta am Mo 30.04.2007 09:17, insgesamt 1-mal bearbeitet
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
lekat
Threadersteller
Dabei seit: 22.09.2006
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mo 30.04.2007 10:43
Titel
|
|
|
danke für eure Hilfe!
Ich finde den letzten Link sehr interessant - der führt zu einem deutschen Tutorial:
http://jassesnee.de/easyclear/
Da verstehe ich aber nicht, wie man das clearfix:after benutzen soll. Man muss es doch irgendwie im HTML auch benutzen?
Habe jetzt erstmal die erste Variante von Ranta benutzt, funktioniert auch wunderbar 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Input Feld auf 100% stellen - Wie klappts im Firefox?
Probleme mit dem Floaten
Übereinander floaten von Div's
[CSS] Boxen untereinander floaten
[CSS] ungewollte Umbrüche beim floaten
CSS floaten nach oben! Möglich?
|
|
Willkommen auf dem Portal für Mediengestalter
