• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Buttons ausrichten. Nur wie genau?

N

n1ghtl1ve

Neues Mitglied
Code: 
  <style type="text/css">

  	body {
	background-image: url(image/bg.jpg);
	}
	{
 margin: 0;
 padding: 0;
 width:100%;
 height:100%;
 }
 	#header {
	background-image: url(image/header.jpg);
	background-repeat:no repeat;
	height:125px;
	width:335px;
	margin-left:auto;
	margin-right:auto;
	margin-top:27px;
	}
	  #faq {
  background-image: url(image/faq.jpg);
	background-repeat:no repeat;
		height:24px;
		 width:97px;
		 margin-left:720px;
		 margin-top:-24px;
  }
  #home {
  background-image: url(image/home.jpg);
 background-repeat: no-reapeat;
	height:24px;
	 width:97px;
 margin-left:510px;
		 margin-top:50px;
  }
  #partner {
  background-image: url(image/partner.jpg);
	background-repeat:no repeat;
  height:24px;
   width:97px;
	margin-left:825px;
	margin-top:-24px;
  }
  #impressum {
  background-image: url(image/impressum.jpg);
	background-repeat:no repeat;
	height:24px;
	 width:97px;
margin-top:-24px;
margin-left:930px;
  }
  #sms {
  background-image: url(image/sms-stuff.jpg);
	background-repeat:no repeat;
	height:24px;
	 width:97px;
	margin-left:615px;
	margin-top:-24px;
	}
 
 	#contenttop {
	background-image: url(image/contenttop.jpg);
	background-repeat: no-repeat;
		height:22px; 
		width:527px;
		margin-left:auto;
		margin-right:auto;
		margin-top: 0px;
		}
	#content {
		background-image: url(image/content.jpg);
	background-repeat: no-repeat;
	height: 521px;
	width: 526px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	}
	
 #footer {
  background-image: url(image/footer.jpg);
	background-repeat:no repeat;
	height:58px;
	width:561px;
		margin-left:auto;
	margin-right:auto;
	margin-top:0px;
  }



  </style>

Der Code aber mit Pixeln verändert sich das eben je nach Auflösung wie kriege ich es besser hin das es sich nicht verschiebt?

Live Beispiel
 
Werbung:
Es macht keinen Sinn, dass du für jeden Button/Link einen Div verwendest und diesen individuell positionierst.
Verwende besser eine Liste wie hier unter Ziffer 2 erläutert: Link-Buttons und floate die li's.
 
Hmm was stimmt daran nich:
Code: 
<body>
<div id="buttons">
<ul>
<li><a> class="home" href:"style1.php"></a></li>
<li><a> class="sms" href:"style2.php"></a></li>
<li><a> class="faq" href:"style3.php"></a></li>
<li><a> class="partner" href:"style4.php"></a></li>
<li><a> class="impressum" href:"style5.php"></a></li>
</ul>
<br style="clear: both;">
</div>
<div id="impressum"></div>
<div id="contenttop"></div>
<div id="content"></div>
<div id="footer"></div>

</body>

Live Beispiel
 
Werbung:
Ja, und zwar machst du statt einem Gleichheitszeichen ("=") einen Doppelpunkt nach dem Attribut "href". Und noch dazu schließt du das a-Tag zu früh und vergisst einen Linktext zu definieren:
HTML: 
<li><a class="home" href="style1.php">Linktext</a></li>
 
Code: 
<body>
<div id="buttons">
<ul>
<li><a> class="home" href="style1.php">Home</a></li>
<li><a> class="sms" href="style2.php">SmS</a></li>
<li><a> class="faq" href="style3.php">FAQ</a></li>
<li><a> class="partner" href="style4.php">Partner</a></li>
<li><a> class="impressum" href="style5.php">Impressum</a></li>
</ul>
<br style="clear: both;">
</div>
<div id="impressum"></div>
<div id="contenttop"></div>
<div id="content"></div>
<div id="footer"></div>

</body>
geht nich :( gibt nur text aus
 
Falsch:
Code: 
<li><a> class="home" href="style1.php">Home</a></li>

Richtig:
Code: 
<li><a class="home" href="style1.php">Home</a></li>
 
Werbung:
Klappt doch noch nich so ganz (sorry bin anfänger :oops: )
Code: 
#buttons ul
{
margin:0;
padding:0;	
}	
 
#buttons li
{
margin-left: 200px;
}
 
#navi a
{
display: block;
width:97;
height:24px;
}

a.home:link, a.home:visited
{
background-image: url(image/home.jpg);
}

bindet url nich ein selbes Live-Beispiel wie oben :)
 
Würde mal vermuten, dass das angegebene Bild nicht unter diesem Pfad liegt. Gibt es denn eine Datei "home.jpg" die in einem Unterverzeichnis "images" ausgehend von der CSS-Datei liegt?
 
Werbung:
In exakt dieser Schreibweise? Liegt die CSS-Datei im selben Verzeichnis wie die HTML-Datei? Zeig mal deine Ordnerstruktur.
 
Des is im Moment noch eine html Datei. Extrahiere die später raus.... so bin ich schneller^^. Es gibt die ganzen style1-5.php Datein die html Datei und den Ordner image für meine Bilder. Mehr nich aber ich stell mal den kompletten code rein:

Code: 
  <style type="text/css">

  	body {
	background-image: url(image/bg.jpg);
	}
	{
 margin: 0;
 padding: 0;
 width:100%;
 height:100%;
 }
 	#header {
	background-image: url(image/header.jpg);
	background-repeat: no-repeat;
		height:125px; 
		width:335px;
		margin-left:auto;
		margin-right:auto;
		margin-top: 27px;
		}
		
#buttons ul
{
margin:0;
padding:0;	
}	
 
#buttons li
{
margin-left: 200px;
}
 
#navi a
{
display: block;
width:97;
height:24px;
}

a.home:link, a.home:visited
{
background-image: url(image/home.jpg);
}



#contenttop {
		background-image: url(image/contenttop.jpg);
	background-repeat: no-repeat;
	height: 22px;
	width: 527px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 45px;
	}




	#content {
		background-image: url(image/content.jpg);
	background-repeat: no-repeat;
	height: 521px;
	width: 526px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	}
	
 #footer {
  background-image: url(image/footer.jpg);
	background-repeat:no repeat;
	height:58px;
	width:561px;
		margin-left:auto;
	margin-right:auto;
	margin-top:0px;
  }



  </style>

</head>
<body>
<div id="header"></div>
<div id="buttons">
<ul>
<li><a class="home" href="style1.php"></a></li>
<li><a class="sms" href="style2.php"></a></li>
<li><a class="faq" href="style3.php"></a></li>
<li><a class="partner" href="style4.php"></a></li>
<li><a class="impressum" href="style5.php"></a></li>
</ul>
<br style="clear: both;">
</div>
<div id="impressum"></div>
<div id="contenttop"></div>
<div id="content"></div>
<div id="footer"></div>

</body>
</html>
 
Werbung:
Code: 
a.home:link, a.home:visited
{
background-image: url(image/home.jpg);
background-repeat: no-repeat;
width:97;
height:24px;
display: block;
}

li ggf. noch floaten.
 
Werbung:
Und verwende ein Browser-Addon wie Firebug, die Entwicklertools oder Dragonfly um das Problem direkt anzuschauen. Ohne Link zu der betroffenen Seite kann dir hier niemand helfen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben