zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css navigationsleiste mit ul

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.05.2011, 18:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.04.2011
Ort: Bad Salzuflen
Beiträge: 28
newbie88 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.05.2011, 21:33
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.037
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
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
Dynamische Navigationsleiste horizontal, vertikal Faven CSS 6 28.06.2010 15:06
2 CSS Files -> 1 CSS File Habi CSS 7 17.02.2010 15:25
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


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