zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden header/navi-Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.08.2014, 15:06
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
  #2 (permalink)  
Alt 22.08.2014, 19:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
Hallo, ich habe auf meiner jetzigen Website ein-Header-image ...
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.08.2014, 20:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
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
Hallo, Roland, ja das ist so gewollt, den Tisch daneben will ich ja auch haben, das ist so ein Gesamt-Design, das ich jetzt seit zwei Jahren benutze und jetzt verändert auch wieder einbinden will - samt Tisch. Auf jeden Fall klappt es ja bei der jetzigen Seite auch, also müsste es mit der neuen Navi doch auch klappen?

Gruß
Peter
Mit Zitat antworten
  #4 (permalink)  
Alt 22.08.2014, 21:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Peter bitte erst mal HTML validieren.

[Invalid] Markup Validation of http://nachrichtentisch.de/_stickyheaderneu3.php - W3C Markup Validator

456.PNG

___________-
MfG Roland
Mit Zitat antworten
  #5 (permalink)  
Alt 22.08.2014, 23:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Okay, danke für den Hinweis, habe ich gemacht, aber das änderte nichts am Problem.

Mfg Peter
Mit Zitat antworten
  #6 (permalink)  
Alt 23.08.2014, 10:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
Auf jeden Fall klappt es ja bei der jetzigen Seite auch, also müsste es mit der neuen Navi doch auch klappen?
Bei der jetzigen Seite hast du aber keine fixe Navigation, bedenke die passt sich dem Header img an.

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
Mit Zitat antworten
  #7 (permalink)  
Alt 23.08.2014, 14:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Danke, aber...

Zitat:
Zitat von K.Roland Beitrag anzeigen
Bei der jetzigen Seite hast du aber keine fixe Navigation, bedenke die passt sich dem Header img an.

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 für den Hinweis, obwohl das header img ja auch position:fixed war und ich dachte beides zusammen würde dann zusammen bleiben, aber sich der Browserfenster-Größe anpassen.

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.08.2014, 13:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
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)
Entferne hier die 50 Pixel Margin bei:

navires4f.css (Zeile 318
Code:
}
#menu1 {
    margin: 50px 0 0;
}
Und füge hier hinzu: vertical-align: bottom

Code:
}
.header img {
    width: 100%;
    vertical-align: bottom;
}
______________-
MfG Roland
Mit Zitat antworten
  #9 (permalink)  
Alt 24.08.2014, 23:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Entferne hier die 50 Pixel Margin bei:

navires4f.css (Zeile 318
Code:
}
#menu1 {
    margin: 50px 0 0;
}
Und füge hier hinzu: vertical-align: bottom

Code:
}
.header img {
    width: 100%;
    vertical-align: bottom;
}
______________-
MfG Roland
Vielen Dank, das vercal-align: bottom wäre mir nie in den Sinn gekommen. Hast Du denn auch noch eine Idee, wie ich Datum und Zeit (id=datumzeit) konstant an den rechten Rand bekomme. Das "float:right" ist wirkungslos, ich erreiche die jetzige Position nur mit margin:left, was ja bei anderen Browserfenstergrößen schon nicht mehr hinhaut.Der link jetzt:

nachrichtentisch
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.08.2014, 02:19
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
header

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:14 Uhr.