Navigation mit einer Trennlinie zwischen Menüpunkten

hedoo · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Hier ist erklärt, wie du den Footer nach unten bekommst:
http://www.ohne-css.gehts-gar.net/0044.php
Gruß
hedoo

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Danke

Dann bleibt allerdings immernoch das Problem, das sich der content bereich nur nach den Zeilen richtet, jedoch soll der content bereich dann den ganzen restlichen bereich bis zum Footer "auffüllen"

hedoo · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Verstehe dein Problem nicht ganz. Wenn der Footer ganz unten ist, füllt der Content doch den restlichen Bereich.

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Ne, also bei mir zumindest nicht.

Ich verstehe auch nicht ganz warum

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Um das ganze mal zu veranschaulichen :

hedoo · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Also - ohne Code kann man schlecht beurteilen wo der Fehler liegt.
Baue das Beispiel in dem Link doch einmal nach und erweitere es um die Dinge die dein Layout noch benötigt.

Gruß
hedoo

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

HTML Code

Code:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Designbase</title>
    <link rel="stylesheet" type="text/css" href="css/screen.css">
    </head>  
    <body>
    <div id="wrapper">
        	<div id="navigation">
            	<ul>
                	<li><a class="navilink" href="index.php">Startseite</a></li>
                     <li><a class="navilink" href="produkte.php">Produkte</a></li>
                    <li><a class="navilink" href="kontakt.php">Kontakt</a></li>
                    <li><a class="navilink" href="impressum.php">Impressum</a></li>
               </ul>
            </div>
        <div id="mainpage">Test</div>
        <div id="footer">
          <table>
            <tr>
              <td>&copy; <a href="/Homepage">2012</td>
            </tr>
          </table>
        </div>
     </div>
    </body>
    </html>

CSS

Code:

/* CSS Document */
   
   
   * {
   
        margin:0;
        padding:0;
   }
   
        * html #wrapper {
        height: 100%;
      }
   
   html, body {
    height: 100%;
    font-size: 100%;
    font-family: Verdana;
    }
    
    
    #wrapper {
      position: relative;
      min-height: 100%;
      background-image:url(../grafiken/background.png);
      width: 100%;
      margin: 0 auto;
     }
     
    
    
    #navigation {
      
      background-image: url(../grafiken/navi1.png);
      border: 4px solid #ffffff;
      height: 31px;
      -webkit-box-shadow: 10px 10px 5px #000000;
      -moz-box-shadow: 10px 10px 5px #000000;
      box-shadow: 10px 10px 5px #000000;
      
    }
    
    #navigation ul
    {   
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    #navigation li {
    display: inline;
    background-image: url(../grafiken/trennlinie.png);
    background-position: right;
    background-repeat: no-repeat;
    padding-top: 5px;
    padding-bottom: 5px;
    }
    
    a.navilink
    { 
        font-size: 16px;
        color: #ffffff;
        margin-left: 0;
        padding: 5px 15px 7px 15px;
    }
    a.navilink:hover
    {
        color: #00FA9A;
    }
    
        
    #mainpage {
        
        background-image:url(../grafiken/content1.png);
        border: 4px solid #ffffff;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 5px 5px 3px #333333;
  			-moz-box-shadow: 5px 5px 3px #333333;
  				box-shadow: 5px 5px 3px #333333;
  				-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=3, offy=3)";
  				filter:progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=3, offy=3)";

			}
   
    
    #footer{
        
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 1.5em;
      text-align: center;
      background-image:url(../grafiken/footer1.png);
      border: 4px solid #ffffff;
      -webkit-box-shadow: 10px 10px 5px #000000;
      -moz-box-shadow: 10px 10px 5px #000000;
      box-shadow: 10px 10px 5px #000000;
      color:red;
    }

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

gut, in diesem falle brauchst du nicht nur ein padding(innenabstände) sondern auch ein margin-top(außenabstände): von so 3,4px, musste probieren.

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Hab das ganze etwas anderster gelöst :

Der Wrapper hat die gleiche Hintergrundgrafik wie Mainpage, dafür jedoch nur eine Breite von 50% (damit man die hintergrundgrafik auch noch sieht).

Funktionierte auch

Myhar · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Sonjiru schrieb:
Edit : Ich habe weder mit border-image noch mit Firebug gearbeitet.

Heißt das, du hast noch nie mit Firebug (oder vergleichbarem gearbeitet)? Wenn ja, dann installiere dir schleunigst dieses Addon für Firefox und spiele damit herum. Das ist unerlässlich

