Eine kleine Frage zu CSS

Okorin · 20. September 2008

Ich möchte gerne wissen, wie ich ein auf CSS basierendes menü mit button auf meiner Homepage einfügen kann, kann mir da jemand helfen?? Suche nämlich seit 2 Stunden nach einer Lösung ;( , bin anscheinend zu dämlich :D .

Könnt ihr mir da helfen?

Leon · 20. September 2008

EIne genauere Beschreibung, wie du dir das Vorstellst, wäre schon hilfreich. Die Buttons kannst du entweder per CSS gestalten oder auch mit einem Grafik-Programm erstellen und dann in die Page einbauen. Dann wäre es noch wichtig zu wissen, ob die Navigation mitscrollen soll oder nicht.

Okorin · 20. September 2008

Die Navigation soll veststehen, von einem Border umrandet sein und die Buttons hab ich schon gestaltet, das problem ist bei mir das einbauen-.-"

Kannst du mir da weiter helfen?

**TimWolla** · 20. September 2008

HTML

<div style="border: 1px solid black"><a href="xxxxxxx.xxx"><img src="buttonXXX.xxx" alt="xxx" /></a></div>

Der müsste deine Wünsche erfüllen. Das Div sorgt für den Border, der Rest müsste klar sein.

Okorin · 20. September 2008

Ich hab da noch eine Frage: Wie kann ich es erreichen, dass auf dem Button die Schrift des Links steht?

**TimWolla** · 20. September 2008

HTML

<div style="border: 1px solid black"><a href="xxxxxxx.xxx" style="background-image: url(buttonXXX.xxx)">Deine Text</a></div>

Das müsste gehen, ungetestet

Okorin · 20. September 2008

Die funzt net so, wie ich es will xD

Der Button ist nach dem Text abgeschnitten und der Border kann eig. weg (hab mich umentschieden, wie ich den Rausmach weiß ich, nur nich, wie ich den Ganzen Button angezeigt bekomm....

EDIT:

Ich wollte in den Button einen Mausover-Effekt einbauen, nur das klappt nit-.-" weist du da was?

**TimWolla** · 20. September 2008

Mouseover muss bei Bilder mit JS gemacht werden das ist eigtl mist. Zu dem abgeschnittenen da musst du dann Anfang und Endstück in eine Tabelle packen.

Btw Link wär hierbei gut.

Okorin · 20. September 2008

Ich glaub das geht auch mit CSS, weshalb ich diese Frage ja auch gestellt hab... Hab das ma gegoogelt und da kamen einige vorlagen, die aber fehlerhaft waren...

Link habe ich nicht, da ich erstmal eine Website im Editor vorerstelle, bevor ich sie ins netz stelle.

**TimWolla** · 20. September 2008

Zitat von KirliaKir

Ich glaub das geht auch mit CSS, weshalb ich diese Frage ja auch gestellt hab... Hab das ma gegoogelt und da kamen einige vorlagen, die aber fehlerhaft waren...

Ja ich guck mir das mal an und seh was ich machen kann.

Zitat von KirliaKir

Link habe ich nicht, da ich erstmal eine Website im Editor vorerstelle, bevor ich sie ins netz stelle.

Dann gib mir bitte die Datei.

Okorin · 20. September 2008

moment: hab da was gefunden:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover-Buttons mit CSS - Beispiel 6</title>
  <style type="text/css">
  <!--
   a {
      display:block;
      color:#000;
      background-color:#fff;
      width:100px;
      padding:7px;
      font-size:14px;
      font-family:Verdana, Arial, sans-serif;
      font-weight:bold;
      text-decoration:none;
      text-align:center;
      margin:10px;
      border:5px solid #000;
      background-image:url(hinter.gif);
      }
   a:hover {
      display:block;
      color:#fff;
      background-color:#000;
      background-image:url(hinter_on.gif);
      }
   -->
 </style>
</head>
<body>
  <h1>Viele intelligente Buttons</h1>
  <p>
   <a href="#">Button1</a>
   <a href="#">Button2</a>
   <a href="#">Button3</a>
   <a href="#">Button4</a>
  </p>
</body>
</html>

Alles anzeigen

Obs das wohl tut?

**TimWolla** · 20. September 2008

Jap das geht. Nur kansnt du dann keine abgerundeten Buttons nehmen. Sondern nur gerade.

Okorin · 20. September 2008

Doch, man muss nur die Formel ein Bissl verändern, was ich Doof an den Dingern finde, ist, dass sie sich nach der Schriftgröße richten...

Ich hab hier ma den HTML den ich jetzt verwendet habe und an dem ich noch ein bissl rumveilen werde:

HTML

<head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Rollover-Buttons mit CSS - Beispiel 6</title> <style type="text/css"> <!-- a { display:block; color:#000; background-color:#fff; width:80px; font-size:17px; font-family:Verdana, Arial, sans-serif; font-weight:bold; text-decoration:none; text-align:right; margin:10px; background-image:url(Raupy.png); } a:hover { display:block; color:#fff; background-image:url(Raupyover.png); } --> </style> </head> <body> <h1>Viele intelligente Buttons</h1> <p> <a href="#">Button1</a> <a href="#">Button2</a> <a href="#">Button3</a> <a href="#">Button4</a> </p> </body> </html>

Dann muss ich wohl einen Größeren Button machen^^

*sich über Ergebnis freu* Danke^^

_____________Posts zusammengefügt /Tim___________

sorry für doppelpost, aber wie bekomme ich die Buttons nicht nebeneinander hin..

Kann mir da wer helfen?

Wollte deswegen kein neues Thema öffnen...

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<title>Rollover-Buttons mit CSS - Beispiel 6</title> 
<style type="text/css"> 
<!-- 
a { 
display:run-in; 
color:#000; 
width:150px; 
font-size:17px; 
font-family:Verdana, Arial, sans-serif; 
font-weight:bold; 
text-decoration:none; 
text-align:right; 
background-image:url(Raupy.png); 
margin-left:0px 
} 
a:hover { 
display:run-in; 
color:#000; 
background-image:url(Raupyover.png); 
} 
--> 
</style> 
</head> 
<body> 
<style type= "text/css"> 
body {background-image: url(HG.png); 
background-color: green;} 
</style> 
<center><h1>Meine erste HTML/CSS Homepage</h1> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<hr> <br> 
<table> 
<tr> 
<td><a href="#">Button1</a></td> 
<td><a href="#">Button2</a></td> 
<td><a href="#">Button3</a></td> 
<td><a href="#">Button4</a></td> 
</tr> 


</body> 
</html>

Alles anzeigen

Leon · 20. September 2008

Ich seh jetzt das Prob nicht. Wenn ich den Code von die in ein HTML-Doc einfüge, sind bei mir die Buttons nebeneinander. Was anderes hast du aber vergessen: Den <table>-Tag musst du noch schließen.

Okorin · 20. September 2008

Die Buttons hören auf, wenn der Text zuende ist >.<,
kann man da was machen?

Fred · 21. September 2008

so ....

Standart:

CSS

.name {background:url(PFAD);width:??px;height:??px;display:block;}

dann halt noch sachen wie text-decoration einfügen und was du sonst noch möchtest
breite und höhe müssen wie dieselben wie beim Bild sein !,
wenn du nicht möchtest, das das bild aufgört wenn der text aufhört, text-align:center; hinzufügen und das bild muss dan größer sein als der text
Hover:

CSS

.name a:hover {background:url(PFAD);}

und hier auch noch text-decoration oder was anderes, was dann beim hover effekt passieren soll

HTML:

HTML

<div class=".name"><a href="PFAD" class=".name">TEXT</a></div>

wenn du dann jetzt hier auf den Link fährst, kommt der Hover Effekt .........
hoffe das war das was du wolltest

PS: war jetzt aus den Kopf und ist ein bisl spät, kann sein das da Fehler sind

Okorin · 21. September 2008

So etwas funzt net, waren ein paar fehler drin, ich habe es mitlerweile geschaft, das zeuch angezeigt zu bekommen:
So, hier das Bild, was bei mir einige Fragen aufwirft:
Hier der HTML Code dazu (hab noch weiter dran rumgeschrieben, finde aber den entscheidenden Fehler nicht....):

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<title>Rollover-Buttons mit CSS - Beispiel 6</title> 
<style type="text/css"> 
<!-- 
.button { 
display:block; 
color:#000; 
width:150px; 
high:20px;
font-size:17px; 
font-family:Verdana, Arial, sans-serif; 
font-weight:bold; 
text-decoration:none; 
text-align:right; 
background-image:url(Raupy.png); 
margin-left:0px 
} 
.button a:hover { 
display:block; 
color:#000; 
background-image:url(Raupyover.png); 
} 
--> 
</style> 
</head> 
<body> 
<style type= "text/css"> 
body {background-image: url(HG.png); 
background-color: green;} 
</style> 
<center><h1>Meine erste HTML/CSS Homepage</h1> 
<br><br><br><br><br><br><br><br><br>
<h2>Inhalt</h2>
<div class="link"><a href="www.bisafans.de">TEXT</a></div><br><br><br><br><br><br><br><br><br> 
<hr> <br> 
<center>
<div align="center" class="button">
<table>
<tr> 
<td><a class="button" href="#">Home</a></td> 
<td><a class="button" href="#">Über den FC</a></td> 
<td><a class="button" href="#">Member</a></td> 
<td><a class="button" href="#">Bisafans</a></td> 
</tr>
</table> 
</div>
</center>
</body> 
</html>

Alles anzeigen

Findet ihr da einen Fehler?
Wie gesagt, die seite wurde mir dann wie oben im Bild angezeigt....
LG
Kirrrrlia

**TimWolla** · 21. September 2008

Das Div darf nciht die CSS Klasse vom Button haben

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<title>Rollover-Buttons mit CSS - Beispiel 6</title> 
<style type="text/css"> 
<!-- 
.button { 
display:block; 
color:#000; 
width:150px; 
high:20px;
font-size:17px; 
font-family:Verdana, Arial, sans-serif; 
font-weight:bold; 
text-decoration:none; 
text-align:right; 
background-image:url(Raupy.png); 
margin-left:0px 
} 
.button a:hover { 
display:block; 
color:#000; 
background-image:url(Raupyover.png); 
} 
--> 
</style> 
</head> 
<body> 
<style type= "text/css"> 
body {background-image: url(HG.png); 
background-color: green;} 
</style> 
<center><h1>Meine erste HTML/CSS Homepage</h1> 
<br><br><br><br><br><br><br><br><br>
<h2>Inhalt</h2>
<div class="link"><a href="www.bisafans.de">TEXT</a></div><br><br><br><br><br><br><br><br><br> 
<hr> <br> 
<center>
<div align="center">
<table>
<tr> 
<td><a class="button" href="#">Home</a></td> 
<td><a class="button" href="#">Über den FC</a></td> 
<td><a class="button" href="#">Member</a></td> 
<td><a class="button" href="#">Bisafans</a></td> 
</tr>
</table> 
</div>
</center>
</body> 
</html>

Alles anzeigen

In Zeile 40 muss das class="button" weg (Mein Code ist berichtigt)

Okorin · 21. September 2008

Jetzt ist der Mausover-Effeckt weg...
Geht denn nicht irgendwie bedes?

**TimWolla** · 21. September 2008

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<title>Rollover-Buttons mit CSS - Beispiel 6</title> 
<style type="text/css"> 
<!-- 
.button { 
display:block; 
color:#000; 
width:150px; 
high:20px;
font-size:17px; 
font-family:Verdana, Arial, sans-serif; 
font-weight:bold; 
text-decoration:none; 
text-align:right; 
background-image:url(Raupy.png); 
margin-left:0px 
} 
.button:hover { 
display:block; 
color:#000; 
background-image:url(Raupyover.png); 
} 
--> 
</style> 
</head> 
<body> 
<style type= "text/css"> 
body {background-image: url(HG.png); 
background-color: green;} 
</style> 
<center><h1>Meine erste HTML/CSS Homepage</h1> 
<br><br><br><br><br><br><br><br><br>
<h2>Inhalt</h2>
<div class="link"><a href="www.bisafans.de">TEXT</a></div><br><br><br><br><br><br><br><br><br> 
<hr> <br> 
<center>
<div align="center">
<table>
<tr> 
<td><a class="button" href="#">Home</a></td> 
<td><a class="button" href="#">Über den FC</a></td> 
<td><a class="button" href="#">Member</a></td> 
<td><a class="button" href="#">Bisafans</a></td> 
</tr>
</table> 
</div>
</center>
</body> 
</html>

Alles anzeigen