Problem mit <div> Verschachtelung ?

Japs

Angesehenes Mitglied
Hallo,

irgendwie will es mir nicht gelingen:
Ich möchte quasi unter: http://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
/* ----------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.
 
Zurück
Oben