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?
Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!
Zu der Infoseite von „Die Mo-Mo-Manie“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?
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.
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?
Ich hab da noch eine Frage: Wie kann ich es erreichen, dass auf dem Button die Schrift des Links steht?
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?
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.
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.
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.
Link habe ich nicht, da ich erstmal eine Website im Editor vorerstelle, bevor ich sie ins netz stelle.
Dann gib mir bitte die Datei.
moment: hab da was gefunden:
<!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?
Jap das geht. Nur kansnt du dann keine abgerundeten Buttons nehmen. Sondern nur gerade.
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:
<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...
<!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
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.
Die Buttons hören auf, wenn der Text zuende ist >.<,
kann man da was machen?
so ....
Standart:
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:
und hier auch noch text-decoration oder was anderes, was dann beim hover effekt passieren soll
HTML:
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
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....):
<!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
Das Div darf nciht die CSS Klasse vom Button haben
<!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)
Jetzt ist der Mausover-Effeckt weg...
Geht denn nicht irgendwie bedes?
<!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