• 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
 
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
 
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>
 
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?
 
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>
 
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.
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben