CSS Layout mit 4 Buttons nebeneinander!!

Rambo02 · 26.07.2009, 17:06

Guten Tag, ich habe ein kleines Problem und zwar hab ich ein css layout erstellt indem ein Header + 4 Buttons + Content Bereich + footer vorhanden sind. Das ganze sieht so aus in Firefox:

http://img5.imagebanana.com/img/y3hyg3cj/Layout.jpg

und so wenn ich die Auflösung niedriger stelle:

http://img5.imagebanana.com/img/tyo2ivi/Layout2.jpg

Wenn die Auflösung niedriger gestellt wird sollen diese 4 Menü Buttons alle zentriert im Browser verkleinert werden also nicht wie jetzt nach links sondern wieder der header in der mitte bleiben!

HTML datei:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>CSS Layout</title> 
	<link rel="stylesheet" href="Style.css" media="screen">

</head>
<body>


<div id="header"><font color="#ffffff"><br></div> 

<div id="Button1"><a class="buttonhover" href="#"><font color="#ffffff">Home</a></div> 

<div id="Button2"><a class="buttonhover" href="#"><font color="#ffffff">News</a></div> 

<div id="Button3"><a class="buttonhover" href="#"><font color="#ffffff">Forum</a></div> 

<div id="Button4"><a class="buttonhover" href="#"><font color="#ffffff">Impressum</a></div>  

<div id="content"><font color="#ffffff"><br>
<br>
<br>
<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</a></div>
<div id="footer">Copyright © 2009 - Alle Rechte vorbehalten</div>

</body>
</html>

CSS Datei:

Code:

body 
{ 
margin: 0px;
padding: 0px;
text-align: center;
background-color:#000000;  
font-family: Arial; 
color: #ffffff;
position: relative;
}

A
{
color: #ffffff;
text-decoration: none;
}

#header 
{ 
font-size: 0%;
font-family: Arial; 
color: #ffffff;
font-size: 2em;
margin: 30px auto 5px auto;
height: 102px;
width: 799px;
background-image: url(Bilder/Header.jpg); 
background-repeat: no-repeat;
background-position: 0pt;
position: relative;
}

  #Button1 
{ 
margin: 10px auto 10px 340px;
padding: 0px;
width: 169px;
height: 58px;
float: left;
background-image: url(Bilder/Button_2.jpg);
line-height: 58px;
}


#Button2 
{ 
margin: 10px auto 10px 20px;
padding: 0px;
width: 169px;
height: 61px;
float: left;
background-image: url(Bilder/Button_2.jpg);
line-height: 58px;
}

#Button3
{
margin: 10px 10px 10px 20px;
padding: 0px;
width: 169px;
height: 61px;
float: left;
background-image: url(Bilder/Button_3.jpg);
line-height: 58px;
}


#Button4 
{ 
margin: 10px 315px 10px 10px;
padding: 0px;    
width: 169px;
height: 61px;
float: left;
background-image: url(Bilder/Button_4.jpg); 
line-height: 58px;
}

#content
{
margin: 80px auto 15px auto;    
height: 489px;
width: 799px;    
background-image: url(Bilder/content.jpg);       
}

#footer
{
margin: auto auto 30px auto;
height: 36px;    
width: 799px; 
clear: both;
color: #ffffff;
text-align: center;
font-size: 100%;
background-color:#333333;
line-height: 36px;
background-image: url(Bilder/footer.jpg);
}


a.buttonhover {  
display:block;  
width:169px;   
height:61px;  
background:transparent url(Bilder/Button_2.jpg) no-repeat top left;  
}  

a.buttonhover:hover {  
display:block;  
width:169px;   
height:61px;  
background: transparent url(Bilder/Button_1.jpg) no-repeat bottom right;
}

Wie muss der Code lauten damit beim verkleinern alles zentriert bleibt!!

Vielen Danke schon mal!!

Asipak · 26.07.2009, 17:11

Deine Frage hat nichts mit PHP zu tun! Bitte Forumstruktur beachten!

Pack deine Buttons mal zwischen <div style="margin: 0px auto;"> und </div>!

Ungetestet!

Das Inline-CSS natürlich später durch eine Klasse o.ä. ersetzen, wie du es bereits für den Inhalt gemacht hast!

Btw. Was meinst du mit

Zitat:

