• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div erweitert sich nicht - Wieso ?

H

HTML 4 YOU

Neues Mitglied
Hey Leute,

ich habe ein Problem, und zwar erweitern sich meine divs nicht automatisch.. :|, obwohl ich height: auto; eingefügt habe.
Habe es schon in Google Chrome, Firefox, IE 7+8 und Safari getestet, funktionierte aber nirgens


Hier mein HTML-Code:

HTML: 
<!DOCTYPE HTML>

<html>

    <head>

        <title>Startseite</title>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="../styles/Style.css" media="all" />

        <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="../styles/Style_lte_IE_7.css" media="all" /><![endif]-->


    </head>


    <body>


    <div id="header">

    </div>


    <div id="page">

    <div id="sidebar">

        <div id="Logo">

            <img src="../images/Logo.png" alt="m-remy.de" />

        </div>


        <ul id="nav-bar">
            <li><a href="index.html">Startseite</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>



    </div>



    <div id="content">

           <h3>Hallo und herzlich Willkommen auf meiner Homepage !!</h3>

           <p align="justify" class="eins">
           Hallo auf meiner neuen Homepage ! Ich habe sie jetzt neu &uuml;berarbeitet, hoffe sie gef&auml;llt euch ! agshfkaj fkajsgfhja gjhag dskja hgkjha hjfhjfagf kjasfhja hjfgd ahjs fjha fhja hjfgfa gfash fasgfhkasfghjkfghjujafsfha jfhkja gfjhagfhgasdhjfgakjgsj fhags gfjsdikjfa dhjf gakjhsgfk ahjdg fkjhagsdh gfasjgfjahgfhj fhjg fkajsh gfjahdsjhgkjahgdfh gasjhgf AGD gfd hjFDSF SAHF AHGFAGFDJ ghas gfakjgdfkj ahs dfkjhagfdkjhahjgahjs fkajhgf hjafgfj gadskjahgfjh agfhj gashj gfjha fhjgagf jash gfjahs gfjhagfdh ags fgjahsgf jhags fjhgasdfg ash gfkjahsgghfdjh4hfg a gfahj fhjags fjhadh gfashj fkhjas fkjagfd akjs f
           </p>


           <p align="justify" class="zwei">
           as fasd hffags fajhs gfag fhasg fnhagsd hga fgf as gfansd fafs fa fcha gf agsh fna fdngaf av s fnasf

           </p>

    </div>

    </div>
    </body>


</html>
Hier die CSS-Datei:

HTML: 
body {
background: #fff;
margin: 0px;
padding: 0px;
}



/********************Layout******************/

#header {
margin: 0px auto;
margin-top: 10px;
width: 900px;
height: 158px;
background: url(../images/header.png) no-repeat;
position: relative;
}


#page {
margin: 0px auto;
margin-top: 10px;
background: #d7d7d7;
width: 900px;
height: auto;                                            /* Wieso funktioniert das nicht ? */
min-height: 450px;
border: 0px solid;


border-radius: 15px;                                       /* CSS3 */
-webkit-border-radius: 15px;                               /* Safari, Chrome */
-khtml-border-radius: 15px;                                /* Konqueror */
-moz-border-radius: 15px;                                  /* Firefox */
}


#sidebar {
margin-top: 0px;
position: absolute;
}


#Logo {
margin-top: 120px;
margin-bottom: 20px;
margin-left: 20px;
position: relative;
}


#nav-bar {
margin-bottom: 60px;
margin-left: 0px;
list-style-type: none;
position: absolute;
}



#content {
margin-top: 20px;
margin-bottom: 40px;
padding-bottom: 40px;
margin-left: 280px;
width: 600px;
position: absolute;
}

/********************************************/





/****Menü****/

#nav-bar li {
padding: 0px;
margin: 0px;
}


#nav-bar a {
display: block;
height: 1.3em;
width: 11em;
margin-bottom: 1px;
padding: 0.35em 0.6em 0em 0.8em;
background: #0e74d3;
color: #000;
font-family: Arial;
font-size: 11pt;
text-decoration: none;
}


#nav-bar a:hover {
background: #0583f9;
color: #fff;
}



/************/





/**Content***/


#content h3 {
border: 1px solid #fff;
text-align: center;
color: ;

