Hallo, ich habe auf meiner jetzigen Website ein-Header-image und eine Navigation darunter, die beim Verkleinern der Browser-Seite synchron kleiner werden, ohne dass sich der Abstand verändert.
Bei meiner geplanten relaunch-Seite wird das Header-img kleiner und die Navigationsleiste bleibt am selben Platz, der Abstand wird immer gößer, außerdem ist der Abstand auf größeren Bildschirmen automatisch zu eng (was man mit mediaqueries ja steuern könnte). ABer ich verstehe nicht, wieso sich der Abstand verändert, trotz margin:0 im css. Vielleicht könnte sich jemand die Seiten ansehen und mir sagen, woran es liegt.
alt:
Nachrichtentisch
neu
nachrichtentisch
Hier die HTML-Passage jeweils:
neu:
HTML-Code:
<div class="mm-fixed-top header">
<a href="#menu"></a>
<div id=header>
<img src="br_header_stella_1024.jpg" alt="Header" />
<!--
<img src="../globus.png" alt="Globus" class="header-img"/>
<div id="navbar-brand"><span>Nachrichtentisch - Übersicht</span></div>-->
<!--<div id="datumzeit">
<?php
date_default_timezone_set('Europe/Berlin');
$timestamp = time();
$datum = date("d.m.Y",$timestamp);
$zeit = date("H:i",$timestamp);
setlocale (LC_TIME, "de_DE");
$wotag=strftime("%a");
echo $wotag." " . $datum." - ".$zeit;
?>
</div>
<div id="zeit">
<?php
date_default_timezone_set('Europe/Berlin');
$timestamp = time();
$zeit = date("H:i",$timestamp);
setlocale (LC_TIME, "de_DE");
$wotag=strftime("%a");
echo $wotag." - ".$zeit;
?>
</div>
-->
</div>
</div>
<div id="navi">
<ul id="menu1">
<li><a href="http://www.nachrichtentisch.de">Home</a></li>
<li>
<a href="#">Resssorts</a>
<ul>
<li><a href="#">Politik</a></li>
<li><a href="#">Wirtschaft</a></li>
<li><a href="#">Kultur</a></li>
<li><a href="#">Medien/Netz</a></li>
<li><a href="#">Wissen</a></li>
<li><a href="#">Sport</a></li>
</ul>
</li>
<li>
<a href="#">Regionen</a>
<ul>
<li>....
css:
Code:
.header img{width:100%;}
/* Main menu */
#menu1
{
list-style-type:none !important;
position: fixed;
width: 100%;
margin: 40px 0 0 0px;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 0px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu1 li
{
list-style-type:none !important;
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu1 a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.....
alt:
HTML-Code:
<div id="header"><img src="br_headermutext_stella.png" alt="header" title= "header" id="image"></div>
<div id="navi4">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="#">Ressorts</a>....
Code:
#header{float:left;width:100%;}
#navi4 ul{background:url(bg_gray_2.png) repeat-x #333;float:left;width:100%;min-width:95%;list-style:none;}
#navi4 ul li{float:left;width:100px;position:relative;background:url(bg_gray_2.png) repeat-x;}...
Ich habe jetzt nicht den gesamten Code gepostet, weil der sehr umfangsreich wäre, kann ich aber nachreichen.
Gruß und Dank
glupto