Bitte helft - hab ein <div> Verschachtelungsproblem ?

[Japs]

Hallo,

irgendwie will es mir nicht gelingen:
Ich möchte quasi unter: https://www.urlaubsregionen.info/europa/spanien die Anzeige im Text positionieren ohne dass mir die Länderauswahl komplett nach unten rutscht oder Text unterhalb der Anzeige eingerückt wird.

Ich habe die Seite bzw. die "<divs> innerhalb der Seite so aufgebaut:

<div id="box_start"> Text 1 </div>

<!-- Beginn Zufallsanzeigen -->
<div id="box_zufall"
Hier jetzt die Anzeige
</div>
<!-- Ende Zufallsanzeigen -->

<div id="box_start2"> Text 2 </div>

<!-- Länderauswahl-->
<div id="navig_laender">
Hier die Länderauswahl (Navigation rechts)
</div>

Mein kompelttes CSS sieht folgendermaßen aus - fals benötigt wird:

Code: Alles auswählen

/* ----------Container zentriert das Layout---------- */
*
{	margin:0;
	padding:0;
}
#container
{ 
	position: relative; 
	width: 980px; 
	margin:auto; 
	height: 100%; 
	min-height: 100%; 
	padding: 0; 
}

#head 
{ 
	background-image: url(image/head.png); 
	background-repeat: no-repeat; 
	width: 962px; 
	height: 170px; 
	padding-left: 18px; 
}

.my_clear
{ 
	font-size:1px;
	height:1px;
	overflow:hidden;
	clear:both;
}
/* ----------allgemeines Layout---------- */
body 
{ 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	background-image: url(image/head_bg.png); 
	background-repeat: repeat-x; 
	background-position: 0 0; 
	height: 100%; 
	min-height: 100%; 
}

#mitte
{ 
	background-image: url(image/bg_mitte.png); 
	background-repeat: repeat-y; 
	width: 980px; 
	height: 100%; 
	z-index: 1; 
	float: left; 
	min-height: 800px; 
}

#mitte_oben 
{ 
	background-image: url(image/bg_mitte_oben.png); 
	background-repeat: repeat-x; 
	width: 980px; 
	height: 270px; 
	float: left; 
	min-height: 270px; 
}


#box
{ 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	float: left; 
	width: 750px; 
	margin-top: 35px;
  margin-bottom: 15px; 
  margin-left: 35px; 
 }
#box_start 
{ 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	margin-top: 35px; 
	margin-bottom: 15px; 
	margin-left: 35px; 
	width: 590px; 
	float: left; 
}

#box_start2 { 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	margin-top: 35px; 
	margin-bottom: 15px; 
	margin-left: 35px; 
	width: 590px; 
	float: left; 
}

#box_zufall { 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	margin-left: 35px; 
	width: 525px; 
	float: left; 
}

#anzeige 
{ 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	margin-top: 10px; 
	margin-bottom: 15px; 
	margin-left: 35px; 
	width: 590px; 
	float: left; 
}

#navig_laender { 
	background-image: none; 
	background-position: 0 0; 
	text-align: justify; 
	margin-top: 35px; 
	margin-bottom: 15px; 
	margin-left: 35px; 
	width: 250px; 
	float: left; 
}

#text 
{ 
	color: #846d08; 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
}

.ue_schrift 
{ 
	color: #846d08; 
	font-weight: bold; 
	padding-top: 1px; 
}

a:link, a:active, a:visited	
{ 
	color: #846d08; 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: none; 
}

a:hover, a:focus 
{ 
	color: #cac092; 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: underline;
}


/* ----------Footer---------- */

#footer 
{ 
	color: #fffff8; 
	background-image: url(image/bg_footer.png); 
	background-repeat: repeat-y; 
	background-position: 0 0; 
	clear: both; 
	z-index: 0; 
	width: 950px; 
	height: 35px; 
	min-height: 35px; 
	padding-top: 10px; 
	padding-bottom: 15px; 
	padding-left: 30px; 
}