border-radius: 5px;                                       /* CSS3 */
-webkit-border-radius: 5px;                               /* Safari, Chrome */
-khtml-border-radius: 5px;                                /* Konqueror */
-moz-border-radius: 5px;                                  /* Firefox */
}


#content p.eins {
width: 220px;
margin-left: 50px;
position: absolute;
}

#content p.zwei {
width: 220px;
margin-left: 310px;
position: absolute
}

/************/


Hoffe ihr könnt mir helfen.
 
auf den ersten blick würd ich vermuten, dass es an der absoluten positionierung deiner content-blocks liegt, da diese deinen page-block einfach überlagern und dessen grenzen nicht einhalten müssen.
gib doch mal nen link zu der seite, damit man sich mal ansehen kann, wie sich das problem darstellt.
hab keine lust deinen code zusammenzupuzzlen und auf meinen server zu laden ;)
 
Es liegt sogar mit deutlicher sicherheit am position:absolute;

wofür positionierst du? wieso benutzt du nicht float? -> CSS 4 You - The Finest in Stylesheets

Und du verwendest das <div>-Tag übermäßig viel, obwohls teilweise keinen sinn macht. Das <div>-Tag gruppiert mehrere Elemente.

Code: 
    <div id="header">

    </div>

-> <h1> header </h1>

Code: 
        <div id="Logo">

            <img src="http://www.html.de/images/Logo.png" alt="m-remy.de" />

        </div>

-> <div> weg oder ein <h>-Tag verwenden, wenn es eine "Überschrift" ist.


Code: 
<p[B] align="justify" [/B]class="eins">
          ....
           </p>

-> das ist css:
Code: 
p { text-align:justify; }


Außerdem wäre zu empfehlen, dass du wenigstens ein p "minimal-CSS-reset" vollziehst

Code: 
* { margin:0; padding:0; }

um sogenanntes "has-Layout" zu verhindern.


Gruß
Loon3y
 
Loon3y schrieb:
Und du verwendest das <div>-Tag übermäßig viel, obwohls teilweise keinen sinn macht. Das <div>-Tag gruppiert mehrere Elemente.
Zum Vergrößern anklicken....
wo benutze ich es denn zuviel ?

hab mal ein bild mit ner übersicht von meinen divs gemacht:

http://img694.imageshack.us/img694/565/picture0001uh.jpg

Loon3y schrieb:
Code: 
    <div id="header">

    </div>
Zum Vergrößern anklicken....

Das ist als Hintergrund ein Bild, falls du den CSS Code gelesen hast, und außerdem kommt da evtl. noch was hin (Die Website ist nämlich noch im Aufbau)

Loon3y schrieb:
-> <h1> header </h1>
Zum Vergrößern anklicken....

Was soll ich mit ner Überschrift ????


Loon3y schrieb:
Code: 
        <div id="Logo">

            <img  src="http://www.html.de/images/Logo.png" alt="m-remy.de" />

         </div>


-> <div> weg oder ein <h>-Tag verwenden, wenn es eine "Überschrift" ist.
Zum Vergrößern anklicken....

Ok mach ich, nehm dann in den CSS-Code:
Code: 
#sidebar #Logo /* Geb dann dem Bild die ID Logo */ {
}



Loon3y schrieb:
Code: 
<p[B] align="justify" [/B]class="eins">
           ....
           </p>

-> das ist css:
Code: 
p  { text-align:justify; }
Zum Vergrößern anklicken....

mach ich


Loon3y schrieb:
Außerdem wäre zu empfehlen, dass du wenigstens ein p "minimal-CSS-reset" vollziehst

Code: 
* { margin:0;  padding:0; }

um sogenanntes "has-Layout" zu verhindern.
Zum Vergrößern anklicken....


Ok, danke für deine ERläuterungen, aber kannst du mir dann bitte sagen, was ich als position nehmen soll ?!
Ich bekomm nämlich nicht den Text neben die #Sidebar, wenn ich den Text nicht als absolutes Positioniere.
 
Zuletzt bearbeitet:
HTML 4 YOU schrieb:
wo benutze ich es denn zuviel ?

hab mal ein bild mit ner übersicht von meinen divs gemacht:

http://img694.imageshack.us/img694/565/picture0001uh.jpg
Zum Vergrößern anklicken....

