mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:06 Benutzername: Passwort: Auto-Login

Thema: CSS: Navigation vom 19.12.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Navigation
Seite: 1, 2  Weiter
Autor Nachricht
Carl Carlson
Threadersteller

Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 19.12.2009 23:03
Titel

CSS: Navigation

Antworten mit Zitat Zum Seitenanfang

Hi,

ich habe letztens ein bisschen in einem Buch über Dreamweaver gelesen und mir danach zum wiederholten Male vorgenommen, eine eigene Webseite zu basteln. Das Ganze soll später eine ähnliche Navigation haben, wie diese hier:




Jetzt habe ich das Problem, dass ich entweder die Positionierung der Beschriftung oder die Höhe der Navigation nicht hinbekomme.

Aktuell sieht der Quelltext zur Navigation so aus:

Code:
HTML:

      <div id="navigation">
         <ul>
            <li><a href="#">Foto</a></li>
            <li><a href="#">Pixel</a></li>
            <li><a href="#">Vector</a></li>
            <li><a href="#">Flash</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>

CSS:

#navigation {
   background-color: #191919;
   height: 50px;
}
#navigation a:hover{
   color:#191919;
}
#navigation ul{

}
#navigation ul li{
   float: left;
   list-style-type: none;
}
#navigation ul li a{
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: center;
   color:#FFF;
   text-decoration: none;
   width: 100px;
   float: left;
   background-color: #ff0000;
}


Das führt zu folgendem Ergebnis:




Wenn ich statt position und padding einen festen height-Wert festlege, sieht das Ganze so aus:




Wie bekomme ich es hin, das die Navigation später aussieht, wie bei meinem Beispiel und warum sind die Buttons nicht ganz links, sondern eingerückt (Dreamweaver zeigt an, dass der eigentliche navigations-container genauso breit ist, wie der weiße container im Bild)?

Ich hoffe ich hab mich verständlich genug ausgedrückt und mir kann jemand helfen.
  View user's profile Private Nachricht senden
Cihan

Dabei seit: 10.06.2008
Ort: Hamburg
Alter: 38
Geschlecht: Männlich
Verfasst So 20.12.2009 01:12
Titel

Antworten mit Zitat Zum Seitenanfang

Lass padding weg, nimm height und line-height.

-> height: 30px
-> line-height: 30px
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Carl Carlson
Threadersteller

Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 20.12.2009 10:26
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, das erste Problem wäre damit gelöst. Nur wieso wird die Beschriftung zentriert und zieht die Buttons mit in die Mitte:




Zuletzt bearbeitet von Carl Carlson am So 20.12.2009 10:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst So 20.12.2009 12:10
Titel

Antworten mit Zitat Zum Seitenanfang

Du hast keine Breite angegeben ^^

#navigation {width:100%;}

Oder in Pixeln, kA wie sich dein Elternelement verhält ^^
  View user's profile Private Nachricht senden
Cihan

Dabei seit: 10.06.2008
Ort: Hamburg
Alter: 38
Geschlecht: Männlich
Verfasst So 20.12.2009 12:23
Titel

Antworten mit Zitat Zum Seitenanfang

Lade mal n Livebeispiel hoch. Dann mach ichs dir heute Abend. Ich wuerde da ganz anders rangehen.
  View user's profile Private Nachricht senden
Carl Carlson
Threadersteller

Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 20.12.2009 13:17
Titel

Antworten mit Zitat Zum Seitenanfang

"#navigation {width:100%;}" scheint nicht zu klappen.

Ich habe grade gesehen, dass ich das gleiche Problem schoneinmal bei einer ähnlichen Navigation hatte.
Damals hab ich das irgenwie mit "#menu ul {position: relative; right: 40;}" gelöst, aber auch das klappt bei meiner jetzigen Seite nicht mehr.

Der komplette Quelltext für die Navigation:

vector.html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Titel</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div id="site_container">
      <div id="navigation">
         <ul>
            <li><a href="#">Foto</a></li>
            <li><a href="#">Pixel</a></li>
            <li><a href="#">Vector</a></li>
            <li><a href="#">Flash</a></li>
            <li><a href="#">Info</a></li>
            <!--<li><a href="#">Contact</a></li>-->
         </ul>
      </div>
      <div id="content">
         Inhalt
      </div>
   </div>
</body>
</html>


style.css:
Code:
@charset "utf-8";
body {
   background-color: #191919;
   font-family: Verdana, Geneva, sans-serif;
   font-style: normal;
   font-weight: normal;
   color: #191919;
   margin: 0;
}
a {
   text-decoration: none;
}
#site_container {
   background-color: #FFF;
   width: 700px;
   margin-right: auto;
   margin-left: auto;
}
#navigation {
   background-color: #191919;
   height: 50px;
}
#navigation a:hover{
   color:#191919;
}
#navigation ul{
}
#navigation ul li{
   float: left;
   list-style-type: none;
}
#navigation ul li a{
   line-height: 50px;
   height: 50px;
   text-align: center;
   color:#FFF;
   width: 100px;
   float: left;
   background-color: #ff0000;
}
#content {
   width: 500px;
   position: relative;
   padding: 100px;
}


Zuletzt bearbeitet von Carl Carlson am So 20.12.2009 13:17, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst So 20.12.2009 18:37
Titel

Antworten mit Zitat Zum Seitenanfang

Carl Carlson hat geschrieben:
"#navigation {width:100%;}" scheint nicht zu klappen.

Doch, aber Du kannst nicht erwarten, dass 5 Links mit je 100px Breite ein Element mit 700px Breite ausfüllen - Deine Links erreichen zusammen natürlich nur 500px.

Grundregel: Nie height für Elemente, die Text enthalten, und schon gar nicht in px! (height allenfalls z.B. bei einem div mit overflow: auto o.ä. ) Gerade bei Navigationen ist das ein ein häufig gemachter (Anfänger-)Fehler. Wirf height raus und erzeuge die Höhe durch vert. padding.

Auch vert. Zentrierung per line-height ist keine geeignete Methode, das zeigt sich bei Zeilenumbruch.

Außerdem: http://www.mediengestalter.info/forum/4/hp-hat-abstand-zum-browserrand-136853-1.html
  View user's profile Private Nachricht senden
Carl Carlson
Threadersteller

Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 20.12.2009 19:14
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen, vielen Dank für den Tipp mit dem Universalselektor. Damit wurde sowohl das Problem mit dem Abstand zum Browserrand ("margin: 0" im body hat nur beim ie6, nicht in FF geklappt) als auch das Problem mit den eingerückten Button gelöst. Die Buttons waren anscheinend doch nicht richtig zentriert, sondern hatten nur zufällig genau den gleichen Seitenabstand.

Zum "height":
Warum soll ich das in der Navigation nicht benutzen?
Unter "#navigation ul li a" fällt das durch das "line-height" sowieso weg und das "line-height" kann ich doch bei den Buttons benutzen, da es hier keinen Zeilenumbruch gibt, oder?
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] DIV Navigation
Navigation - IE6 + 7
[PHP, XML] Navigation...
Navigation PHP
navigation
Navigation mit PHP
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.