Gut, dass du das Problem mit dem Footer selber lösen konntest. Aber wieso verwendest du Tabellen für deinen Footer?

Code:

        <div id="footer">
              <p>&copy; <a href="/Homepage">2012</p>
        </div>

Ist semantisch korrekt und noch dazu viel weniger Code.

Sonjiru · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Ne habe ich noch nie

Hab mir das Addon aber gleich gestern Installiert

Weil ich nach 2012 noch so ne Trennlinie einfügen wollte.

Edit :

Ich kann die Grafik (Sprich Trennstriche) ja mittels Padding-Top bzw Padding-Bottom positionieren. (damit werden auch nicht die Links verschoben)

Aber mit welchem Befehl kann ich die Links in der navigation zentrieren?

Bei mir sieht es so aus als ob die so in der Luft hängen sieht blöd aus :/

Myhar · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Sonjiru · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Text-align Center habe ich schon probiert funktionierte nicht

Edit : #navigation li {
display: inline;
background-image: url(../grafiken/trennlinie.png);
background-position: right;
background-repeat: no-repeat;
padding-bottom:11px;
text-align:center;
}

Das zentriert das ganze zwar im Div - Container ist aber nicht ganz das was ich wolte. Ich möchte sozusagen das ganze schön linksbündig haben. Allerdings die Links weiter unten platziert haben (Nennt man das Horizontal zentriern glaube schon

)

Myhar · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Es muss funktionieren, außer der Stil wird wieder überschrieben... Ich kann dir nur wiederholt empfehlen, setze dich mit Firebug auseinander. Damit kannst du nichts kaputt machen. Ein reload und alles ist so wie vorher.

Code:

HTML:
<ul>
    <li>TEST</li>
</ul>
CSS:
li{width:300px;text-align:center;background-color:green}

Funktioniert anstandslos (teste mal auf jsfiddle.net nach)
Also nimm Firebug in die Hand und deaktiviere der Reihe nach alle Stile, bis du den gewünschten Texteffekt erhältsts. Dann findest du heraus, warum es bei dir nicht klappt.
Wenn du keinerlei Interesse daran hast, dann wirst du uns wohl einen funktionierenden Link zur Verfügung stellen müssen... Weil mehr als text-align:center kann man dir nicht sagen.

Sonjiru · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Die Seite ist noch gar nicht online

Ein Bild tut es vllt auch? Falls ja :

Das ist die derzeit erstellte Seite und ich glaube man sieht sehr gut was ich meinte. (Mit text align : center), ich möchte die Links einfach weiter nach unten gesetzt haben. Weil so sieht das irgendwie komisch aus mMn.

Aber natürlich habe ich interesse daran, will mich ja in diesem Bereich auch weiterbilden, sonst würde es ja gar keinen Sinn machen sich mit Webdesign auch auseinanderzusetzen

. Wie blend ich denn bei Firebug die einzelnen Stile aus? (Klingt vllt jetzt blöd

)

Myhar · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Ein Bild ist nicht hilfreich. Das ist so, wie wenn du einem Automechaniker sagst: Hier ist ein Bild von meinem Auto, warum fährt es nicht?
Man weiß nicht, wie die Seite "unter der Haube" aussieht (also der Code).

Ohne Code kann ich dir nur sagen, du musst text-align:center anwenden. Du hast doch bestimmt den Link, den ich gepostet habe, gelesen?
Ein: "xya hat auch nicht funktioniert" ist ja nicht hilfreich (wie du jetzt hoffentlich weißt)
Es macht bei CSS einen riesen Unterschied, auf welches Element du deine Eigenschaften anwendest. Stichwort vererbung, sind das block- oder inline Elemente, etc.
Das einzige, was ich dir noch sagen kann ist, dass du zusätzlich zu text-align:center noch padding/margin brauchst um dein Ziel zu erreichen.

Und bezüglich Firebug: Auf der Homepage werden die einzelnen Funktionen gut erklärt, es gibt sogar ein Einführungsvideo.
Trotzdem: Untersuch ein Element, dann hast du auf der rechten Seite den Style-Tab. Dort kannst du die Stile ausschalten.

Ich hoffe du bist mir nicht böse, aber du wirkst auf mich wie ein ungeduldiges Kind, welches keinerlei Eigeninitiative zeigt. Probiere selber herum und hab keine Angst, Firebug auch zu benutzen. Damit kannst du, wie schon geschrieben, gar nichts kaputt machen (weil nichts gespeichert wird)

