Auf Thema antworten 2026

Beitrag

<blockquote data-quote="blizzart88" data-source="post: 1652610">Guten morgen zusammen,ich habe mal eine Frage zu einer horizontalen Navigation:kann man die Breite der einzelnen Navigationspunkt individuell auf die&nbsp; Breite der Links ändern. Bei meinem Beispiel sind die Navigationspunkte&nbsp; alle 120px breit. Einzelne Menüpunkte, bzw. die Menüpunkte hier brauchen&nbsp; eigentlich teilweise eine geringere Breite.Kann ich diese einzeln angeben und wenn ja, wie?Der CSS-Code[CODE]body{background-color:#004f2f}/* LOGO-Container */#top{position:relative;&nbsp; &nbsp;&nbsp; width:1000px; height:200px;&nbsp; &nbsp;&nbsp; margin: auto;&nbsp; &nbsp;&nbsp; bottom-margin: 0px;&nbsp; &nbsp;&nbsp; border: 1px solid blue;&nbsp; &nbsp;&nbsp; background-color:#545454;&nbsp; &nbsp;&nbsp; background-image:url(&#039;grafik/hor-navi-back.jpg&#039;);&nbsp; &nbsp;&nbsp; background-repeat:no-repeat;&nbsp; &nbsp;&nbsp; background-position: top left;}/* Navigation unterhalb des Logos */#topnavi{position:relative;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; width:820px; height:20px;&nbsp; &nbsp;&nbsp; margin: 0px auto;&nbsp; &nbsp;&nbsp; border-top: none;&nbsp; &nbsp;&nbsp; border-bottom: none;&nbsp; &nbsp;&nbsp; border-left: 1px solid blue;&nbsp; &nbsp;&nbsp; border-right: 1px solid blue;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:white;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image:url(&#039;grafik/hor-navi-back.jpg&#039;);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-repeat:repeat-x;&nbsp; &nbsp;&nbsp; background-position: top left;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; overflow:hidden;}/* Container für Seiteninhalt */#inhalt-container{position:relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; width:820px; height:900px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; border: 1px solid blue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color:#545454;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image:url(&#039;grafik/hor-navi-back.jpg&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-repeat:no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-position: top left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-attachment:fixed;}/* Navigation oben durch Listen */#navi1 li {float: left;} #navi1{margin: 0;&nbsp; &nbsp; &nbsp;&nbsp; padding: 0;&nbsp; &nbsp; &nbsp;&nbsp; list-style-type: none;&nbsp; &nbsp; &nbsp;&nbsp; background: #6f79dc;&nbsp; &nbsp; &nbsp;&nbsp; background-image: url(grafik/back001.jpg);&nbsp; &nbsp; &nbsp;&nbsp; width: 100%;&nbsp; &nbsp; &nbsp;&nbsp; overflow: auto}#navi1 a{font-family: Arial;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; font-weight: bold;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; width: 120px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image: url(grafik/back001.jpg);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-color: white;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; line-height: 20px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; border-bottom: 1px solid #fff;} #navi1 a:visited{color: #dfdfdf;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image: url(grafik/back001.jpg)}#navi1 a:hover{background-color: #000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; background-image: url(grafik/back002.jpg)} /* Bottom für Footer (Impressum, AGB, etc...) */#bottom{position:relative;&nbsp; &nbsp; &nbsp; &nbsp; width:820px; height:120px;&nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; margin-bottom: 20px&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; border-bottom: 1px solid blue;&nbsp; &nbsp; border-left: 1px solid blue;&nbsp; &nbsp; border-right: 1px solid blue;&nbsp; &nbsp; &nbsp; &nbsp; background-color:white;&nbsp; &nbsp; &nbsp; &nbsp; background-image:url(&#039;grafik/hor-navi-back.jpg&#039;);&nbsp; &nbsp; &nbsp; &nbsp; background-repeat:repeat-x;&nbsp; &nbsp; background-position: top left;&nbsp; &nbsp; &nbsp; &nbsp; overflow:hidden;}[/CODE]Der Seitenquelltext:[CODE]&lt;html&gt;&lt;head&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox2.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;top&quot;&gt;&lt;/div&gt;&lt;div id=&quot;topnavi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul id=&quot;navi1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;/ul&gt; &lt;/div&gt;&lt;div id=&quot;inhalt-container&quot;&gt;&lt;/div&gt;&lt;div id=&quot;bottom&quot;&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]</blockquote>

[QUOTE="blizzart88, post: 1652610"] Guten morgen zusammen, ich habe mal eine Frage zu einer horizontalen Navigation: kann man die Breite der einzelnen Navigationspunkt individuell auf die Breite der Links ändern. Bei meinem Beispiel sind die Navigationspunkte alle 120px breit. Einzelne Menüpunkte, bzw. die Menüpunkte hier brauchen eigentlich teilweise eine geringere Breite. Kann ich diese einzeln angeben und wenn ja, wie? Der CSS-Code [CODE] body{background-color:#004f2f} /* LOGO-Container */ #top{position:relative; width:1000px; height:200px; margin: auto; bottom-margin: 0px; border: 1px solid blue; background-color:#545454; background-image:url('grafik/hor-navi-back.jpg'); background-repeat:no-repeat; background-position: top left; } /* Navigation unterhalb des Logos */ #topnavi{position:relative; width:820px; height:20px; margin: 0px auto; border-top: none; border-bottom: none; border-left: 1px solid blue; border-right: 1px solid blue; background-color:white; background-image:url('grafik/hor-navi-back.jpg'); background-repeat:repeat-x; background-position: top left; overflow:hidden; } /* Container für Seiteninhalt */ #inhalt-container{position:relative; width:820px; height:900px; margin: auto; border: 1px solid blue; background-color:#545454; background-image:url('grafik/hor-navi-back.jpg'); background-repeat:no-repeat; background-position: top left; background-attachment:fixed; } /* Navigation oben durch Listen */ #navi1 li {float: left;} #navi1{margin: 0; padding: 0; list-style-type: none; background: #6f79dc; background-image: url(grafik/back001.jpg); width: 100%; overflow: auto } #navi1 a{font-family: Arial; font-size: 14px; font-weight: bold; text-decoration: none; width: 120px; height: 20px; display: block; color: #fff; background-image: url(grafik/back001.jpg); background-color: white; text-align: center; line-height: 20px; border-bottom: 1px solid #fff; } #navi1 a:visited{color: #dfdfdf; background-image: url(grafik/back001.jpg) } #navi1 a:hover{background-color: #000; background-image: url(grafik/back002.jpg) } /* Bottom für Footer (Impressum, AGB, etc...) */ #bottom{position:relative; width:820px; height:120px; margin: 0px auto; margin-bottom: 20px border-top: none; border-bottom: 1px solid blue; border-left: 1px solid blue; border-right: 1px solid blue; background-color:white; background-image:url('grafik/hor-navi-back.jpg'); background-repeat:repeat-x; background-position: top left; overflow:hidden; } [/CODE] Der Seitenquelltext: [CODE] <html> <head> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div id="top"></div> <div id="topnavi"> <ul id="navi1"> <li><a href="#">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 2</a></li> </ul> </div> <div id="inhalt-container"></div> <div id="bottom"></div> </body> </html>[/CODE] [/QUOTE]

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

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?