zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ul richtig zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2010, 21:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard ul richtig zentrieren

So, Part II bei meinem Anliegen:

Habe unten:

Link

mehrere ul's die ich negativ nach oben ziehe. Sonst würde das clearing nicht funktionieren bzw habe keine Lösung gefunden die ul's anders zu positionieren.

Jetzt wollte ich dass sie bündig mit der Navi abschließen. Dh ich würde sie per margin: 0 auto; zentrieren und sie negativ nach links ziehen.

Wie Ihr schon seht wird das nicht funktionieren. Hätte jemand eine Idee wie man das so realisieren kann ?

Wenn ich es im wrapper positionieren würde wäre das sicher kein Problem. Nur bekomme ich die uls da nicht über die Bildleiste geschoben.

Hoffe Ihr versteht mich ein wenig. Weiß aber nicht wie ichs anders erklären 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;         
    }
    
#head    {
            
background-image:url(img/head.jpg);
            
background-repeat:no-repeat;
            
width:1000px;
            
height:177px;
            
margin:0 auto;
    }
    
#navi    {
            
float:left;
            
clearboth;
            
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;    
                
padding-bottom:180px;                
    }
    
#cont_wrap:after {
        
content:".";
        
display:block;
        
clear:both;
        
font-size:0;
        
overflow:hidden;
        
height:.1px;
        
visibility:hidden;
    }
    
#cont_wrap h1    {
                
color:#951b1b;
                
margin:30px 0;
    }
    
#cont_wrap p    {
                
text-align:left;
                
margin:0 0 0 250px;
                
width:600px;
    }
    
#rahmen    {
            
margin:0px 0 0 20px;
    }
    
#bot_nav    {text-align:center;
            
width:100%;
            
height:130px;
            
margin:-135px 0 0 0;
    }
    
#bot_nav    #ul1        {
                        
float:left;
                        
margin:0 0 0 30px;
                        
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, 22:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Da Du "cont_wrap" bereits auf 1000 Pixel breite bringst, kannst Du das mit "bot_nav" auch machen.

Code:
#bot_nav { margin: -135px auto 0;width: 1000px; }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2010, 22:01
Benutzer
neuer user
 
Registriert seit: 08.10.2009
Ort: Mainz
Beiträge: 45
garfield1711 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

wollte gerade ein ähnliches Problem posten.
Ich machs mal hier mit rein, da wir bestimmt die selbe Lösung suchen.
Ich habe die Grafik im Header zentriert aber die Navigation verschiebt sich nach links.
Hier mal die URL.: Mainzer Freischützen-Garde e.V.
Die Navi sollte im Fenster auch zentriert sein.
Bekomme es einfach nicht hin.

Gruß
Garfield
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2010, 22:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

@garfield1711: bei dir ist es ein anderes Problem. Du begehst den Fehler deine Seite in großen Teilen absolut auszurichten. Dadurch verschiebt sich bei mir z.B. das Logo nach rechts, außerhalb vom Viewport/Browserfenster während die Navigation schön zentriert ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2010, 22:07
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Pefekt !!

Danke threadi

Dachte es müsste mit width:100%; auch gehen. Nur hat er es in den 100% nicht zentriert. ?!?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2010, 22:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Logisch. 100% heißt ja auch 100%. Was willst Du da noch zentrieren? Die Inhalte? Geht nicht, sind ja Blockelemente die nebeneinander gefloatet werden. Also musst Du statt 100% eine feste andere Größe nehmen.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2010, 22:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

@marsupilami nun ja also eigentlich sollen die uls über den gesamten viewport zentriert werden. Bei meiner Auflösung würde es so ausschauen als wären sie darunter.

hatte mich da falsch ausgedrückt. So Link sollte es bei euch auch zentriert sein oder?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2010, 22:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Also die ul-Leistes oll/sollte quasi über den gesamten Viewport zentriert werden.
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2010, 22:35
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von nils_1309 Beitrag anzeigen
hatte mich da falsch ausgedrückt.
mal wieder...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.12.2010, 22:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Sorry, ist halt menschlich.
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
margin:0 auto; weiterer div-bereich zentrieren seeadler CSS 7 14.07.2008 22:00
Zentrieren bei position:fixed Alessia CSS 3 26.02.2008 15:33
Elemente mit inline-block, -moz-inline-box zentrieren funktioniert mit FF nicht klaros CSS 3 12.02.2007 10:44
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02
Container horiz. + vert. zentrieren, 2 eingeschlossene ab... Jessix CSS 4 10.07.2004 17:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:41 Uhr.