Wenn die Auflösung niedriger gestellt wird sollen diese 4 Menü Buttons alle zentriert im Browser verkleinert werden[...]

?

Rambo02 · 26.07.2009, 19:52

Wenn ich jetzt in Firefox die Taste Strg + Mausraud nach unten scrolle wird die Ansicht verkleinert das meinte ich damit!

Asipak · 26.07.2009, 20:10

Okay!

Hast du den Code denn mal ausprobiert? Hat er dir geholfen?

Rambo02 · 27.07.2009, 12:42

Ich weis jetzt nich wo ich den Code genau einfügen soll nur in die HTML Datei oder in die CSS datei oder in beide! Bin noch ein Anfänger^^

Asipak · 27.07.2009, 12:44

Ich würde es mal hier versuchen:

Code:

<div style="margin: 0px auto;">

<div id="Button1"><a class="buttonhover" href="#"><font color="#ffffff">Home</a></div> 

<div id="Button2"><a class="buttonhover" href="#"><font color="#ffffff">News</a></div> 

<div id="Button3"><a class="buttonhover" href="#"><font color="#ffffff">Forum</a></div> 

<div id="Button4"><a class="buttonhover" href="#"><font color="#ffffff">Impressum</a></div> 

</div>

nikosch · 27.07.2009, 13:12

[MOD: verschoben]

mad · 27.07.2009, 15:33

in deinem html-template fehlen sämtliche wraps(umschließende divs), das erleichtert dir das positionieren sehr, evtl. probierst du es mal so in etwa:

HTML-Code:

<div id="center">
   <div id="menu">
   [hier knöpfe]
   </div>
   <div id="content">
      <div id="linkespalte"></div>   
      <div id="rechtespalte"></div>
   </div>
   <div id="footer">
   </div>
</div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
Reset Button bei Formularen	TeazY	PHP Tipps 2008	2	24.12.2007 14:59
Problem mit CSS Layout		HTML, Usability und Barrierefreiheit	5	15.10.2005 21:46
problem mit layout		Beitragsarchiv	12	13.10.2005 12:41
Problem mit Link		PHP Tipps 2005-2	5	09.09.2005 08:59
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
layout problem		HTML, Usability und Barrierefreiheit	10	21.12.2004 13:47
CSS Layout problem mit IE		HTML, Usability und Barrierefreiheit	6	02.11.2004 15:37
[Erledigt] per Button php in <td> laden		PHP Tipps 2004	4	26.10.2004 18:07
Ich habe eine Auswahlliste und einen Button. Wie auswerten?		PHP Tipps 2004	1	20.10.2004 16:39
[Erledigt] Problem: per klick auf Button Wert erhöhen/verringern		HTML, Usability und Barrierefreiheit	7	07.10.2004 08:31
Problem mit Layout		PHP Tipps 2004	7	27.09.2004 15:24
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11
Layout problem!!!		HTML, Usability und Barrierefreiheit	4	21.07.2004 23:58
Problem mit dynamischen Menü		PHP Tipps 2004	0	02.07.2004 13:40


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.07.2009, 19:52
Rambo02 Neuer Benutzer Registriert seit: 04.07.2009 Beiträge: 7 PHP-Kenntnisse: Anfänger	Wenn ich jetzt in Firefox die Taste Strg + Mausraud nach unten scrolle wird die Ansicht verkleinert das meinte ich damit!

26.07.2009, 20:10
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Okay! Hast du den Code denn mal ausprobiert? Hat er dir geholfen?

27.07.2009, 12:42
Rambo02 Neuer Benutzer Registriert seit: 04.07.2009 Beiträge: 7 PHP-Kenntnisse: Anfänger	Ich weis jetzt nich wo ich den Code genau einfügen soll nur in die HTML Datei oder in die CSS datei oder in beide! Bin noch ein Anfänger^^

27.07.2009, 13:12
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	[MOD: verschoben] __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

27.07.2009, 15:33
mad Neuer Benutzer Registriert seit: 07.07.2009 Beiträge: 21 PHP-Kenntnisse: Anfänger	in deinem html-template fehlen sämtliche wraps(umschließende divs), das erleichtert dir das positionieren sehr, evtl. probierst du es mal so in etwa: HTML-Code: <div id="center"> <div id="menu"> [hier knöpfe] </div> <div id="content"> <div id="linkespalte"></div> <div id="rechtespalte"></div> </div> <div id="footer"> </div> </div>