Header auf Bildschirmgröße anpasen

Page 1 of 2 1 2
03/09/2012 20:49 <Stiggi>#1
Hey,

Zuerst einmal habe ich einen animierten Header mit 1280 px und 178x gemacht.
Danach habe ich die Homepage in 4 verschiedene Bereiche (Frames) eingeteilt.
Ich habe dann eine Auflistung für die Verlinkungen gemacht und angepasst.
Danach habe ich 2 verschiedene Buttons "navbar_links.png" und "navbar_links2.png" eingefügt. Der erste Button "navbar_links.png" wird angezeigt wenn ich auf die Homepage gehe. Wenn ich dann auf den ersten Button "Startseite" zeige, wird der 2. Button "navbar_links2.png" angezeigt".
Das einzige Problem was sich stellt ist, dass der Header bzw. der Bereich wo der Header oder das Bild eingefügt ist nicht den Frame ausfüllt und nicht zentriert ist.

Hier mein index.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/gif" href="favicon.gif" />
<title>Schulhomepage</title>
</head>

<frameset rows="178,*" bordercolor="grey" frameborder="0,1">
  <frame name="Header" src="Header.html" marginheight="0" marginwidth="0" border="0" noresize>
  <frameset cols=150,*>
    <frame name="Linke Navigation" src="navil.html" marginheight="0" marginwidth="0" border="0" noresize>
    <frameset cols=*,150>
      <frame name="Hauptteil" src="body.html" marginheight="0" marginwidth="0" border="0" noresize>
      <frame name="Rechte Navigation" src="navir.html" marginheight="0" marginwidth="0" border="0" noresize>
    </frameset>
  </frameset>
</frameset>




<body>

</body>
</html>

Hier mein style.css:
Code:
BODY{

	background-color: grey;
	background:url(bg.jpg);


}

.liste{
	width: 1280px;
	height: 178px;
	background-image: url(3.gif);
	background-repeat: no-repeat;
	margin: 0px auto;
	padding: 120px 0 0 100px;
}
.navi {
	list-style-type: none;
	

}

.navi a{
	text-decoration: none;
	color: white;
	float: left;
	margin-right: 70px;
	font-family: 'comic sans ms';
	text-align: center;
	font-size:16px;
	height:40px;
	background:url(navbar_links.png);
	background-repeat: no-repeat;
	display:block;
	height:60px;
	width:160px;
	line-height:41px;
	text-shadow:0 1px 3px #000;
	margin:0 8.5px;
}


.navi a:hover{

	color: #7E7E7E;
	text-shadow: 0 0 12px white;
	text-decoration: none;
	height:40px;
	background:url(navbar_links2.png);
	background-repeat: no-repeat;
	display:block;
	height:60px;
	width:160px;
	line-height:41px;
	text-shadow:0 1px 3px white;
	margin:0 8.5px;
	
}
Hier mein Header.html :
Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Header</title>

<link rel="stylesheet" type="text/css" href="style.css" />


</style>



</head>
<body>
	<ul class="liste">
	
		<li class="navi">
			<a href="Start.html" target="Hauptteil">Startseite</a>
		</li>
		
		<li class="navi">
			<a href="Aktuelles.html" target="Hauptteil">Aktuelles</a>
		</li>
		
		<li class="navi">
			<a href="Stundenplan.html" target="Hauptteil">Stundenplan</a>
		</li>
		
		<li class="navi">
			<a href="gaestebuch.php" target="Hauptteil">Gästebuch</a>
		</li>
		
		<li class="navi">
			<a href="Kontakt.html" target="Hauptteil">Kontakt</a>
		</li>
		
		<li class="navi">
			<a href="Impressium.html" target="Hauptteil">Impressum</a>
		</li>
	
	</ul>
</body>
</html>
Ich hoffe ihr könnt mir helfen! Ich bin schon am verzweifeln...

Danke im Voraus!

