Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Konzertjunkie" data-source="post: 1580930" data-attributes="member: 261332">Hallo liebes PSD Forum.Ich bastele mir grade meine Portfolio Webpage. Dort möchte ich meine Navigation als Backgrund Image angeben und dann per list Div&#039;s die Links zu den verschiedenen Seiten. So weit so gut. Bei mir funktioniert dort dann aber nicht die z-index Befehl um die Navi unter ein Div zu packen. <img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" /> Kennt jemand die Lösung für dieses Peoblem!?[CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;&nbsp; &nbsp; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot; /&gt;&lt;meta name=&quot;robots&quot; content=&quot;index&quot; /&gt;&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /&gt;&lt;meta name=&quot;DC.title&quot; content=&quot;Wigand Alpers&quot; /&gt;&lt;meta name=&quot;DC.creator&quot; content=&quot;...&quot; /&gt;&lt;meta name=&quot;DC.subject&quot; content=&quot;Radiosprecherseite&quot; /&gt;&lt;meta name=&quot;DC.description&quot; content=&quot;Webseite des Sprechers Wigand Alpers&quot; /&gt;&lt;meta name=&quot;DC.publisher&quot; content=&quot;..&quot; /&gt;&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;formate.css&quot; /&gt;&lt;title&gt;Milandesign&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;hintergrund&quot;&gt;&lt;div id=&quot;oben&quot;&gt;&lt;div id=&quot;bild&quot;&gt;&lt;img src=&quot;logos/logo.png&quot; title=&quot;Logo&quot; width=&quot;400px&quot; height=&quot;400px&quot; alt=&quot;Logo&quot; /&gt;&lt;/div&gt;&lt;!-- logo //--&gt;&lt;div id=&quot;schriftzug&quot;&gt;&lt;div id=&quot;navi&quot;&gt;&lt;ul id=&quot;navi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li id=&quot;home&quot;&gt;&lt;a href=&quot;index.php&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li id=&quot;button2&quot;&gt;&lt;a href=&quot;#&quot;&gt;Button 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li id=&quot;button3&quot;&gt;&lt;a href=&quot;#&quot;&gt;Button 3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li id=&quot;button4&quot;&gt;&lt;a href=&quot;#&quot;&gt;Button 4&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&lt;/div&gt;&lt;!-- navi //--&gt;&lt;/div&gt;&lt;!-- schriftzug //--&gt;&lt;/div&gt;&lt;!-- oben //--&gt;&lt;div id=&quot;inhalt&quot;&gt;blindtext&lt;/div&gt;&lt;!-- inhalt //--&gt;&lt;/div&gt;&lt;!-- hintergrund //--&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]Css Datei:[CODE]body { background-color: #7a7a7a;background-image: url(bilder/parkett.png); color: #000000; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;font-size: 12px;}IMG { border: 0 none; }h1 { font-size: 20px; padding: 0;&nbsp; font-weight: bold; line-height: 20px; color: #000000;}h2 { font-size: 18px; padding: 10px 0 0 0; text-align: left; font-weight: bold; line-height: 18px; color: #000000;}h3 { font-size: 18px; padding: 10px 0 0 0; text-align: right; font-weight: bold; line-height: 18px; color: #000000;}&nbsp; &nbsp; &nbsp; &nbsp; .kursiv { font-size: 13px; padding: 3px 0 0 0; text-align: left; font-weight: normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-style: italic; line-height: 15pt; width: 380px; color: #000000;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; .fett { font-size: 13px; padding: 3px 0 0 0; text-align: center; font-weight: bold;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-style: normal; line-height: 15pt; width: 380px; color: #000000;}li { list-style-type: disc; }table {width: 100%;empty-cells: hide;border: 0px;}#hintergrund {&nbsp; margin: 0 auto;&nbsp; position: relative;&nbsp; margin-top: 0px;&nbsp; width: 1000px;&nbsp; height: 750px;&nbsp; color: #000000;&nbsp; padding: 0;&nbsp; }#oben {&nbsp; width: 1000px;&nbsp; height: 250px;&nbsp; margin-top: 0px;&nbsp; margin-bottom: 0px;&nbsp; color: #FFFFFF;&nbsp; float: right;&nbsp; }#bild {&nbsp; width: 194px;&nbsp; height: 143px;&nbsp; position: relative;&nbsp; float: left;&nbsp; margin: 0 auto;&nbsp; margin-top: 10px;&nbsp; color:#cc6633;&nbsp; z-index: 4;}#schriftzug {&nbsp; margin-top: 0px;&nbsp; margin: 0 auto;&nbsp; background-image:url(logos/mappe.png);&nbsp; width: 586px;&nbsp; position: relative;&nbsp; height: 295px;&nbsp; float: right;&nbsp; z-index: 4;&nbsp; }#navi{&nbsp; margin-top: 70px;&nbsp; margin-left: 5px;&nbsp; position: relative;&nbsp; background-image: url(logos/menue.png);&nbsp; list-style: none;&nbsp; width: 360px;&nbsp; height: 275px;&nbsp; z-index: 2;}#navi li a{&nbsp; position: relative;&nbsp; text-indent: -9999px;&nbsp; display: block;&nbsp; text-decoration: none;&nbsp; width: 53px;&nbsp; height: 68px;&nbsp; z-index: 2;}#home a{top: 70px;left: 20px;border:4px solid red;z-index: 2;}#button2 a{top: 132px;left: 145px;border:4px solid red;z-index: 2;}#button3 a{top:35px;left:220px;border:4px solid blue;z-index: 2;}#button4 a{top:90px;left:250px;border:4px solid yellow;z-index: 2;}#inhalt {&nbsp;float: right;&nbsp; background-image: url(logos/inhalt.png);&nbsp; background-repeat: no-repeat;&nbsp; overflow: auto;&nbsp; position: relative;&nbsp; width: 980px;&nbsp; height: 760px;&nbsp; margin: 0 auto;&nbsp; margin-top: 0px;&nbsp; left: 70px;&nbsp; padding: 10px 10px 10px 10px;&nbsp; font-size: 10pt;&nbsp; text-align: left;&nbsp; line-height: 15pt;&nbsp; z-index: 2;&nbsp; }&nbsp; #inhalt ul { list-style-type: disc;}&nbsp; #inhalt table { border-collapse: collapse; }&nbsp; #inhalt a:link { color: #cc6633; text-decoration: none; }&nbsp; #inhalt a:visited { color: #cc6633; text-decoration: none; }&nbsp; #inhalt a:hover { color: #939393; text-decoration: underline; }&nbsp; #inhalt a:active { color: #838383; text-decoration: none; }.bildlinks { float: left; padding: 1px; margin: 10px 10px 10px 0; padding: 2px; border: groove #000000 1px;}.bildrechts { float: right; padding: 1px; margin: 10px 0 10px 10px; padding: 2px; border: groove #000000 1px}[/CODE]und anschauen:</blockquote>

[QUOTE="Konzertjunkie, post: 1580930, member: 261332"] Hallo liebes PSD Forum. Ich bastele mir grade meine Portfolio Webpage. Dort möchte ich meine Navigation als Backgrund Image angeben und dann per list Div's die Links zu den verschiedenen Seiten. So weit so gut. Bei mir funktioniert dort dann aber nicht die z-index Befehl um die Navi unter ein Div zu packen. :( Kennt jemand die Lösung für dieses Peoblem!? [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="robots" content="index" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="DC.title" content="Wigand Alpers" /> <meta name="DC.creator" content="..." /> <meta name="DC.subject" content="Radiosprecherseite" /> <meta name="DC.description" content="Webseite des Sprechers Wigand Alpers" /> <meta name="DC.publisher" content=".." /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" href="formate.css" /> <title>Milandesign</title> </head> <body> <div id="hintergrund"> <div id="oben"> <div id="bild"><img src="logos/logo.png" title="Logo" width="400px" height="400px" alt="Logo" /></div> <div id="schriftzug"> <div id="navi"> <ul id="navi"> <li id="home"><a href="index.php">Home</a></li> <li id="button2"><a href="#">Button 2</a></li> <li id="button3"><a href="#">Button 3</a></li> <li id="button4"><a href="#">Button 4</a></li> </ul> </div> </div> </div> <div id="inhalt"> blindtext </div> </div> </body> </html>[/CODE]Css Datei: [CODE]body { background-color: #7a7a7a;background-image: url(bilder/parkett.png); color: #000000; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; font-size: 12px;} IMG { border: 0 none; } h1 { font-size: 20px; padding: 0; font-weight: bold; line-height: 20px; color: #000000;} h2 { font-size: 18px; padding: 10px 0 0 0; text-align: left; font-weight: bold; line-height: 18px; color: #000000;} h3 { font-size: 18px; padding: 10px 0 0 0; text-align: right; font-weight: bold; line-height: 18px; color: #000000;} .kursiv { font-size: 13px; padding: 3px 0 0 0; text-align: left; font-weight: normal; font-style: italic; line-height: 15pt; width: 380px; color: #000000;} .fett { font-size: 13px; padding: 3px 0 0 0; text-align: center; font-weight: bold; font-style: normal; line-height: 15pt; width: 380px; color: #000000;} li { list-style-type: disc; } table { width: 100%; empty-cells: hide; border: 0px; } #hintergrund { margin: 0 auto; position: relative; margin-top: 0px; width: 1000px; height: 750px; color: #000000; padding: 0; } #oben { width: 1000px; height: 250px; margin-top: 0px; margin-bottom: 0px; color: #FFFFFF; float: right; } #bild { width: 194px; height: 143px; position: relative; float: left; margin: 0 auto; margin-top: 10px; color:#cc6633; z-index: 4; } #schriftzug { margin-top: 0px; margin: 0 auto; background-image:url(logos/mappe.png); width: 586px; position: relative; height: 295px; float: right; z-index: 4; } #navi{ margin-top: 70px; margin-left: 5px; position: relative; background-image: url(logos/menue.png); list-style: none; width: 360px; height: 275px; z-index: 2; } #navi li a{ position: relative; text-indent: -9999px; display: block; text-decoration: none; width: 53px; height: 68px; z-index: 2; } #home a{ top: 70px; left: 20px; border:4px solid red; z-index: 2; } #button2 a{ top: 132px; left: 145px; border:4px solid red; z-index: 2; } #button3 a{ top:35px; left:220px; border:4px solid blue; z-index: 2; } #button4 a{ top:90px; left:250px; border:4px solid yellow; z-index: 2; } #inhalt { float: right; background-image: url(logos/inhalt.png); background-repeat: no-repeat; overflow: auto; position: relative; width: 980px; height: 760px; margin: 0 auto; margin-top: 0px; left: 70px; padding: 10px 10px 10px 10px; font-size: 10pt; text-align: left; line-height: 15pt; z-index: 2; } #inhalt ul { list-style-type: disc;} #inhalt table { border-collapse: collapse; } #inhalt a:link { color: #cc6633; text-decoration: none; } #inhalt a:visited { color: #cc6633; text-decoration: none; } #inhalt a:hover { color: #939393; text-decoration: underline; } #inhalt a:active { color: #838383; text-decoration: none; } .bildlinks { float: left; padding: 1px; margin: 10px 10px 10px 0; padding: 2px; border: groove #000000 1px;} .bildrechts { float: right; padding: 1px; margin: 10px 0 10px 10px; padding: 2px; border: groove #000000 1px}[/CODE]und anschauen: [/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?