Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
Header auf Bildschirmgröße anpasen Header auf Bildschirmgröße anpasen
You last visited: Today at 13:00

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement


Advertise with us!

Header auf Bildschirmgröße anpasen

Discussion on Header auf Bildschirmgröße anpasen within the Web Development forum part of the Coders Den category.

Reply
Page 1 of 2 1 2
 
Old   #1
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
Exclamation Header auf Bildschirmgröße anpasen

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>
<Stiggi> is offline  
Old 03/09/2012, 21:09   #2
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
Zentrieren ist recht einfach...
Da hilft dir vlt. ...
PseudoPsycho is offline  
Old 03/09/2012, 21:14   #3
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
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!
<Stiggi> is offline  
Old 03/09/2012, 21:22   #4
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
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; }
PseudoPsycho is offline  
Thanks
1 User
Old 03/09/2012, 21:33   #5
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
Es ist Horizontal!
<Stiggi> is offline  
Old 03/09/2012, 21:54   #6
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
Dann reicht auch:
Code:
.liste { margin-left:auto: margin-right:auto; }
PseudoPsycho is offline  
Old 03/09/2012, 21:57   #7
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
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?
<Stiggi> is offline  
Old 03/09/2012, 22:04   #8
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
Quote:
Originally Posted by <Stiggi> View Post
Soll ich dann margin: 0px auto; weglassen?
Nimm einfach margin:auto; Das genügt dann schon...
PseudoPsycho is offline  
Old 03/09/2012, 22:04   #9
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
Leider funktioniert alles nicht
<Stiggi> is offline  
Old 03/09/2012, 22:33   #10
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
Dann versuch' mal das Ganze in ein DIV zu packen, dessen Breite zu begrenzen und den zu zentrieren...
PseudoPsycho is offline  
Old 03/09/2012, 22:45   #11
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Mar 2012
Posts: 18
Received Thanks: 0
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...
p.s. Ich möchte aber auch nicht, dass man den Header als Bild herrausziehen kann.
<Stiggi> is offline  
Old 03/09/2012, 22:57   #12
 
galaxyo's Avatar
 
elite*gold: 0
The Black Market: 3/0/0
Join Date: Dec 2007
Posts: 425
Received Thanks: 183
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.
galaxyo is offline  
Old 03/09/2012, 22:58   #13
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
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>
PseudoPsycho is offline  
Thanks
1 User
Old 03/09/2012, 23:00   #14
 
galaxyo's Avatar
 
elite*gold: 0
The Black Market: 3/0/0
Join Date: Dec 2007
Posts: 425
Received Thanks: 183
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
galaxyo is offline  
Old 03/09/2012, 23:02   #15
 
PseudoPsycho's Avatar
 
elite*gold: 1715
The Black Market: 5/1/0
Join Date: Dec 2011
Posts: 672
Received Thanks: 207
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...
PseudoPsycho is offline  
Reply
Page 1 of 2 1 2

Tags
anpassen, bildschirm, header

« Countdown Frage (Java) | Design fragen ! »

Similar Threads Similar Threads
Header
10/17/2011 - General Art - 1 Replies
Hallo,suche jemand der mir den Header macht. http://s1.directupload.net/images/111017/5zhcveog .png -Gleiches Format (png) -Gleiche Schrift -Alles gleich. Halt nur mit neuen Namen.
[Frage]BILDSCHIRMGRÖßE ÄNDERN!!!
11/24/2010 - Metin2 Private Server - 0 Replies
hi we es schon in der Überschrift steht möchte ichde Bildschirmgröße bei dem Server Celestial-world ändern. ICh geh da in die config. und dann??
css wie mach ich ein header und vom header der hintergrund z.B blau
11/14/2010 - Coding Tutorials - 2 Replies
Hallo leute meine Frage kann man kaum erklären ich will nen Header z.B http://web85.germaninfo29.erfurt16.de/ebay/ftp_bi lder/header_moeller_1220_358.jpg also da steht traum company aber ich will in mein Header jetz Traum company und dann nur für denn Header ein blauen hintergrund also
HELP pls kann bildschirmgröße des Mt2-Fenster net ändern!!!
08/23/2010 - Metin2 - 4 Replies
^^^^^^^^^^^^^^^^^^^^^ Sagt alles!
Bildschirmgröße des benutzers anpassen?
05/02/2010 - AutoIt - 46 Replies
Hallo, ich suche eine möglichkeit die Bildschirmgröße mit AutoIt zu ändern. Das passiert ja auch bei spielen^^ Also ich meine wenn ich das Programm starte, dass der Bildschirm sich einer bestimmten größe anpasst, die ICH^^ im programm eingegeben habe. Bitte helft mir:handsdown: MfG WiiZocker



All times are GMT +1. The time now is 13:01.

elitepvpers - play less, get more - Top

Powered by vBulletin®
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2026 elitepvpers All Rights Reserved.