<Stiggi>
03/09/2012 21:09 PseudoPsycho#2
Zentrieren ist recht einfach...
Da hilft dir vlt. [Only registered and activated users can see links. Click Here To Register...]...
03/09/2012 21:14 <Stiggi>#3
Das Problem ist dass es nicht direkt ein Bild ist, denn es ist nicht bewegbar...
Es ist sozusagen ein Feld wo das Bild als Hintergrund eingefügt ist!
03/09/2012 21:22 PseudoPsycho#4
Naja, vertikal zentrieren ist immer sehr schwer umzusetzen...
Die einfache Variante wäre:
Code:
html, body { height:auto; min-height:100%; }
.liste { position:absolute; top:50%; margin-top:-89px; }
03/09/2012 21:33 <Stiggi>#5
Es ist Horizontal!
03/09/2012 21:54 PseudoPsycho#6
Dann reicht auch:
Code:
.liste { margin-left:auto: margin-right:auto; }
03/09/2012 21:57 <Stiggi>#7
Quote:
Originally Posted by PseudoPsycho View Post
Dann reicht auch:
Code:
.liste { margin-left:auto: margin-right:auto; }
Soll ich dann margin: 0px auto; weglassen?
03/09/2012 22:04 PseudoPsycho#8
Quote:
Originally Posted by <Stiggi> View Post
Soll ich dann margin: 0px auto; weglassen?
Nimm einfach margin:auto; Das genügt dann schon...
03/09/2012 22:04 <Stiggi>#9
Leider funktioniert alles nicht :(
03/09/2012 22:33 PseudoPsycho#10
Dann versuch' mal das Ganze in ein DIV zu packen, dessen Breite zu begrenzen und den zu zentrieren...
03/09/2012 22:45 <Stiggi>#11
Quote:
Originally Posted by PseudoPsycho View Post
Dann versuch' mal das Ganze in ein DIV zu packen, dessen Breite zu begrenzen und den zu zentrieren...
Erstmal großen Dank das du mir hilfst, denn ich habe schon soviel probiert und bin wirklick schon am verzweifeln!

Aber könntest du mir den style.css und den header.html umschreiben?
Dies habe ich gefunden...[Only registered and activated users can see links. Click Here To Register...]
p.s. Ich möchte aber auch nicht, dass man den Header als Bild herrausziehen kann.

:)
03/09/2012 22:57 galaxyo#12
Quote:
Originally Posted by <Stiggi> View Post
p.s. Ich möchte aber auch nicht, dass man den Header als Bild herrausziehen kann.

:)
Das wirst du wohlkaum verhindern können.
03/09/2012 22:58 PseudoPsycho#13
CSS:
Code:
.container {
        width:1250px;
        margin:0pt auto;
        text-align:center; }


.liste{
	width: 1250px;
	height: 178px;
	background-image: url(3.gif);
	background-repeat: no-repeat;
	margin: 0px auto;
	padding: 120px 0 0 100px;
}
.navi {
	list-style-type: none;
	

}

.navi a{
	text-decoration: none;
	color: white;
	float: left;
	margin-right: 70px;
	font-family: 'comic sans ms';
	text-align: center;
	font-size:16px;
	height:40px;
	background:url(navbar_links.png);
	background-repeat: no-repeat;
	display:block;
	height:60px;
	width:160px;
	line-height:41px;
	text-shadow:0 1px 3px #000;
	margin:0 8.5px;
}


.navi a:hover{

	color: #7E7E7E;
	text-shadow: 0 0 12px white;
	text-decoration: none;
	height:40px;
	background:url(navbar_links2.png);
	background-repeat: no-repeat;
	display:block;
	height:60px;
	width:160px;
	line-height:41px;
	text-shadow:0 1px 3px white;
	margin:0 8.5px;
	
}
HTML Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Header</title>

<link rel="stylesheet" type="text/css" href="style.css" />


</style>



</head>
<body>
	<div class="container"><ul class="liste">
	
		<li class="navi">
			<a href="Start.html" target="Hauptteil">Startseite</a>
		</li>
		
		<li class="navi">
			<a href="Aktuelles.html" target="Hauptteil">Aktuelles</a>
		</li>
		
		<li class="navi">
			<a href="Stundenplan.html" target="Hauptteil">Stundenplan</a>
		</li>
		
		<li class="navi">
			<a href="gaestebuch.php" target="Hauptteil">Gästebuch</a>
		</li>
		
		<li class="navi">
			<a href="Kontakt.html" target="Hauptteil">Kontakt</a>
		</li>
		
		<li class="navi">
			<a href="Impressium.html" target="Hauptteil">Impressum</a>
		</li>
	
	</ul></div>
</body>
</html>
03/09/2012 23:00 galaxyo#14
Zuerst einmal sollte man die Css korrigieren.

z.B.:

height:40px;
height:60px;
margin:0 8.5px;
margin-right: 70px;

Man sollte sich schon entscheiden.

Edit:

Die Fehler sind bei: .navi a
03/09/2012 23:02 PseudoPsycho#15
Quote:
Originally Posted by galaxyo View Post
Zuerst einmal sollte man die Css korrigieren.

z.B.:

height:40px;
height:60px;
margin:0 8.5px;
margin-right: 70px;

Man sollte sich schon entscheiden.
Jo, hab' mir nur der Teil angesehen, in dem es um's Zentrieren geht...
Möglich, dass da Fehler drin sind...
Page 1 of 2 1 2