Sonjiru · 31.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Der Code der dahinter steckt :

CSS :

Code:

/* CSS Document */
   
   
   * {
   
        margin:0;
        padding:0;
   }
   
        * html #wrapper {
        height: 100%;
      }
   
   html, body {
    height: 100%;
    font-size: 100%;
    font-family: Verdana;
    margin:0;
    padding:0;
    background-image:url(../grafiken/background.png);
    }
    
    
    #wrapper {
      position: relative;
      min-height: 100%;
      background-image:url(../grafiken/content1.png);
      width: 50%;
      margin: 0 auto;
      border: 4px solid #ffffff;
      border-radius:7px;
      box-shadow:3px 3px 3px, #000000, -3px 3px 3px, #000000, 3px -3px 3px #000000, -3px -3px 3px #000000;
      -webkit-box-shadow: 3px 3px 3px #000000, -3px 3px 3px #000000, 3px -3px 3px #000000, -3px -3px 3px #000000; /* Google Chrome */
     -moz-box-shadow: 3px 3px 3px #000000, -3px 3px 3px #000000, 3px -3px 3px #000000, -3px -3px 3px #000000; /* Mozilla Firefox */
     }
     
    
    
    #navigation {
      
      background-image: url(../grafiken/navi1.png);
      height: 31px;
      width:100%;
      border-bottom:4px solid #ffffff; 
      
    }
    
    #navigation ul
    {   
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
    }
    
    #navigation li {
    display: inline;
    background-image: url(../grafiken/trennlinie.png);
    background-position: right;
    background-repeat: no-repeat;
    padding-bottom:13px;
    }
    
    a.navilink
    { 
        font-size: 16px;
        color: #ffffff;
        padding: 5px 15px 7px 15px;
    }
    a.navilink:hover
    {
        color: #00FA9A;
    }
    
    a:visited {
    
      color:white;
    
    }
    
    a:hover {
    
      color:#00FA9A;
      
    }
    
        
    #mainpage {
        
        background-image:url(../grafiken/content1.png);
			}
   
    
    #footer{
        
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 1.5em;
      text-align: center;
      border-top: 4px solid #ffffff;
      background-image:url(../grafiken/footer1.png);
      color:red;
    }

HTML

Code:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Designbase</title>
    <link rel="stylesheet" type="text/css" href="css/screen.css">
    </head>  
    <body>
    <div id="wrapper">
        	<div id="navigation">
            	<ul>
                	<li><a class="navilink" href="index.php">Startseite</a></li>
                     <li><a class="navilink" href="produkte.php">Produkte</a></li>
                    <li><a class="navilink" href="kontakt.php">Kontakt</a></li>
                    <li><a class="navilink" href="impressum.php">Impressum</a></li>
               </ul>
            </div>
        <div id="mainpage">Inhalt</div>
        <div id="footer">
          <table>
            <tr>
              <td>&copy</td>
            </tr>
          </table>
        </div>
     </div>
    </body>
    </html>

Gut Firebug verwende ich gerade (sehr praktisch wenn man sozusagen Live sieht was sich verändert, so hab ich schonmal rausgefunden das ich bei #navigation : Weder padding noch margin einfügen muss (margin würde das ganze komplett aus dem Design rausreißen).

Ich denke bzw versuche gerade das ganze bei navigation li (da sind ja die einzelnen Listenpunkte also muss es eig darauf angewandt werden.) falls es da nicht funktioniert probier ich es in der .navilink klasse. Irgendwo muss es ja gehen

Edit :

Bei #navigation ul :

Code:

 padding: 5px 5px 5px 5px;

hinzugefügt und zack es passiert der effekt denn ich wollte (naja fast) jetzt muss ich die Trennstriche halt wieder richtige positionieren

, aber das sollte ich auch wieder hinkriegen. Oder gibts ne einfache Möglichkeit das sich die grafik an die Höhe des DIV-Containers anpasst?

Edit die zweite :

Mittels padding-top und padding-bottom (und damit verbundenen Pixeln angaben) die Trennlinien Grafik so ausgerichtet das sie die gesamte Höhe einnimmt. Damit bleibt nur eine Frage noch, gibt es eine geschicktere Möglichkeit die Grafik der höhe anzupassen als mit Pixeln angaben? Weil bei veränderung des Browserfensters geht die Grafik dann über die Navigationshöhe hinaus.