✔ design zerstückelt, divs machen was sie wollen

Status
Nicht offen für weitere Antworten.
hubbl

hubbl

Erfahrenes Mitglied
Hallo,
ich habe ein kleinen(oder eher größeres) Problemchen.
Im Anhang habe ich zwei bilder die das verdeutlichen. Ich habe ein (zugegebenermaßen bescheidenes) Design, das sich aus 3 Bildern zusammensetzt.
Im ersten Bild ist nur die Navigation zu sehen und bis dahinklappt das auch ganz gut. Wenn ich nun jedoch den Content mit Text fülle(2. Bild) zerreists mir alles. Ich habe verschieden float Kombinationen versucht aber nix hat zu einem Ergebnis geführt, teilweise waren bis auf das obere alle bilder weg.
Kann mir jmd vllt einen Ratschlag geben?

edit: ups das wichtigste vergessen :D :

Code: 
<body>
	<div id="main">
		<div id="oben"></div>
		<div id="hintergrund">
			<div id="nav">
			<?php include 'navigator.inc.php';?>
			</div>
			<div id="cont">
			<?php include 'content.inc.php';?>
			</div>
		</div>
		<div id="unten"></div>
	</div>
</body>

Code: 
body{
	background: #cccccc;
}
#main{
	width:829px;
	margin: 0 auto;
	display: block;
	font-family: arial;
}

#main a:link{color:white;text-decoration: none;}
#main a:visited { color:white; text-decoration:none; }
#main a:focus { color:white;text-decoration:none;}
#main a:hover { color:white;text-decoration:none;}
#main a:active { color:white;text-decoration:none;}

#oben{
	background: url(image/weiss_oben.png);
	width: 829px;
	height: 42px;
	margin-left: 1px;
}
#cont{
	width: 609px;
}
#hintergrund{
	background: url(image/weiss_hintergrund.png) repeat-y;
	width: 829px;
}
#unten{
	background: url(image/weiss_unten2.png);
	width: 829px;
	height: 38px;
	margin-left: 1px;
}
#nav{
	width: 220px;
	text-align:center;
}


Gruß Dennis
 

Anhänge

  • vorher.jpg
    vorher.jpg
    3,9 KB · Aufrufe: 12
  • nachher.jpg
    nachher.jpg
    6,2 KB · Aufrufe: 13
Zuletzt bearbeitet:
Ich weiss jetzt nicht, welche float-Kombinationen du da durchgespielt hast, denn in deinem Stylesheet findet sich überhaupt keine, aber mit dieser hier bricht der Inhalt nicht um:

Code: 
#cont{
        margin-left:220px;
}

#nav{
        width: 220px;
        text-align:center;
        float:left;
}
 
gut das bringt mich n kleines Stück weiter.
Hab unten nochmal Bilder rangehangen wie es jetzt aussieht und das ist immer noch nicht akzeptabel..

Einerseits zieht sich alles zusammen andererseits ist das untere Bild weg..
 

Anhänge

  • ohnetext.jpg
    ohnetext.jpg
    3,2 KB · Aufrufe: 10
  • mittext.jpg
    mittext.jpg
    5,3 KB · Aufrufe: 9
Steht die Seite online zur Verfügung, um dort mal einen Blick drauf werfen zu können, denn bei mir treten diese Darstellungsfehler nicht auf.

Und aus welchem Browser stammen überhaupt die Schnappschüsse?
 
Code: 
#cont{
        /*width: 609px;*/ /* auskommentiert = deaktiviert */
        margin-left: 220px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Klasse .clearfix rufst du im DIV #hintergrund auf:

Code: 
<div id="hintergrund" class="clearfix"> ... </div>
Auf diese Weise wird die Floatumgebung aufgehoben und das DIV #hintergrund "umschliesst" die beiden Spalten in der Höhe.

Die Navigation solltest du noch mit dem Listenelement auszeichnen, denn dein derzeitiges "Konstrukt" ist syntaktisch falsch:

Code: 
<div id="nav">
     <ul>
         <li><a href="index.php?section=start">Startseite</a></li>
         <li><a href="index.php?section=member">Member</a></li>
         <li><a href="index.php?section=location">Locations</a></li>
         <li><a href="index.php?section=gallerie">Gallerie</a></li>
         <br />
         <li><a href="index.php?section=admin">Admin</a></li>
     </ul>
</div>
Code: 
#nav ul {
list-style:none;
}
Im Admin-Bereich fehlt zudem der untere Abschnitt des HTML-Codes.
 
Was genau bewirken die einzelnen Einstellungen aus dem clearfix?
Also gerade das content: "." und das visibly: hidden treffen bei mir auf unverständnis..
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück