Auf Thema antworten 2026

Beitrag

<blockquote data-quote="sukitio" data-source="post: 1791609" data-attributes="member: 336746">AW: CSS: Navigationsbalkenüber komplette BreiteOK, dann hab ich das mit dem Problem zeigen falsch verstanden, sorry dafür. Hier dann mal der bisherige Code:HTML&nbsp;[CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;&nbsp;&nbsp; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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=UTF-8&quot; /&gt;&lt;title&gt;erste page mit css&lt;/title&gt;&lt;link href=&quot;style.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;kopf&quot;&gt;&lt;/div&gt;&lt;div id=&quot;navi&quot;&gt;&nbsp; &nbsp; c&lt;a href=&quot;http://www.google.de&quot; class=&quot;navi_type&quot; style=&quot;position:absolute; top:5px;&quot;&gt;home&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;navi_type&quot; style=&quot;position:absolute; top:30px;&quot;&gt;gallerie 1&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;navi_type&quot; style=&quot;position:absolute; top:55px;&quot;&gt;gallerie 2&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;navi_type&quot; style=&quot;position:absolute; top:80px;&quot;&gt;vita&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;navi_type&quot; style=&quot;position:absolute; top:105px;&quot;&gt;kontakt&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;button&quot; style=&quot;position: absolute; top:0px; left:0px;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;button&quot; style=&quot;position: absolute; top:25px; left:0px;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;button&quot; style=&quot;position: absolute; top:50px; left:0px;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;button&quot; style=&quot;position: absolute; top:75px; left:0px;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://www.google.de&quot; class=&quot;button&quot; style=&quot;position: absolute; top:100px; left:0px;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;div id=&quot;content&quot;&gt;&lt;/div&gt;&lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]CSS:[CODE]@charset &quot;UTF-8&quot;;/* CSS Document */body,td,th {&nbsp; &nbsp; font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; color: #808080;}body {&nbsp; &nbsp; margin-left: 0px;&nbsp; &nbsp; margin-top: 0px;&nbsp; &nbsp; margin-right: 0px;&nbsp; &nbsp; margin-bottom: 0px;}a {&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; color: #808080;}a:link {&nbsp; &nbsp; text-decoration: none;}a:visited {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #808080;}a:hover {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #579caa;}a:active {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #579caa;}h1 {font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;&nbsp; &nbsp; font-size:24px;&nbsp; &nbsp; font-style:normal;&nbsp; &nbsp; color:#630;&nbsp; &nbsp; font-weight: bold;}.button {&nbsp; &nbsp; text-align:right;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; height:20px;&nbsp; &nbsp; background-color:#FFF;&nbsp; &nbsp; color:#c3c3c3;&nbsp; &nbsp; font-size:10px;&nbsp; &nbsp; text-indent: 10px;&nbsp; &nbsp; display:block;&nbsp; &nbsp; z-index:1;}a.button:link {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; background-color:#787878;&nbsp; &nbsp; color:#FFF;}a.button:visited {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; background-color:#787878;&nbsp; &nbsp; color:#FFF;}a.button:hover {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; background-color:#579caa;&nbsp; &nbsp; color:#FFF;}a.button:active {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; background-color:#579caa;&nbsp; &nbsp; color:#FFF;}.navi_type {&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; text-align:right;&nbsp; &nbsp; font-size:10px;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; left:260px;&nbsp; &nbsp; z-index:2;}.navi_type:link {&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; text-decoration:none;}.navi_type:hover {&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; text-decoration:none;}.navi_type:visited {&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; text-decoration:none;}.navi_type:active {&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; text-decoration:none;}#kopf {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; left:300px;&nbsp; &nbsp; height:150px;&nbsp; &nbsp; width:300px;&nbsp; &nbsp; background-color:#999;&nbsp; &nbsp; display:block;}#navi {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:180px;&nbsp; &nbsp; left:0px;&nbsp; &nbsp; height:500px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; z-index:1;}#content {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:180px;&nbsp; &nbsp; left:300px;&nbsp; &nbsp; height:500px;&nbsp; &nbsp; width:300px;&nbsp; &nbsp; background-color:#999;&nbsp; &nbsp; display:block;&nbsp; &nbsp; z-index:2;}#footer {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:550px;&nbsp; &nbsp; left:300px;&nbsp; &nbsp; height:150px;&nbsp; &nbsp; width:300px;&nbsp; &nbsp; background-color:#999;&nbsp; &nbsp; display:block;}[/CODE]Hier hab ich die Schrift der Navigation über die Balken gelegt. Natürlich wird dann beim mouseover auf die Schrift der Balken nicht umgefärbt. Das würde ich gerne beheben und zusätzlich die Schrift dann rechtsbündig an dem Contentfenster ausrichten. Ich hoffe, ihr könnt mir so einfacher helfen <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></blockquote>

[QUOTE="sukitio, post: 1791609, member: 336746"] [b]AW: CSS: Navigationsbalkenüber komplette Breite[/b] OK, dann hab ich das mit dem Problem zeigen falsch verstanden, sorry dafür. Hier dann mal der bisherige Code: 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>erste page mit css</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="kopf"></div> <div id="navi"> c<a href="http://www.google.de" class="navi_type" style="position:absolute; top:5px;">home</a> <a href="http://www.google.de" class="navi_type" style="position:absolute; top:30px;">gallerie 1</a> <a href="http://www.google.de" class="navi_type" style="position:absolute; top:55px;">gallerie 2</a> <a href="http://www.google.de" class="navi_type" style="position:absolute; top:80px;">vita</a> <a href="http://www.google.de" class="navi_type" style="position:absolute; top:105px;">kontakt</a> <a href="http://www.google.de" class="button" style="position: absolute; top:0px; left:0px;"></a> <a href="http://www.google.de" class="button" style="position: absolute; top:25px; left:0px;"></a> <a href="http://www.google.de" class="button" style="position: absolute; top:50px; left:0px;"></a> <a href="http://www.google.de" class="button" style="position: absolute; top:75px; left:0px;"></a> <a href="http://www.google.de" class="button" style="position: absolute; top:100px; left:0px;"></a> </div><div id="content"></div><div id="footer"></div></body></html> [/CODE] CSS: [CODE]@charset "UTF-8"; /* CSS Document */ body,td,th { font-family:"Lucida Sans Unicode", "Lucida Grande"; font-size: 14px; color: #808080; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a { font-size: 14px; color: #808080; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: #808080; } a:hover { text-decoration: none; color: #579caa; } a:active { text-decoration: none; color: #579caa; } h1 {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:24px; font-style:normal; color:#630; font-weight: bold; } .button { text-align:right; position:absolute; width:100%; height:20px; background-color:#FFF; color:#c3c3c3; font-size:10px; text-indent: 10px; display:block; z-index:1; } a.button:link { text-decoration: none; background-color:#787878; color:#FFF; } a.button:visited { text-decoration: none; background-color:#787878; color:#FFF; } a.button:hover { text-decoration: none; background-color:#579caa; color:#FFF; } a.button:active { text-decoration: none; background-color:#579caa; color:#FFF; } .navi_type { color:#000000; text-decoration:none; text-align:right; font-size:10px; position:absolute; left:260px; z-index:2; } .navi_type:link { color:#000000; text-decoration:none; } .navi_type:hover { color:#000000; text-decoration:none; } .navi_type:visited { color:#000000; text-decoration:none; } .navi_type:active { color:#000000; text-decoration:none; } #kopf { position:absolute; top:0px; left:300px; height:150px; width:300px; background-color:#999; display:block; } #navi { position:absolute; top:180px; left:0px; height:500px; width:100%; z-index:1; } #content { position:absolute; top:180px; left:300px; height:500px; width:300px; background-color:#999; display:block; z-index:2; } #footer { position:absolute; top:550px; left:300px; height:150px; width:300px; background-color:#999; display:block; }[/CODE] Hier hab ich die Schrift der Navigation über die Balken gelegt. Natürlich wird dann beim mouseover auf die Schrift der Balken nicht umgefärbt. Das würde ich gerne beheben und zusätzlich die Schrift dann rechtsbündig an dem Contentfenster ausrichten. Ich hoffe, ihr könnt mir so einfacher helfen :) [/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?