Hallo Zusammen,
in meinem Design habe ich folgendes Problem: Das Headerbild rechts schiebt sich beim Verkleinern des Browserfensters komplett sichtbar über die Inhalte des Headers links vom Bild.
So sieht es im Header aus:
<body>
<div id="header">
<div id="toppic">
</div>
<div id="menuLogoHeader"><img src="/wp-content/themes/studio-ernst/images/LogoSchriftzug.gif" ></div>
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="headerNav">
<ul><li><a href="/index.php?page_id=37">Home</a></li><li><a href="/index.php?page_id=35">Kontakt</a></li><li><a href="/index.php?page_id=36">Impressum</a></li></ul>
</div>
</div>
<div id="content">
<!-- end header -->
Alles anzeigen
Und so die Regeln im Stylesheet:
div#header { height: 18em; border-bottom: 20px solid #fefefe; min-width: 970px; } /*Höhe Header */
div#header h1 { visibility: hidden }
div#headerNav { margin: 116px 32em 6px 22px; font-size: 1em; color: } /*Menu Header */
div#headerNav ul { list-style-type: none; padding-left: 0; margin-left: 0; }
div#headerNav li { display: inline; margin-left: 1em; margin-right: 3em;}
/** Topsetbox oben rechts **/
div#toppic { width: 600px; height: 296px; background: #e6e6e6 url(/wp-content/themes/studio-ernst/images/hdPerspektiven1.jpg) no-repeat; position: absolute; border-bottom: 1em solid #fefefe; border-right: 1px solid #555656; top: 0px; right: 1em; }
#menuLogoHeader { background: #e6e6e6; background-position:absolute; height: 60px; align: left; padding-left: 12px; margin-bottom: 40px; margin-top: -15px; margin-left: 50px; }
Es wäre schön, wenn mir jemand einen Tipp geben könnte, was ich machen kann, damit sich das Fenster beim Verkleinern über das Bild schiebt - fehlt eine Angabe bei div#toppic?
Danke schon mal :)
Nicole.