Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Sonjiru" data-source="post: 1976222" data-attributes="member: 345966">AW: Navigation mit einer Trennlinie zwischen MenüpunktenDer Code der dahinter steckt : CSS : [CODE]/* CSS Document */&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; * {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0;&nbsp; &nbsp; &nbsp; &nbsp; padding:0;&nbsp;&nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * html #wrapper {&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp;&nbsp; html, body {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; font-size: 100%;&nbsp; &nbsp; font-family: Verdana;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; background-image:url(../grafiken/background.png);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #wrapper {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; min-height: 100%;&nbsp; &nbsp; &nbsp; background-image:url(../grafiken/content1.png);&nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; border: 4px solid #ffffff;&nbsp; &nbsp; &nbsp; border-radius:7px;&nbsp; &nbsp; &nbsp; box-shadow:3px 3px 3px, #000000, -3px 3px 3px, #000000, 3px -3px 3px #000000, -3px -3px 3px #000000;&nbsp; &nbsp; &nbsp; -webkit-box-shadow: 3px 3px 3px #000000, -3px 3px 3px #000000, 3px -3px 3px #000000, -3px -3px 3px #000000; /* Google Chrome */&nbsp; &nbsp;&nbsp; -moz-box-shadow: 3px 3px 3px #000000, -3px 3px 3px #000000, 3px -3px 3px #000000, -3px -3px 3px #000000; /* Mozilla Firefox */&nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #navigation {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(../grafiken/navi1.png);&nbsp; &nbsp; &nbsp; height: 31px;&nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; border-bottom:4px solid #ffffff; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #navigation ul&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #navigation li {&nbsp; &nbsp; display: inline;&nbsp; &nbsp; background-image: url(../grafiken/trennlinie.png);&nbsp; &nbsp; background-position: right;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; padding-bottom:13px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; a.navilink&nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; &nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; padding: 5px 15px 7px 15px;&nbsp; &nbsp; }&nbsp; &nbsp; a.navilink:hover&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; color: #00FA9A;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; a:visited {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; a:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#00FA9A;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #mainpage {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image:url(../grafiken/content1.png);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #footer{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; line-height: 1.5em;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; border-top: 4px solid #ffffff;&nbsp; &nbsp; &nbsp; background-image:url(../grafiken/footer1.png);&nbsp; &nbsp; &nbsp; color:red;&nbsp; &nbsp; }[/CODE]HTML [CODE]&nbsp; &nbsp; &lt;!DOCTYPE html&gt;&nbsp; &nbsp; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;&gt;&nbsp; &nbsp; &lt;title&gt;Designbase&lt;/title&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/screen.css&quot;&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;navigation&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a class=&quot;navilink&quot; href=&quot;index.php&quot;&gt;Startseite&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a class=&quot;navilink&quot; href=&quot;produkte.php&quot;&gt;Produkte&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a class=&quot;navilink&quot; href=&quot;kontakt.php&quot;&gt;Kontakt&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a class=&quot;navilink&quot; href=&quot;impressum.php&quot;&gt;Impressum&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;mainpage&quot;&gt;Inhalt&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;table&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&amp;copy&lt;/td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&nbsp; &nbsp; &lt;/html&gt;[/CODE]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 gehenEdit : Bei #navigation ul : [CODE] padding: 5px 5px 5px 5px;[/CODE] hinzugefügt und zack es passiert der effekt denn ich wollte (naja fast) jetzt muss ich die Trennstriche halt wieder richtige positionieren <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" />, 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.</blockquote>

[QUOTE="Sonjiru, post: 1976222, member: 345966"] [b]AW: Navigation mit einer Trennlinie zwischen Menüpunkten[/b] 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; } [/CODE] 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> [/CODE] 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;[/CODE] 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. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?