XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   css navigationsleiste mit ul (http://xhtmlforum.de/showthread.php?t=64567)

newbie88 06.05.2011 19:52

css navigationsleiste mit ul
 
Hallo, ich mal wieder,

ich bin dabei eine neue seite zu erstellen nur weiß ich nicht wie man das ul element ganz nach links ausrichten kann.

zudem möchte ich das das hover und der dazu gehörige link über die ganze navigationsleiste geht und nicht nur wenn ich den text/link anfahre.

Habe schon gesucht aber noch nichts passendes gefunden.

Wäre nett wenn ihr mir nen kleinen denkanstoß gebt oder mich auf fehler hinweißt.

PHP-Code:

tml>
<
head>
        <
style type="text/css">
        <!--
        
        
        
body {
                
background-color:white;
        }
        
        
#site {
                
margin0 auto;
                
max-width960px;
        }
        

        
        
#header{
        
                
background-color#063661;
                
min-height 120px;
                
width 940px;
                
margin auto;
                
padding 10px 10px 5px 20px;
                            
        }
        
        
#table {
        
                
width 960px;
                
border-left2px solid #063661;
                
border-right2px solid #063661;
                
padding3px;
        }
        
        
#nav {
                
floatleft;
                
height200px;
                
line-height1.5;
                
padding-left4px;
                
padding-right3px;
                
width150px;
            }
            
        
#main {
                    
border-left1px solid #063661;
                    
font-familyVerdana,Arial,sans-serif;
                    
font-size12px;
                    
min-height450px;
                    
line-height15px;
                    
margin-left159px;
                    
margin-right0;
                    
padding-right0;
                    
widthauto;
        }
            
            
        
ul {
                list-
style-typenone;
                
margin-left0;
                
text-indent: -25px;
        }
        

        
        
li {
                
padding-top7.5px;
                
padding-bottom7.5px;


        }
        
        
        
li a{
                
font-family Arial;
                
font-size 16px;
                
font-weight bold;
                
color #063661;
                
text-decorationnone;

        }
        
        
ul li a:hover {
            
display:block;
            
background#E3E0FF;
            
text-decorationunderline;
        }
        
        -->
        </
style>
</
head>

</
body>



<
div id "site">
<
div id="header">
<
img src="images/human2.GIF" alt="Human Color Logo">
</
div>

<
div id="table">


<
div id="nav">

<
ul>
    <
li><a href ="test.html">Home</a></li>
    
    <
li><a href ="test.html">Service</a></li>
    
    <
li><a href ="test.html">Farben</a></li>
    
    <
li><a href ="test.html">Ziele</a></li>
    
    <
li><a href ="test.html">Projekte</a></li>
    
    <
li><a href ="test.html">Wir üer uns</a></li>
    
    <
li><a href ="test.html">E-Mail Kontakt</a></li>
    
    <
li><a href ="test.html">Impressum</a></li>
    
    

</
div>

<
div id="main">

</
div>

</
div>


</
div>


</
body>

</
html

Schon mal danke im vorraus :)

andir 06.05.2011 22:33

Die meisten HTML-Elemente werden von den Browsern mit Default-Werten für die Positionierung und versehen. Das können paddings und margins sein.
Probiers mal aus, ein <p> erzeugt z.B. automatische Abstände.
Du könntest ul margin: 0 und padding: 0 als Startwert mitgeben und dann dich langsam rantasten. Wenn Du die Listenbullets nicht haben willst ( was eine weitere Einrückung erzeugt) setze die li's oder das ul auf list-style-type: none. Mehr Info findest Du bei css4you.de

Zweite Frage:

Du mußt li a bereits display: block und with: 100% mitgeben.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:27 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023