#footer a:link, #footer a:active, #footer a:visited	
{ 
	color: #fffff8; 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: none; 
}

#footer a:hover, #footer a:focus 
{
	color: #3c3c3c; 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: underline; 
}
/* ---------Formularfelder---------- */
.inputfelder 
{ 
	background-color: #fefcf1; 
	padding: 2px; 
	border: solid 1px #cac092; 
}

.red 
{ 
	color: #c10c0c; 
	margin: 0.67em 0; 
}
/* ---------Länderauswahl---------- */
.listing
{ 
	margin-top: 5px; 
	list-style-position:outside; 
	list-style-type:none; 
}
.listing li
{ 
	background-repeat: no-repeat; 
	background-position: 5px 1px; 
	width: 175px; float:left; 
	margin-right:1px; 
	margin-bottom: 1px; 
	padding: 1px; 
}

.listing li.long
{ 
	background-repeat: no-repeat; 
	background-position: 5px 1px; 
	width:135px; 
	margin-bottom: 1px; 
}
.listing a,.listing a:link, .listing a:visited,.listing a:active
{	
	color:#5c4d09;
	text-decoration:none;
}
.listing a:hover, a:aktion
{ 
	color: #d27a11; 
	text-decoration: underline; 
}

/* ---------Zufallsanzeigen---------- */
.zufall 
{ 
	background-image: url(../images/bg_zufall.png); 
	background-repeat: no-repeat; 
	width: 496px; 
	height: 150px; 
	z-index: 1; 
	padding-top: 5px; 
	padding-right: 10px; 
	padding-left: 10px; 
}
.bg_random 
{  
	background-repeat: no-repeat; 
	width: 450px; 
	height: 120px; }
.text_random 
{ 
	background-repeat: no-repeat; 
	padding-top: 12px; 
	padding-right: 10px; 
}
.gif_random 
{ 
	background-repeat: no-repeat;
	float: left;
	padding-left: 11px;
	padding-top: 17px;
	width: 127px;

}
.zufall_grau_unten 
{ 
	color: #a7a7a7; 
	font-size: 9px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	width: 450px; 
	z-index: 2; 
	float: left; 
	margin-top: 20px;
}

Wo habe ich jetzt einen Denkfehler dass es auf der Seite nicht optimal wie gewünscht aussieht ?
Danke & Gruß Dirk.

[ins0]

Nach dem Schema?

Code: Alles auswählen

<div class="left" style="float&#58;left">

		<div id="text">Test</div>

		<div id="anzeige">Anzeige</div>

		<div id="text">Test</div>

</div>
<div class="right" style="float&#58;right">
	<div id="navi_länder">Navi Länder</div>
</div>
<div style="clear&#58;both;"></div>


+------------+------+
|  TEXT      | Navi |
|            |      |
|  ANZEIGE   |      |
|            |      |
|  TEXT2     |      |
+------------+------+

?

Wenn ich so über den Quelltext sehe da werden ein paar DIV nich korrekt geschlossen.

[Japs]

Wenn ich so über den Quelltext sehe da werden ein paar DIV nich korrekt geschlossen.

Ich hab jetzt mal alle Abschnitte mit "<!-- -->" mit Hilfetexten versehen -damit es etwas deutlicher wird.

Die "divs" : Container & Mitte werden allerdings erst im Footer geschlossen.

Ich dachte, so wie ich die Anordnung gemacht ahbe klappts auch -wohl aber nicht ?

Gruß Dirk

[emel]

du machst deine box zufall nicht wieder zu!!

