Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.12.2010, 19:49
Muamicus Muamicus ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard clearen im 21 Jhr.

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;
    }
    
htmlbody {
        
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 {
    
bordernone;
    
backgroundnone;
    
filter:alpha(opacity=70);
    -
moz-opacity0.7;
    
khtml-opacity0.7;
    
opacity0.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;
            
margin0 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">
        <
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>
        <
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>
        <
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>
        <
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
Mit Zitat antworten
Sponsored Links