Frage stellen
ich bin ganz neu hier und blutiger Anfänger. Ich habe einem Freund zugesagt, ihm eine ganz simple Homepage zu machen und er hält mich für ein Genie.
Leider weiß ich es besser
Er hat einfach NOCH WENIGER Einsicht in den Aufbau einer Internetseite als ich.
Ich bin noch ganz am Anfang damit, mich mit dem Basteln an Homepages zu beschäftigen und habe zwar vor, dies intensiver zu erlernen (vermutlich mittels Fernstudium), aber darum soll es hier nicht gehen.
Für den Moment habe ich nur einen einzigen Wunsch: ich habe mir mit großer Mühe ein ganz einfaches Gerüst zusammengebastelt mit 3 Buttons, die ich statt übereinander NEBENEINANDER anordnen möchte.
Habe mich etwas belesen über Blockelemente, Aufzählungen und Listen, bekomme das mit meinem Wissensstand aber einfach nicht gebacken. Wichtig ist mir, dass der mouseover-Effekt mit Grafiktausch erhalten bleibt. Ohne mouseover war es mir sogar schon selbst geglückt, die Buttons nebeneinander anzuordnen.
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta name="generator" content="HTML Studio">
<style type="text/css">
#tausch-2 a {
background: url(text0-button-on.jpg) no-repeat;
display:block; width:300px; height:60px; /* Linkbereich begrenzen */
}
#tausch-2 img {
display:block; width:300px; height:60px; border:0;
}
#tausch-2 a:hover img {
visibility: hidden;
}
#tausch-2 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0;
}
* html #tausch-2 a {
margin-right:1px;
}
* html #tausch-2 a:hover {
width:0px; margin-right:0; /* Workaround fuer IE 5.01 */
}
</style>
<style type="text/css">
#tausch-1 a {
background: url(text1-button-on.jpg) no-repeat;
display:block; width:250px; height:34px; /* Linkbereich begrenzen */
}
#tausch-1 img {
display:block; width:250px; height:34px; border:0;
}
#tausch-1 a:hover img {
visibility: hidden;
}
#tausch-1 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0;
}
* html #tausch-1 a {
margin-right:1px;
}
* html #tausch-1 a:hover {
width:0px; margin-right:0; /* Workaround fuer IE 5.01 */
</style>
<style type="text/css">
#tausch-3 a {
background: url(text2-button-on.jpg) no-repeat;
display:block; width:250px; height:34px;/* Linkbereich begrenzen */
}
#tausch-3 img {
display:; width:250px; height:34px; border:0;
}
#tausch-3 a:hover img {
visibility: hidden;
}
#tausch-3 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0;
}
* html #tausch-3 a {
margin-right:1px;
}
* html #tausch-3 a:hover {
width:0px; margin-right:0; /* Workaround fuer IE 5.01 */
</style>
</head>
<body background="hintergrundI.jpg">
<div align="center">
<p id="tausch-1"><!-- oder z.B. für Menues <ul id="navigation"><li> -->
<a href="text1.html"><img src="text1-button.jpg" border=no alt="text1-button.grafik"> </a>
<p id="tausch-2"> <!-- oder z.B. für Menues <ul id="navigation"><li> -->
<a href="index.html"><img src="text0-button.jpg" border=no alt="SELFHTML Logo"> </a>
<p id="tausch-3"> <!-- oder z.B. für Menues <ul id="navigation"><li> -->
<a href="text2.html"><img src="text2-button.jpg" border=no alt="SELFHTML Logo"></a></div> </td>
<div align="center"> <img src="text0.jpg" alt=""></div>
</body>
</html>
Sicher werden die Fortgeschrittenen kopfschüttelnd etwas zum Schmunzeln haben, wenn sie meine Frage lesen, bzw. meinen aktuellen Lösungsversuch betrachten. Ich hoffe, dass ich das bei einer ähnlichen Frage eines Tages auch mal haben werde und mich dann an meine Anfänge erinnern werde ...
Ich würde mich total über Antwort freuen, weil ich das ahnungslose Rumgefummel leid bin.
(Und ich gelobe, mich dann auch nie wieder an den Aufbau einer Seite zu machen, ohne zuvor Grundkenntnisse erworben zu haben
) Micha (Playnik)
