Autor |
Nachricht |
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 26.06.2007 16:12
Titel Div Höhen und Hintergründe. |
|
|
Flgendes Problem:
Ich gestalte eine Homepage für einen Bestatteter Design Gefällt allen. Ansicht auch nicht all zu schwer mit CSS umzusetzen, dachte ich (denk ich immer noch).
So gibt er mir das aus:
http://jo.mindplant.net/falsch.jpg
So etwa sollte das aber aussehen
http://jo.mindplant.net/richtig.jpg
Ich habe 2 Hintergründe die in 2 divs verschachtelt, leider zieht er einen davon nicht um den anderen. Und den anderen zeigt er gar nicht. Wenn ich feste Höhen angebe macht er es aber.
CSS
Code: |
body {
background-image: url(../images/bg.jpg);
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#wrap0 {
background-image: url(../images/line.png);
background-repeat: repeat-x;
width: 100%;
margin: 0px auto;
}
#wrap1 {
width: 990px;
height: auto;
background-color: #FFFFFF;
margin: 0px auto;
}
#header {
width: 980px;
height: 420px;
background-image: url(../images/header1.jpg);
background-repeat: no-repeat;
margin: 0px 5px 0px 5px;
}
#menu {
height:30px;
width: 980px;
margin: 0px 5px 0px 5px;
background-color: #003366;
}
#wraped {
background-image: url(../images/bg-text.jpg);
background-repeat: no-repeat;
width: 980px;
margin: 5px 5px 5px 5px;
background-color: #FFF;
height: auto;
}
#ina {
width: 775px;
margin-right: 5px;
float: left;
padding: 10px 5px 10px 0px
}
#bar {
width: 190px;
border-left: dotted #000 2px;
border-bottom: dotted #000 2px;
float: left;
}
#footer {
width: 980px;
height: 25px;
margin: 0px 5px 0px 5px;
background-color: #003366;
float: left;
}
|
html
Code: |
<body>
<div id="wrap0">
<div id="wrap1">
<div id="header">
</div>
<div id="menu">
<?php mosLoadModules ( 'top' ); ?>
</div>
<div id="wraped">
<div id="ina">
<?php include ("mainbody.php"); ?>
acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac <br />acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac <br />acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac <br />acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac <br />acasacsac accacac acasacsac accacac acasacsac accacac acasacsac accacac
</div>
<div id="bar">
<form action="index.php" method="post">
<div align="right">
<input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
<input type="hidden" name="option" value="search" />
</div>
</form>
<?php mosLoadModules ( 'right' ); ?>
</div>
</div>
<div id="footer"> footer </div>
</div>
</div>
</body>
|
Danke vorab.[/code]
Zuletzt bearbeitet von Mark-Korb am Di 26.06.2007 16:14, insgesamt 1-mal bearbeitet
|
|
|
|
|
Braininsider
Dabei seit: 18.11.2003
Ort: Halle
Alter: 42
Geschlecht:
|
Verfasst Di 26.06.2007 17:06
Titel
|
|
|
Stichwort Float
|
|
|
|
|
Anzeige
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Di 26.06.2007 18:42
Titel
|
|
|
Zitat: | leider zieht er einen davon nicht um den anderen. Und den anderen zeigt er gar nicht. Wenn ich feste Höhen angebe macht er es aber. |
Wer ist "er"?
Mit welchem Browser arbeitest du? Tritt das Problem in jedem Browser auf oder nur in einem bestimmten?
Leider hast du nur den Body deines HTML-Dokumentes gepostet.
Die DTD-Angabe wäre ebenfalls noch interessant gewesen...
Wenn du deine Site mit CSS gestaltest, dann solltest du den Browser in jedem Fall mittels Doctype-Switch in den standarkonformen Modus schalten.
Und wie mir scheint, krankt dein Code ein wenig an Divitis.
Eventuell könnte man das anders strukturieren?
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 26.06.2007 20:28
Titel
|
|
|
jo genau und jedenfalls fehlt auch noch ein
clearendes Element vor dem vorletzten
schließenden </div>.
Hier schätzungsweise:
....
<div id="footer"> footer </div>
<br style="clear:both" />
</div>
</div>
</body>
|
|
|
|
|
Braininsider
Dabei seit: 18.11.2003
Ort: Halle
Alter: 42
Geschlecht:
|
Verfasst Di 26.06.2007 21:22
Titel
|
|
|
Um etwas zu clearen zu können muss es erst Fließen und das tut es nicht in seinem code.
Das Problem ist einfach das die umschließenden Divs nicht korrekt fließen deswegen wird das Div nicht mit vergrößert.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 26.06.2007 21:58
Titel
|
|
|
Braininsider hat geschrieben: | Um etwas zu clearen zu können muss es erst Fließen und das tut es nicht in seinem code.
Das Problem ist einfach das die umschließenden Divs nicht korrekt fließen deswegen wird das Div nicht mit vergrößert. |
???
Code: | #ina {
float: left;
}
#bar {
float: left;
}
#footer {
float: left;
} |
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
|
|
|
|
Mark-Korb
Threadersteller
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mi 27.06.2007 14:25
Titel
|
|
|
Mit style="clear:both" / hat es funktioniert, danke nochmal für die links. Die Floats haben ansonsten funktioniert.
rob hat geschrieben: | Zitat: | leider zieht er einen davon nicht um den anderen. Und den anderen zeigt er gar nicht. Wenn ich feste Höhen angebe macht er es aber. |
Leider hast du nur den Body deines HTML-Dokumentes gepostet.
Die DTD-Angabe wäre ebenfalls noch interessant gewesen...
Wenn du deine Site mit CSS gestaltest, dann solltest du den Browser in jedem Fall mittels Doctype-Switch in den standarkonformen Modus schalten.
|
Hab immer Almost Standards Mode
Das Problem Tritt in allen Browsern auf, bzw. trat
Frage: ist das Falsch? Wäre Full Standards Mode besser?
Und danke für den Artikel der war eine echte Wissens ergänzung.
rob hat geschrieben: |
Und wie mir scheint, krankt dein Code ein wenig an Divitis.
Eventuell könnte man das anders strukturieren? |
Das Bezieht sich ja auf Inhalte, welche bei mir ja mit Listen und H1-H6 geordnet sind. Das was ich euch da gepostet habe ist nur der code für das Design. und Ich sehe da keine Möglichkeit auf Divs zu verzichten.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Anpassen von div-höhen?
[css] Frage zu dynamischen Höhen von DIVs
css, mehrspaltiges layout und angepasste höhen
Hintergründe für Präsentationen
2 Hintergründe Gleichzeitig - CSS - Danke - Solved
|
|