Hallo Ihr Lieben,
habe 2 kleine Frage.
Zu einem erst einmal der Link:
testcase
Nutze dort die footer Stick alt Methode und irgendwas mit clearen im 21 Jahrhundert
Die link`s gefloatete Navi sollte doch eigentlich den bot nach unten schieben? das sollte doch das:
PHP-Code:
#wrapper:after {
content:".";
display:block;
clear:both;
font-size:0;
overflow:hidden;
height:.1px;
visibility:hidden;
}
bewirken?
nur leider macht Sie es nicht ?
Der Content ja, aber die Navi nicht ?!? weiß jemand woran das liegen kann?
CSS
PHP-Code:
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#e7ddba url("img/stripes_top.jpg") repeat-x 0px 0px;
font-family:Arial;
font-size:100%;
text-align:center;
}
#wrapper {
position:relativ;
min-height:100%;
background:url("img/stripes_bot.jpg") repeat-x left bottom;
}
#wrapper:after {
content:".";
display:block;
clear:both;
font-size:0;
overflow:hidden;
height:.1px;
visibility:hidden;
}
#head {
background-image:url(img/head.jpg);
background-repeat:no-repeat;
width:1000px;
height:177px;
margin:0 auto;
}
#navi {
float:left;
background-image:url(img/trenner.jpg);
background-repeat:y-repeat;
text-align:left;
width:200px;
margin:30px 0 0 10px;
}
li {
list-style:none;
}
a {
text-decoration:none;
color:#165a29;
}
a:hover {
color:#c7232b;
}
a.start img {
border: none;
background: none;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
khtml-opacity: 0.7;
opacity: 0.7;
}
#cont_wrap {
margin:0 auto;
width:1000px;
}
#cont_wrap h1 {
color:#951b1b;
margin:30px 0;
}
#cont_wrap p {
text-align:left;
margin:0 0 0 250px;
width:600px;
padding-bottom:10px;
}
#rahmen {
margin:0px 0 0 20px;
padding-bottom:180px;
}
#bot_nav {text-align:center;
width:100%;
height:130px;
margin:-135px 0 0 0;
}
#bot_nav #ul1 {
float:left;
margin:0 0 0 10px;
width:150px;
}
#bot_nav ul {float:left;
margin: 0 0 0 100px;
width:150px;
}
#bot_nav a {
color:white;
}
#bot_nav a:hover {
color:red;
}
Xhtml
PHP-Code:
<div id="wrapper">
<div id="cont_wrap">
<div id="head"></div>
<div id="navi">
<ul>
<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>
<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>
<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>
<h1>Startseite - Land - Forst - Gartenbau - Laubusch</h1>
<p>Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br />
Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br />
</p>
<div id="rahmen">
<a class="start" href="#">
<img id="aktprojekt" onmouseover="new Effect.Opacity( 'aktprojekt', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'aktprojekt', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Aktuelle PORSCHE Restaurationen" hspace="4" width="172" border="0" src="./1.jpg" />
</a>
<a class="start" href="#">
<img id="beratung" onmouseover="new Effect.Opacity( 'beratung', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'beratung', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Qualifizierte Beratung rund um Kauf, Restauration, Wartung und Pflege" hspace="4" width="172" border="0" src="./2.jpg" />
</a>
<a class="start" href="#">
<img id="reparatur" onmouseover="new Effect.Opacity( 'reparatur', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'reparatur', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Fachgerechte Reparatur, Wartung und Pflege Ihres Porsche Klassikers" hspace="4" width="172" border="0" src="./3.jpg" />
</a>
<a class="start" href="#">
<img id="strahl" onmouseover="new Effect.Opacity( 'strahl', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'strahl', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Strahlarbeiten jeglicher Art zum Beispiel Sandstrahlen, Glasperlenstrahlen, Kunststoffstrahlen, Nussschalenstrahlen" hspace="4" width="172" border="0" src="./4.jpg" />
</a>
</div>
</div>
</div>
</div>
<div id="bot_nav">
<ul id="ul1">
<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>
<ul>
<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>
<ul>
<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>
<ul>
<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>