Du hast das Logo Div vergessen ;) Wieso packst du noch ein Div um das Image? Du kannst auch dem Bild margin geben :)

Desweiteren benutzt du als head ein Div. Denke da rein kommt die Überschrift (Wenn auch als Bild) Dann muss es als IMG zu sehen sein und nicht in CSS formatiert.
geht dann einfach so.
<h1><img /></h1>
Und auch hier kannst du alles super mit CSS formatieren :)
Probier es mal abzuändern
 
HTML 4 YOU schrieb:
wo benutze ich es denn zuviel ?
Zum Vergrößern anklicken....

habe ich dir aufgezählt.


<div id="header"></div> ist falsch....Willst du keine Überschrift für deine Seite haben? Wenn das wirklich noch ein Stylelement ist....dann könntest du vllt ein <div> nehmen...

CSS Code kann man lesen, aber wenn man das bild nicht sieht,w eiß man es nicht. Endweder du hast ein Bild mit inhalt, dann gehörts ins HTML als <img>-Tag, wenn es - wie hier - nur zur Zierde ist, dann ist es als background richtig.

Ok, danke für deine ERläuterungen, aber kannst du mir dann bitte sagen, was ich als position nehmen soll ?!
Zum Vergrößern anklicken....

Weil man floatet, wenn man Elemente nebeneinander haben will.


Gruß
Loon3y
 
Hey Leute,

Danke für eure guten Tipps, funktioniert jetzt mit dem automatischen erweitern und so, nur irgendwie, kann ich jetzt nicht mehr den #content formatieren, wieso ?

hier der CSS Code:
HTML: 
body {
background: #fff;
margin: 0px;
padding: 0px;
}



/********************Layout******************/

#header {
margin: 0px auto;
margin-top: 10px;
width: 900px;
height: 158px;
background: url(../images/header.png) no-repeat;
}


#page {
margin: 0px auto;
margin-top: 10px;
background: #d7d7d7;
width: 900px;
min-height: 450px;
height: auto;
border: 0px solid;


border-radius: 15px;                                       /* CSS3 */
-webkit-border-radius: 15px;                               /* Safari, Chrome */
-khtml-border-radius: 15px;                                /* Konqueror */
-moz-border-radius: 15px;                                  /* Firefox */
}


#sidebar {
margin-left: 20px;
margin-top: 50px;
float: left;
}


#logo {
margin-bottom: 20px;
}


#nav-bar {
margin-bottom: 60px;
list-style-type: none;
}



#content {
margin-top: 30px;
margin-bottom: 40px;
padding-bottom: 40px;
margin-left: 280px;
width: 600px;

}

/********************************************/





/****Menü****/

#nav-bar li {
padding: 0px;
margin: 0px;
}


#nav-bar a {
display: block;
height: 1.3em;
width: 11em;
margin-bottom: 1px;
padding: 0.35em 0.6em 0em 0.8em;
background: #0e74d3;
color: #000;
font-family: Arial;
font-size: 11pt;
text-decoration: none;
}


#nav-bar a:hover {
background: #0583f9;
color: #fff;
}



/************/





/**Content***/


#content h3 {
border: 1px solid #fff;
text-align: center;
color: ;

border-radius: 5px;                                       /* CSS3 */
-webkit-border-radius: 5px;                               /* Safari, Chrome */
-khtml-border-radius: 5px;                                /* Konqueror */
-moz-border-radius: 5px;                                  /* Firefox */
}


#content p.eins {
width: 220px;
margin-left: 50px;
text-align: justify;
float: left;
}

#content p.zwei {
width: 220px;
margin-left: 310px;
text-align: justify;
}

/************/
 
Loon3y schrieb:
<div id="header"></div> ist falsch....Willst du keine Überschrift für deine Seite haben? Wenn das wirklich noch ein Stylelement ist....dann könntest du vllt ein <div> nehmen
Zum Vergrößern anklicken....
Darüber kann man sich streiten. An dieser Stelle ist meistens ein Logo für die Site. Man kann dafür eine Überschrift nehmen, oder man nimmt die Überschriften nur zur Strukturierung der Seiten. Das würde ich davon abhängig machen, wie stark die Inhalte, die auf einer Site präsent werden, zusammenhängen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben