Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.08.2014, 15:06
glupto glupto ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard header/navi-Problem

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 - &Uuml;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
Mit Zitat antworten
Sponsored Links