Auf Thema antworten 2026

Beitrag

<blockquote data-quote="smusekaterliene" data-source="post: 793720" data-attributes="member: 3578">AW: Ausrichtung/ Hintergrundfärbung WebseiteHallöchen zusammen, nun hab ich dank Cebito das Ganze etwas schöner hinbekommen. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /> Ich habe nur ein einziges Problem. Die Navigationsleiste klebt an der linken Seite. Alles andere ist mittig positioniert. Ich bastele nun schon wieder seit Stunden rum und finde den Fehler einfach nicht. Sicher ist es wieder total einfach und ich sehs einfach nicht... wäre lieb, wenn ihr euch das mal anschauen könntet... hier mein Quellcode (für die HTML-Datei gekürzt): &lt;html&gt;&lt;head&gt;&lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;&lt;title&gt;xxxxxxxx - STARTSEITE -&lt;/title&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;&lt;link href=&quot;styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;&lt;script src=&quot;change.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body bgcolor=&quot;#999999&quot; onLoad=&quot;preloadImages();&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;navi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;home&quot;&gt;&lt;a href=&quot;index.html&quot; onMouseOver=&quot;changeImages(&#039;Startseite&#039;, &#039;Bilder/Startseite-over.png&#039;); return true;&quot;onMouseOut=&quot;changeImages(&#039;Startseite&#039;, &#039;Bilder/Startseite.png&#039;); return true;&quot;onMouseDown=&quot;changeImages(&#039;Startseite&#039;, &#039;Bilder/Startseite-over&#039;); return true;&quot;onMouseUp=&quot;changeImages(&#039;Startseite&#039;, &#039;Bilder/Startseite-over&#039;); return true;&quot;&gt;&lt;img name=&quot;infos&quot; src=&quot;Bilder/Startseite.png&quot; title=&quot;Startseite&quot; width=&quot;160&quot; border=&quot;0&quot; height=&quot;37&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;info&quot;&gt;&lt;a href=&quot;info.html&quot;onMouseOver=&quot;changeImages(&#039;Infos&#039;, &#039;Bilder/infos-over.png&#039;); return true;&quot;onMouseOut=&quot;changeImages(&#039;Infos&#039;, &#039;Bilder/infos.png&#039;); return true;&quot;onMouseDown=&quot;changeImages(&#039;Infos&#039;, &#039;Bilder/infos-over&#039;); return true;&quot;onMouseUp=&quot;changeImages(&#039;Infos&#039;, &#039;Bilder/infos-over&#039;); return true;&quot;&gt;&lt;img name=&quot;infos&quot; src=&quot;Bilder/infos.png&quot; title=&quot;Informationen zu unserem Unternehmen&quot;width=&quot;160&quot; border=&quot;0&quot; height=&quot;37&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;leistung&quot;&gt;&lt;a href=&quot;products.html&quot;onMouseOver=&quot;changeImages(&#039;Leistungen&#039;, &#039;Bilder/leistungen-over.png&#039;); return true;&quot;onMouseOut=&quot;changeImages(&#039;Leistungen&#039;, &#039;Bilder/leistungen.png&#039;); return true;&quot;onMouseDown=&quot;changeImages(&#039;Leistungen&#039;, &#039;Bilder/Leistungen-over&#039;); return true;&quot;onMouseUp=&quot;changeImages(&#039;Leistungen&#039;, &#039;Bilder/Leistungen-over&#039;); return true;&quot;&gt;&lt;img name=&quot;Leistungen&quot; src=&quot;Bilder/Leistungen.png&quot; title=&quot;Unser Leistungsangebot&quot;width=&quot;160&quot; border=&quot;0&quot; height=&quot;37&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;referenz&quot;&gt;&lt;a href=&quot;references.html&quot; onMouseOver=&quot;changeImages(&#039;Referenzen&#039;, &#039;Bilder/Referenzen-over.png&#039;); return true;&quot;onMouseOut=&quot;changeImages(&#039;Referenzen&#039;, &#039;Bilder/Referenzen.png&#039;); return true;&quot;onMouseDown=&quot;changeImages(&#039;Referenzen&#039;, &#039;Bilder/Referenzen-over&#039;); return true;&quot;onMouseUp=&quot;changeImages(&#039;Referenzen&#039;, &#039;Bilder/Referenzen-over&#039;); return true;&quot;&gt;&lt;img name=&quot;Referenzen&quot; src=&quot;Bilder/Referenzen.png&quot; title=&quot;Referenzen&quot;width=&quot;160&quot; border=&quot;0&quot; height=&quot;37&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;contact&quot;&gt;&lt;a href=&quot;contact.html&quot;onMouseOver=&quot;changeImages(&#039;Kontakt&#039;, &#039;Bilder/Kontakt-over.png&#039;); return true;&quot;onMouseOut=&quot;changeImages(&#039;Kontakt&#039;, &#039;Bilder/Kontakt.png&#039;); return true;&quot;onMouseDown=&quot;changeImages(&#039;Kontakt&#039;, &#039;Bilder/Kontakt-over&#039;); return true;&quot;onMouseUp=&quot;changeImages(&#039;Kontakt&#039;, &#039;Bilder/Kontakt-over&#039;); return true;&quot;&gt;&lt;img name=&quot;Kontakt&quot; src=&quot;Bilder/Kontakt.png&quot; title=&quot;Nehmen Sie Kontakt mir uns auf&quot;width=&quot;160&quot; border=&quot;0&quot; height=&quot;37&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt;und hier meine css-Datei: body {&nbsp; &nbsp; background-color: #999999&nbsp; &nbsp; margin: 0;}.normal&nbsp; &nbsp; {&nbsp; &nbsp;&nbsp; font-weight:&nbsp; &nbsp; normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; font-size:&nbsp; &nbsp; 12px;&nbsp; &nbsp;&nbsp; font-family:&nbsp; &nbsp; Verdana;&nbsp; &nbsp;&nbsp; color:&nbsp; &nbsp; #000000;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .ueberschrift&nbsp; &nbsp; {&nbsp; &nbsp;&nbsp; font-weight:&nbsp; &nbsp; bold;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; font-size:&nbsp; &nbsp; 16px;&nbsp; &nbsp;&nbsp; font-family:&nbsp; &nbsp; Verdana;&nbsp; &nbsp;&nbsp; color:&nbsp; &nbsp; #ff0000;&nbsp; &nbsp;&nbsp; }#header {&nbsp; &nbsp; background-image: url(Bilder/Header.png);&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; height: 191px;&nbsp; &nbsp; width: 800px;}#navi {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; marging: auto;&nbsp; &nbsp; height: 37px;&nbsp; &nbsp; widht: 800px;}#home {&nbsp; &nbsp;&nbsp; float: left;&nbsp; &nbsp;&nbsp; height: 37px;&nbsp; &nbsp;&nbsp; width: 160px;}#info {&nbsp; &nbsp;&nbsp; float: left;&nbsp; &nbsp;&nbsp; height: 37px;&nbsp; &nbsp;&nbsp; width: 160px;}#leistung {&nbsp; &nbsp;&nbsp; float:&nbsp; left;&nbsp; &nbsp;&nbsp; height: 37px;&nbsp; &nbsp;&nbsp; width: 160px;}#referenz {&nbsp; float:&nbsp; left;&nbsp; height: 37px;&nbsp; width: 160px;}#contact {&nbsp;float:&nbsp; left;&nbsp;height: 37px;&nbsp;width: 160px;}#shadow {&nbsp;background-image: url(Bilder/LeisteundButtons.png);&nbsp;margin: auto;&nbsp;height: 26px;&nbsp;width: 800px;}#main {&nbsp;background-color:#ffffff;&nbsp; margin: auto;&nbsp; height: 550px;&nbsp; width: 800px; }#left {&nbsp;float: left;&nbsp;padding: 15px 0 0 40px;&nbsp;height: 500px;&nbsp;width: 360px; }#right {&nbsp;float: left;&nbsp;padding: 15px 35px 0 0;&nbsp;height: 500px;&nbsp;width: 365px;&nbsp;text-align: right;}#abstand_unten {&nbsp; &nbsp; background-color:#ffffff;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; height: 45px;&nbsp; &nbsp; width: 800px;}#naviunten {&nbsp; &nbsp; padding: auto;&nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 800px;}#impressum {&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 160px;}#platzhalter {&nbsp; &nbsp; float: left;&nbsp; &nbsp; background-image: url(Bilder/Reihezw.Impru.Sprachen.png);&nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 480px;}#buttonDE {&nbsp; &nbsp; float: left; &nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 48px;}#buttonENG {&nbsp; &nbsp; float: left; &nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 55px;}#buttonRO {&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 42px;&nbsp; &nbsp; width: 57px;}#footer {&nbsp; &nbsp; background-image: url(Bilder/Fussleiste.png);&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; height: 36px;&nbsp; &nbsp; width: 800px;}@cebito: Nochmal vielen vielen Dank für deine Hilfe.. so ist es zwar ein bissel komplizierter, aber ich habe viel gelernt...(offensichtlich noch nicht genug <img src="/styles/default/xenforo/smilies/uhm.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Frown&nbsp; &nbsp; :(" data-shortname=":(" />). Und was noch ein riesen Vorteil ist, die dämlichen grauen Umrandungen im IE sind nun weg. <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />Sorry für den riesen Post, aber ich habe immer noch nicht raus, wie man die Quellcodes hier größenoptimiert postet. Vielen Dank schon mal in Voraus! Liebe GrüßeSmusekaterliene</blockquote>

