|
|||
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 - Ü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>.... 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; } ..... 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;}... Gruß und Dank glupto |
Sponsored Links |
|
|||
Hallo glupto
Für Text im Header braucht man diesen doch nicht als Grafik mit einbinden. Überschriften die man mit CSS hinbekommt. Oder ist das so gewollt? Siehe hier mal: Edit fiddle - JSFiddle _______________ MfG Roland |
Sponsored Links |
|
|||
Zitat:
Gruß Peter |
|
|||
Peter bitte erst mal HTML validieren.
[Invalid] Markup Validation of http://nachrichtentisch.de/_stickyheaderneu3.php - W3C Markup Validator 456.PNG ___________- MfG Roland |
|
|||
Zitat:
Mfg Peter |
|
|||
Zitat:
Jetzt auf der neuen Seite hast du aber Position: Fixe eingesetzt. Die Header Grafik kann sich jetzt ohne höhe nicht mit der Navigation anpassen. ______________ MfG Roland |
|
|||
Danke, aber...
Zitat:
Aber selbst wenn ich auf das fixed verzichte, bleibt ein abstand zwischen header und menu1, den ich mir nicht erklären kann, denn da ist ja margin-top immer auf 0 gesetzt...(ich kann es jetzt nur mit einem Negativ-Wert bei margin-top ändern) (Das Menü muss ich eh noch anpassen, da rutscht ja die Zeit gleich in die zweite Reihe.) Ach und dann kriege ich ums Verrecken Datum und Zeit nicht auf die Rechte Seite der Navi-Leiste, trotz float:right. Gruß glupto Geändert von glupto (23.08.2014 um 21:13 Uhr) |
|
|||
Zitat:
navires4f.css (Zeile 318 Code:
} #menu1 { margin: 50px 0 0; } Code:
} .header img { width: 100%; vertical-align: bottom; } MfG Roland |
|
|||
Zitat:
nachrichtentisch |
Sponsored Links |
|
||||
Floate nicht das div (werf das div übrigens raus, da braucht keine Socke ein div.
Floate das LI nach rechts. NICHT DAS FLOAT
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
Stichwörter |
header |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit margin-left | Shyne | CSS | 7 | 03.03.2008 19:02 |
Font der Überschrift ändern (Problem) | artist | CSS | 2 | 07.12.2007 11:01 |
Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 10:57 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 18:39 |
Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 07:28 |