mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 04.02.2023 10:41 Benutzername: Passwort: Auto-Login

Thema: Div Höhen und Hintergründe. vom 26.06.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Div Höhen und Hintergründe.
Autor Nachricht
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Di 26.06.2007 15:12
Titel

Div Höhen und Hintergründe.

Antworten mit Zitat Zum Seitenanfang

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 15:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Braininsider

Dabei seit: 18.11.2003
Ort: Halle
Alter: 41
Geschlecht: Männlich
Verfasst Di 26.06.2007 16:06
Titel

Antworten mit Zitat Zum Seitenanfang

Stichwort Float
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 45
Geschlecht: Männlich
Verfasst Di 26.06.2007 17:42
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 26.06.2007 19:28
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Braininsider

Dabei seit: 18.11.2003
Ort: Halle
Alter: 41
Geschlecht: Männlich
Verfasst Di 26.06.2007 20:22
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 26.06.2007 20:58
Titel

Antworten mit Zitat Zum Seitenanfang

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;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Di 26.06.2007 22:40
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.positioniseverything.net/easyclearing.html

Clearfix after oder auch ein overflow:auto tuts in den meisten Browsern, sodass man markupfrei clearen kann.
 
Mark-Korb
Threadersteller

Dabei seit: 11.04.2007
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Mi 27.06.2007 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Anpassen von div-höhen?
css, mehrspaltiges layout und angepasste höhen
[css] Frage zu dynamischen Höhen von DIVs
Hintergründe für Präsentationen
2 Hintergründe Gleichzeitig - CSS - Danke - Solved
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.