Auf Thema antworten 2026

Beitrag

<blockquote data-quote="wotan100" data-source="post: 1787121" data-attributes="member: 491639">AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im HeaderHey!Also ich hab des so probiert:[CODE][B]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &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;Untitled Document&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;body{&nbsp; &nbsp; margin:0 auto;&nbsp; &nbsp; background:#666;&nbsp; &nbsp; background::#999;&nbsp; &nbsp; }&nbsp; &nbsp; #container_gr&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; margin:0px auto;&nbsp; &nbsp; &nbsp; &nbsp; width:1300px;&nbsp; &nbsp; &nbsp; &nbsp; min-height:1024px;&nbsp; &nbsp; &nbsp; &nbsp; background:#CCC;&nbsp; &nbsp; }&nbsp; &nbsp; #container_kl&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; width:60%;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; &nbsp; &nbsp; position:relative;&nbsp; &nbsp; &nbsp; &nbsp; min-height:600px;&nbsp; &nbsp; &nbsp; &nbsp; background:#FF3;&nbsp; &nbsp; }&nbsp; &nbsp; #header_gr{&nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; height:120px;&nbsp; &nbsp; &nbsp; &nbsp; background:#F00;&nbsp; &nbsp; }&nbsp; &nbsp; #header_cn{&nbsp; &nbsp; &nbsp; &nbsp; width=100%;&nbsp; &nbsp; &nbsp; &nbsp; height:120px;&nbsp; &nbsp; &nbsp; &nbsp; background:#0C3;&nbsp; &nbsp; }&nbsp; &nbsp; #service {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: .25em;&nbsp; &nbsp; &nbsp; &nbsp; right: 1em;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 80%;&nbsp; &nbsp; }&nbsp; &nbsp; #navi{&nbsp; &nbsp; &nbsp; &nbsp; width:780px;&nbsp; &nbsp; &nbsp; &nbsp; height:25px;&nbsp; &nbsp; &nbsp; &nbsp; margin:0 auto;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:#333;&nbsp; &nbsp; &nbsp; &nbsp; color:#0F6;&nbsp; &nbsp; }&nbsp; &nbsp; #navi ul{&nbsp; &nbsp; &nbsp; &nbsp; margin:0px;&nbsp; &nbsp; &nbsp; &nbsp; padding:0px 0px 0px 50px;&nbsp; &nbsp; &nbsp; &nbsp; list-style-type:none;&nbsp; &nbsp; }&nbsp; &nbsp; #navi li{&nbsp; &nbsp; &nbsp; &nbsp; width:80px;&nbsp; &nbsp; &nbsp; &nbsp; float:left;&nbsp; &nbsp; &nbsp; &nbsp; margin-top:-5px;&nbsp; &nbsp; &nbsp; &nbsp; padding:0;&nbsp; &nbsp; &nbsp; &nbsp; text-align:center;&nbsp; &nbsp; }&nbsp; &nbsp; #navi a,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #navi a:link,&nbsp; &nbsp; #navi a:visited&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; height:22px;&nbsp; &nbsp; &nbsp; &nbsp; display:block;&nbsp; &nbsp; &nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; &nbsp; &nbsp; color:#fff;&nbsp; &nbsp; &nbsp; &nbsp; padding:8px 0 0 0;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; #navi a:hover&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; height:25px;&nbsp; &nbsp; &nbsp; &nbsp; color:#0F9;&nbsp; &nbsp; &nbsp; &nbsp; font-size:16px;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; #navi #aktuell1 a&nbsp; &nbsp;&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; font-size:16px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; color:#FC6;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; #logo{&nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; width:170px;&nbsp; &nbsp; &nbsp; &nbsp; height:140px;&nbsp; &nbsp; &nbsp; &nbsp; background:#C9C;&nbsp; &nbsp; &nbsp; &nbsp; float:left;&nbsp; &nbsp; &nbsp; &nbsp; margin-top:-120px;&nbsp; &nbsp; &nbsp; &nbsp; margin-left:-190px;&nbsp; &nbsp; }&nbsp; &nbsp; #navigation_video {&nbsp; &nbsp; &nbsp; &nbsp; margin-top:50px;&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; width: 162px;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;header_gr&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;container_gr&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;header_cn&quot;&gt;&lt;/div&gt;&lt;div id=&quot;navigation_video&quot;&gt;Videos:&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;container_kl&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;logo&quot;&gt;logo&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;pic&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;navi&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;li id=&quot;aktuell1&quot;&gt;&lt;a href=&quot;#&quot; &gt;&lt;span&gt;Startseite&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;linkA&quot;&gt;&lt;span&gt;Friends&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;linkA&quot;&gt;&lt;span&gt;Videos&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/body&gt;&lt;/body&gt;&lt;/html&gt;[/B][/CODE]Ich weiß nicht wie unsauber es ist also bitte gebt mir feedback! ;-)Ich weiß auch nicht wirklich was ich hier floaten soll oder besser gesagt wie?!Das mit div#wrapper hab ich glaub ich mal gelesen.Das ist ja wenn sich der Container im Viewport zusammenzieht oder ausdehnt aber nicht verschwindet oder? Ich hoffe ich habs relativ richtig erkärt?!Aber wie das funktioniert weiß ich auch nicht...lg</blockquote>

[QUOTE="wotan100, post: 1787121, member: 491639"] [b]AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header[/b] Hey! Also ich hab des so probiert: [CODE][B]<!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>Untitled Document</title> <style type="text/css"> body{ margin:0 auto; background:#666; background::#999; } #container_gr { margin:0px auto; width:1300px; min-height:1024px; background:#CCC; } #container_kl { width:60%; margin: 0px auto; position:relative; min-height:600px; background:#FF3; } #header_gr{ width:100%; height:120px; background:#F00; } #header_cn{ width=100%; height:120px; background:#0C3; } #service { position: absolute; top: .25em; right: 1em; font-size: 80%; } #navi{ width:780px; height:25px; margin:0 auto; vertical-align:middle; background:#333; color:#0F6; } #navi ul{ margin:0px; padding:0px 0px 0px 50px; list-style-type:none; } #navi li{ width:80px; float:left; margin-top:-5px; padding:0; text-align:center; } #navi a, #navi a:link, #navi a:visited { height:22px; display:block; text-decoration:none; color:#fff; padding:8px 0 0 0; vertical-align:middle; } #navi a:hover { height:25px; color:#0F9; font-size:16px; } #navi #aktuell1 a { font-size:16px; color:#FC6; } #logo{ position:absolute; width:170px; height:140px; background:#C9C; float:left; margin-top:-120px; margin-left:-190px; } #navigation_video { margin-top:50px; float: left; width: 162px; } </style> </head> <body> <div id="header_gr"> <div id="container_gr"> <div id="header_cn"></div> <div id="navigation_video">Videos:</div> <div id="container_kl"> <div id="logo">logo</div> <div id="pic"></div> <div id="navi"> <ul> <li><li id="aktuell1"><a href="#" >Startseite</a></li> <li><a href="#" class="linkA">Friends</a></li> <li><a href="#" class="linkA">Videos</a></li> </ul> </div> </div> </div> </div> </body> </body> </html>[/B][/CODE]Ich weiß nicht wie unsauber es ist also bitte gebt mir feedback! ;-) Ich weiß auch nicht wirklich was ich hier floaten soll oder besser gesagt wie?! Das mit div#wrapper hab ich glaub ich mal gelesen. Das ist ja wenn sich der Container im Viewport zusammenzieht oder ausdehnt aber nicht verschwindet oder? Ich hoffe ich habs relativ richtig erkärt?! Aber wie das funktioniert weiß ich auch nicht... lg [/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?