zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem: Navigation verschiebt sich beim Zoomen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.08.2013, 18:23
Benutzerbild von Thasoullady
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2013
Beiträge: 3
Thasoullady befindet sich auf einem aufstrebenden Ast
Standard Problem: Navigation verschiebt sich beim Zoomen

Hi Leute,

ich versuche mich gerade daran, meine erste Website zu entwickeln. Allerdings klappt es noch nicht ganz so, wie ich es mir vorgestellt habe.

Denn sobald man raus- oder reinzoomed verschiebt sich der Header bzw. die Navigation samt Logo und Schrift an den linken Seitenrand. Ich wünsche mir aber, dass es wie bei allen Websites, mittig bleibt und sich dort verkleinert.

Hier der code für den Header

HTML:

HTML-Code:
<body>
	<div id="header">
   	    <div>
			<ul>
      			<li  class="selected">
					<a href="index.html">Startseite</a>
				<li>
					<a href="ueber uns.html">Über uns</a>
				</li>
       			<li>
					<a href="speisekarte.html">Speisekarte</a>
				</li>
        		</ul>
      				<a href="index.html" id="logo"><img src="images/logo.png" alt="Image"></a>
				<ul>
      			<li>
					<a href="gallerie.html">Gallerie</a>
				</li>
				<li>
					<a href="anfahrt.html">Anfahrt</a>
				</li>
				<li>
					<a href="impressum.html">Impressum</a>
				</li>
    		</ul>
		</div>
      </div>
CSS:

Code:
@font-face {
	font-family: 'hanford_-webfont';
	src: url('../fonts/hanford_-webfont.eot');
	src: url('../fonts/hanford_-webfont.woff') format('woff'), url('../fonts/hanford_-webfont.ttf') format('truetype'), url('../fonts/hanford_-webfont.svg') format('svg');
}

body {
	background:url("../images/bg-main.jpg") no-repeat scroll center top;
	background-attachment:fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1;
	margin: 0;
	min-width: 100%;
	width: 85,33em;
	padding: 0;
	
	background-color:#fff;
}
a {
	outline: none;
}
img {
	border: 0;
}
/********************************HEADER********************************/

#header {
	background: url(../images/bg-header.png) no-repeat center top;
}

#header div {
	border: 0;
	background: none;
	margin: 0 auto;
	overflow: hidden;
	padding: 16px 0px 0;
	text-align: center;
	width: 95%;
	/*width: 85,33em;*/
}

#header div ul {
	list-style: none;
	float: left;
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 15px 0;
	width: auto;
}

#header div ul li {
	float: left;
	height: auto;
	margin: 0;
	padding: 0;
	width: 142px;
}

#header div ul li a {
	background: none;
	color: #045024;
	font-family: 'hanford_-webfont';
	font-size: 18px;
	font-weight:bold;
	line-height: 14px;
	padding: 0 5px;
	text-decoration: none;
	text-transform: capitalize;
}
#header div ul li.selected a {
	background: 	url(../images/dots.png) repeat-x bottom ;
}
#header div ul li a:hover {
	color: #efefb2;
}

#header div a#logo {
	float: left;
	margin: 0 34px;
}
Wie schon kurz beschrieben, möchte ich dass die Navigation mittig bestehen bleibt, sobald man rauszoomed. Optimal wäre es, wenn das Background Bild vom Zoomen nicht betroffen wird und sich nur die verschiedenen Container verkleinern.

Ich würde mich über ein bisschen Hilfestellung freuen, da ich mir schon seit einer Woche darüber den Kopf zerbreche!

Im Anhang sind zwei Bilder, die einmal eine 100% Auflösung der Website darstellen, und eins, welche die "rausgezoomte" Website darstellt.

Danke im Vorraus

lg
Angehängte Grafiken
Dateityp: png Beispiel1.png (1,09 MB, 12x aufgerufen)
Dateityp: png Beispiel2.png (1,06 MB, 12x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.08.2013, 21:16
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Gib deinem Header anstatt width: 95%; eine feste Breite.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.08.2013, 15:28
Benutzerbild von Thasoullady
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2013
Beiträge: 3
Thasoullady befindet sich auf einem aufstrebenden Ast
Standard

Dankeee, hat funktioniert.
Ihr seit die besten


Jetzt verwirrt es mich einwenig, wann ich prozentangaben verwende und wann Pixelangaben.
Ich habe in einem Buch gelesen, dass man für elastische, flexibles Layouts verschiedene Maße und Einheiten verwendet. Dann gibt es die Hybridversion als mix von 2 Layouttypen, hier soll man mit prozent und em angaben arbeiten, wobei diese Hybridversion die beste sei, da sie sich jeder Bildschirmgröße bzw. auflösung perfekt anpasst.

Daher habe ich versucht die Hybridversion anzuwenden. Vor allem habe ich das so verstanden, dass man diese prozent und em-Angaben durchgehend verwendet, wie zb. für sämtliche body,header,footy,Div-Container,imagegrößen, ... Habe ich das falsch verstanden?

Wann verwende ich nun Prozent und Em-Angaben bei Benutzung der Hybridversion und wann feste Breiten bzw. für welche Container?
Habe jetzt für den Body % und em-Angaben und für den Header in px. Warum?

Würd mich um um jede Antwort freuen.

Vielen Dank


Lg
Mit Zitat antworten
  #4 (permalink)  
Alt 23.08.2013, 16:03
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Immer dann wenn du Abhöngigkeiten in Bezug zur Schriftgrösse machen willst, nimmst du em, sonst % oder feste Pixelangaben.

nur mal so ein Beipiel:
Buttons sollen mitwachsen in Abhängigkeit der Schriftgrösse, damit die Schrift nicht unschön herausragt. Dann em für Breite und Höhe.
Die Buttons sollen immer einen festen Abstand vom äusseren Rand zur Schrift haben, dann nimmt man fürs padding px.
Die Buttons sollen in einer Reihe sein, die zentriert ist und mitwächst. Da bietet sich % an für die Breite und den Abstand des Elternelementes.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.08.2013, 11:21
Benutzerbild von Thasoullady
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2013
Beiträge: 3
Thasoullady befindet sich auf einem aufstrebenden Ast
Standard

Vielen Danke, daran werde ich mch halten.


Lg
Mit Zitat antworten
Antwort

Stichwörter
navigation, verschoben

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 sticky navigation ha-bauer Javascript & Ajax 6 22.04.2013 19:05
Gesamtes Layout verschiebt sich bei Navigation -rep- CSS 8 27.06.2012 10:44
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Problem mit Navigation zentrieren garfield1711 CSS 1 12.06.2011 09:12
Problem mit ie6 und css navigation Sinclair CSS 0 29.03.2007 16:00


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