zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden clearen im 21 Jhr.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2010, 19:49
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
  #2 (permalink)  
Alt 13.12.2010, 19:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
Der Content ja, aber die Navi nicht ?!? weiß jemand woran das liegen kann?
Daran, dass du den nötigen Platz für den neg. verschobenen Fußbereich nur im Content-Bereich vorsiehst.
Mit dem Clear hat das nichts zu tun.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2010, 20:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Habe der navi jetzt padding-bottom gegeben.

testcase

Dann schauts so aus. Oder meintest du was anderes?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2010, 20:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Nils, überleg doch erstmal selbst mal ein bisschen, bevor du gleich wieder postest.
Wo liegt dein grünes Hintergrundbild? Natürlich überlappen die anderen Elemente diesen Bereich, wenn sie eine Hintergrundfarbe haben.
Ein sinnvoller Adressat für den nötigen unteren Abstand ist #cont_wrap. Dafür muss aber der die Floats einschließen.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2010, 20:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Ja, hast recht.

habe dem content_wrap padding-bottom gegeben.

Musste die untere Bildleiste außerhalb positionieren sonst hat das mit den uls nicht geklappt. Da der wrapper an sich die Bildleiste enthält.

Habe der navi jetzt zusätzlich clear:bith gegeben. Leider auch ohne Erfolg

oder wie müsste ich die floats mit einschließen?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2010, 20:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
oder wie müsste ich die floats mit einschließen?
Ach komm jetzt.
Wie schließt #wrapper die Floats ein?
Wenn du nicht verstehst, wie das Easyclearing funktioniert, dann verwende es nicht. Ein hardkodiertes Clear in Form einer hr ist nicht schlechter.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2010, 20:27
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Dadurch:

PHP-Code:
#wrapper:after {
        
content:".";
        
display:block;
        
clear:both;
        
font-size:0;
        
overflow:hidden;
        
height:.1px;
        
visibility:hidden;
    } 
?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2010, 20:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Bravo.
Und? Wie könntest du es jetzt wohl schaffen, dass eben nicht erst #wrapper, sondern #cont_wrap die Floats einschließt?
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2010, 20:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Ja, habs.

Aber warum muss cont_wrap das clearing enthalten und nicht der wrapper?
Denn der Wrapper schließt doch auch alles mit ein.

Geändert von Muamicus (13.12.2010 um 20:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.12.2010, 20:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Weil sonst das Padding dort nichts bringt. Floats hängen raus!
Irgendwie solltest du deine Bücher nochmal genau lesen. Es sind wirklich immer wieder die Grundlagen, an denen du scheiterst.

Wenn du nicht weißt, welche Dimensionen deine Elemente haben, dann gib ihnen Hintergrundfarben. Dann siehst du etwas von dem, was du tust.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anfängerfrage zum Thema clearen im ie6 blond CSS 0 13.04.2010 06:47
Clearen von child elementen majorbenks CSS 1 24.02.2010 18:08
image im <p> clearen Smartsoul CSS 11 16.01.2008 21:29
Linksbündiges Image clearen ohne clear? akb CSS 1 09.04.2007 10:44
richtig clearen - ich bin zu doof Tagträumer CSS 2 19.01.2007 10:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:46 Uhr.