Hilfe bei Tutorial
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
blocken
button
club
code
dank
datei
display
ende
fang
frage
http
image
internet
list
part
position
seminar
type
url
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
http://www.html-seminar.de/stylesheets_in_html_einbinden.htm
Das HTML-Seminar kann ich auch ganz allgemein empfehlen, damit habe ich das Zeug auch gelernt. Fang lieber richtig von vorne an und versuche ein paar Sachen selbst zu machen, dann verstehst du auch, was das was du da aus dem Internet kopierst, überhaupt macht und kannst es dann für deine eigenen Bedürfnisse selbst anpassen, ohne jedesmal nachfragen zu müssen. -
Danke,
hab noch eine Frage:
Wie kann ich dort einstellen, dass jeder button eine andere ( von mir festgelegte ) Größe hat, oder noch besser, dass jeder button seine Orginalgröße hat? -
ist mit html verbunden und wird auch eingebunden<div id="navi"> <ul> <li> <a class="button1" href="#"></a> </li> <li> <a class="button2" href="#"></a> </li> </ul> <br style="clear: both;"> </div><!--Ende Navi--> -
mhh... ich frage vielleicht doch einfach ganz direkt:
Was habe ich hier falsch gemacht: http://www.trainercard-club.12hp.de/TOP.php ?
Seitenquelltext:
<html> <meta http-equiv="content-type" content= "text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="navi.css" type="text/css" rel="stylesheet" /> <link rel="shortcut icon" href="images/Icon.ico" type="image/x-icon" /> </head> <body> <div align="ceter"> <table style="text-align: left; width: 100px; border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="vertical-align: top;"><div align="left"><img width="47%" alt="HEADER" src="http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/header-1.png"></td> </tr><br> <tr> <td style="vertical-align: top;"><div align="left"><img width="100%" alt="HEADER" src="http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/main-header.png"> </td> </tr> <tr> <td style="vertical-align: top;"><div align="center"> <div id="navi"> <ul> <li> <a class="button1" href="http://trainercard-club.de/"></a> </li> <li> <a class="button2" href="http://trainercard-club.12hp.de/guide.php"><a> </li> <li> <a class="button3" href="http://trainercard-club.12hp.de/Tutorials.php"></a> </li> <li> <a class="button4" href="http://trainercard-club.12hp.de/Board/"></a> </li> <li> <a class="button5" href="http://www.trainercard-club.12hp.de/wiki/index.php/Hauptseite"></a> </li><br style="clear: both;"></div></ul> <script type="text/javascript" language="JavaScript"> <!-- Bild01 = new Image(); Bild01.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif"; Bild02 = new Image(); Bild02.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2b.gif"; Bild03 = new Image(); Bild03.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3b.gif"; Bild04 = new Image(); Bild04.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4b.gif"; Bild05 = new Image(); Bild05.src = "http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5b.gif"; //--> </script> <br style="clear: both;"> </div><!--Ende Navi--> </td> </tr> <tr> <td style="vertical-align: top;"><div align="center"> <script language="JavaScript1.1" type="text/javascript" src="http://www.contaxe.com/go/go.js?atp=bnr&c=43255&pi=17913"> </script> </td> </tr> </tbody> </table> </div>
CSS Datei:(navi.css):
#navi ul { margin: 0; padding: 0; list-style-type: none; } #navi li { float: left; margin-left: 0px; } #navi a { display: block; width: 153px; height: 51px; } a.button1:link, a.button1:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1a.gif); } a.button1:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif); } a.button2:link, a.button2:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2a.gif); } a.button2:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2b.gif); } a.button3:link, a.button3:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3a.gif); } a.button3:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3b.gif); } a.button4:link, a.button4:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4a.gif); } a.button4:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4b.gif); } a.button5:link, a.button5:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5a.gif); } a.button5:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5b.gif); }
Also ich will das so haben, dass es dann so aussieht, als wäre die navigation im Bild drinnen.
Wär nett wenn mir einer erklärt, wie ich das anstelle. -
Die Breite deiner Buttons wird von dem
übernommen. Du müstest das rausmachen uns stattdessen bei jedem einzelnen#navi a {width: 153px;}
die Weite und Position des Buttons angeben.a.buttonxy:link, a.buttonxy:visited
Bsp:
a.button2:link, a.button2:visited { background-image: url("http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2a.gif"); position: absolute; top: 333px; width: 176px; }
Das ist zumindest das einzige, was mir dazu einfällt... -
Hab es mal versucht....
Jetzt sieht die CSS Datei so aus:
#navi ul { margin: 0; padding: 0; list-style-type: none; } #navi li { float: left; margin-left: 0px; } a.button1:link, a.button1:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1a.gif); position: absolute; top: 153px; width: 51px; } a.button1:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-1b.gif); position: absolute; top: 153px; width: 176px; } a.button2:link, a.button2:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2a.gif); position: absolute; top: 333px; width: 176px; } a.button2:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-2b.gif); position: absolute; top: 333px; width: 176px; } a.button3:link, a.button3:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3a.gif); position: absolute; top: 333px; width: 176px; } a.button3:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-3b.gif); position: absolute; top: 333px; width: 176px; } a.button4:link, a.button4:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4a.gif); } a.button4:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-4b.gif); position: absolute; top: 333px; width: 176px; } a.button5:link, a.button5:visited { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5a.gif); position: absolute; top: 333px; width: 176px; } a.button5:hover { background-image: url(http://www.trainercard-club.12hp.de/Images/Trainercard-club-homepage-parts/button-5b.gif); position: absolute; top: 333px; width: 176px; }
Doch jetzt werden die Bilder überhaupt nichtmehr angezeigt.
http://trainercard-club.12hp.de/vorlage_n.php -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