[QUOTE="smusekaterliene, post: 793720, member: 3578"] [b]AW: Ausrichtung/ Hintergrundfärbung Webseite[/b] Hallöchen zusammen, nun hab ich dank Cebito das Ganze etwas schöner hinbekommen. :) Ich habe nur ein einziges Problem. Die Navigationsleiste klebt an der linken Seite. Alles andere ist mittig positioniert. Ich bastele nun schon wieder seit Stunden rum und finde den Fehler einfach nicht. Sicher ist es wieder total einfach und ich sehs einfach nicht... wäre lieb, wenn ihr euch das mal anschauen könntet... hier mein Quellcode (für die HTML-Datei gekürzt): <html> <head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>xxxxxxxx - STARTSEITE -</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"/> <script src="change.js" type="text/javascript"></script> </head><body bgcolor="#999999" onLoad="preloadImages();"> <div id="header"></div> <div id="navi"> <div id="home"><a href="index.html" onMouseOver="changeImages('Startseite', 'Bilder/Startseite-over.png'); return true;" onMouseOut="changeImages('Startseite', 'Bilder/Startseite.png'); return true;" onMouseDown="changeImages('Startseite', 'Bilder/Startseite-over'); return true;" onMouseUp="changeImages('Startseite', 'Bilder/Startseite-over'); return true;"> <img name="infos" src="Bilder/Startseite.png" title="Startseite" width="160" border="0" height="37"></a></div> <div id="info"><a href="info.html" onMouseOver="changeImages('Infos', 'Bilder/infos-over.png'); return true;" onMouseOut="changeImages('Infos', 'Bilder/infos.png'); return true;" onMouseDown="changeImages('Infos', 'Bilder/infos-over'); return true;" onMouseUp="changeImages('Infos', 'Bilder/infos-over'); return true;"> <img name="infos" src="Bilder/infos.png" title="Informationen zu unserem Unternehmen" width="160" border="0" height="37"></a></div> <div id="leistung"><a href="products.html" onMouseOver="changeImages('Leistungen', 'Bilder/leistungen-over.png'); return true;" onMouseOut="changeImages('Leistungen', 'Bilder/leistungen.png'); return true;" onMouseDown="changeImages('Leistungen', 'Bilder/Leistungen-over'); return true;" onMouseUp="changeImages('Leistungen', 'Bilder/Leistungen-over'); return true;"> <img name="Leistungen" src="Bilder/Leistungen.png" title="Unser Leistungsangebot" width="160" border="0" height="37"></a></div> <div id="referenz"><a href="references.html" onMouseOver="changeImages('Referenzen', 'Bilder/Referenzen-over.png'); return true;" onMouseOut="changeImages('Referenzen', 'Bilder/Referenzen.png'); return true;" onMouseDown="changeImages('Referenzen', 'Bilder/Referenzen-over'); return true;" onMouseUp="changeImages('Referenzen', 'Bilder/Referenzen-over'); return true;"> <img name="Referenzen" src="Bilder/Referenzen.png" title="Referenzen" width="160" border="0" height="37"></a></div> <div id="contact"><a href="contact.html" onMouseOver="changeImages('Kontakt', 'Bilder/Kontakt-over.png'); return true;" onMouseOut="changeImages('Kontakt', 'Bilder/Kontakt.png'); return true;" onMouseDown="changeImages('Kontakt', 'Bilder/Kontakt-over'); return true;" onMouseUp="changeImages('Kontakt', 'Bilder/Kontakt-over'); return true;"> <img name="Kontakt" src="Bilder/Kontakt.png" title="Nehmen Sie Kontakt mir uns auf" width="160" border="0" height="37"></a></div> </div> <div id="shadow"></div> <div id="main"> und hier meine css-Datei: body { background-color: #999999 margin: 0; } .normal { font-weight: normal; font-size: 12px; font-family: Verdana; color: #000000; } .ueberschrift { font-weight: bold; font-size: 16px; font-family: Verdana; color: #ff0000; } #header { background-image: url(Bilder/Header.png); margin: auto; height: 191px; width: 800px; } #navi { padding: 0; marging: auto; height: 37px; widht: 800px; } #home { float: left; height: 37px; width: 160px; } #info { float: left; height: 37px; width: 160px; } #leistung { float: left; height: 37px; width: 160px; } #referenz { float: left; height: 37px; width: 160px; } #contact { float: left; height: 37px; width: 160px; } #shadow { background-image: url(Bilder/LeisteundButtons.png); margin: auto; height: 26px; width: 800px; } #main { background-color:#ffffff; margin: auto; height: 550px; width: 800px; } #left { float: left; padding: 15px 0 0 40px; height: 500px; width: 360px; } #right { float: left; padding: 15px 35px 0 0; height: 500px; width: 365px; text-align: right; } #abstand_unten { background-color:#ffffff; margin: auto; height: 45px; width: 800px; } #naviunten { padding: auto; height: 42px; width: 800px; } #impressum { float: left; height: 42px; width: 160px; } #platzhalter { float: left; background-image: url(Bilder/Reihezw.Impru.Sprachen.png); height: 42px; width: 480px; } #buttonDE { float: left; height: 42px; width: 48px; } #buttonENG { float: left; height: 42px; width: 55px; } #buttonRO { float: left; height: 42px; width: 57px; } #footer { background-image: url(Bilder/Fussleiste.png); margin: auto; height: 36px; width: 800px; } @cebito: Nochmal vielen vielen Dank für deine Hilfe.. so ist es zwar ein bissel komplizierter, aber ich habe viel gelernt...(offensichtlich noch nicht genug :(). Und was noch ein riesen Vorteil ist, die dämlichen grauen Umrandungen im IE sind nun weg. ;) Sorry für den riesen Post, aber ich habe immer noch nicht raus, wie man die Quellcodes hier größenoptimiert postet. Vielen Dank schon mal in Voraus! Liebe Grüße Smusekaterliene [/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?