Code: Alles auswählen

	<!-- Beginn Zufallsanzeigen -->

	<div id="box_zufall">
			<div class="zufall">
			<a href=http&#58;//www.unterkunft.ws/ferienwohnung/1178007655><strong>Ferienhaus Villa Salobre Lagos</strong></a>
				<div class="bg_random">
					<div class="gif_random">
						<img src="http&#58;//www.unterkunft.ws/objektimages/1178007655_1.jpg" alt="Ferienhaus Villa Salobre Lagos" height=70 width=100 align="middle" border=0>
					</div>
				<div class="text_random">

					Apricot farbene Villa mit moderner Einrichtung und eigenem Pool, gelegen im Süden von Gran Canaria. Große Panoramafenster erlauben einen herrlichen Ausblick.<br /><br />
					&#91; <a href="http&#58;//www.unterkunft.ws/ferienwohnung/1178007655">Alle Details auf Unterkunft.ws</a> &#93;
				</div>
				<!-- Text grau unten -->
				<div class="zufall_grau_unten" >
					Spanien | 4 Personen&nbsp;|&nbsp;Preis ab&#58; 207.00 &euro; / Uebernachtung
				</div>

		</div>
		<div class='my_clear'></div>
		</div>
	<!-- Ende Zufallsanzeigen -->

so sollte es gehen:

Code: Alles auswählen

	<div id="box_zufall">
		<div class="zufall">
			<a href=http&#58;//www.unterkunft.ws/ferienwohnung/1178007655><strong>Ferienhaus Villa Salobre Lagos</strong></a>
				<div class="bg_random">
					<div class="gif_random">
						<img src="http&#58;//www.unterkunft.ws/objektimages/1178007655_1.jpg" alt="Ferienhaus Villa Salobre Lagos" height=70 width=100 align="middle" border=0>
					</div>
				<div class="text_random">
					Apricot farbene Villa mit moderner Einrichtung und eigenem Pool, gelegen im Süden von Gran Canaria. Große Panoramafenster erlauben einen herrlichen Ausblick.<br /><br />
					&#91; <a href="http&#58;//www.unterkunft.ws/ferienwohnung/1178007655">Alle Details auf Unterkunft.ws</a> &#93;
				</div>
				<!-- Text grau unten -->
				<div class="zufall_grau_unten" >
					Spanien | 4 Personen&nbsp;|&nbsp;Preis ab&#58; 207.00 &euro; / Uebernachtung
				</div>
		</div> <!-- close "zufall" -->
		<div class='my_clear'></div>
		</div>
	</div> <!-- close "box_zufall" -->
	<!-- Ende Zufallsanzeigen -->

[Japs]

@emel

Danke!

Jetzt passt es quasi schon mal im IE nur im FF & Opera hängt die Länderauswahl immer noch unterhalb des ganzen Textes ????

Gruß Dirk

[Mork vom Ork]

Jetzt passt es quasi schon mal im IE nur im FF & Opera hängt die Länderauswahl immer noch unterhalb des ganzen Textes ????

Muss sie ja auch. Wenn du der Länderauswahl per clear:both sagst, sie soll unter allen float-Elementen erscheinen und beim Haupttext div#left float:left setzt, bleibt ihr nichts anderes übrig. Dass der IE das nun wieder falsch macht und clear:both ignoriert …

Dein Code enthält übrigens noch einen ganzen Packen weiterer Fehler:
https://validator.w3.org/check?uri=http ... pa/spanien
https://jigsaw.w3.org/css-validator/val ... pa/spanien

[Japs]

Thanks!

Problem konnte gelöst werden - denke so gehts :)
Die kleinen anderen Fehlerchen muß ich aber nochmals schaun :)

Gruß Dirk

[emel]

Dein Spanientext ist auch schon seehr lang geworden. Den könntest du locker auf 2 Seiten splitten

[schimanski99]

Hi,

ich validiere in solchen Fällen mein XHTML und das CSS. Das hilft schon ungemein bei der Fehlersuche.

https://validator.w3.org/ -- für das Markup also HTML
https://jigsaw.w3.org/css-validator/ -- für das CSS

Der XHTML-Validator meckert nicht geschlossene DIVs an und man kann den Fehler leicht beseitigen, weil der Fehler mit Zeilennummer angegeben wird.

Invalider Code ist eh fatal.

LG, Renate