Unterstrich zwischen den Buttons?!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angebot
benutzen
bild
browser
button
code
datei
dokument
filmen
gegensatz
image
jemand
liste
nette idee
phase
position
resultat
stehen
team
unterschied
-
so, heut bin ich mal am basteln einer homepage. paar buttons gemacht und gleich in die page eingebunden. doch was sehe ich? zwischen jedem button ist ein unterstrich?! ich habs mit
a:link { text-decoration: none; }
versucht. aber zwischen dem ersten und dem letzten button ist immernoch ein unterstrich. außerdem ist zwischen den buttons ein abstand den ich nicht wegkriege
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Blabla </title> <!-- home= new Image(); home.src = "buttons/home.gif" angebote= new Image(); angebote.src = "buttons/angebote.gif" team= new Image(); team.src = "buttons/team.gif" links= new Image(); links.src = "buttons/links.gif" --> <style type="text/css"> a:link { text-decoration: none; } </style> </head> <body> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100"> <!-- Header --> </td> </tr> <tr> <td width="100%" height="50"> <div> <a href="/" alt="Home" onmouseover="home.src='buttons/home-if.png';" onmouseout="home.src='buttons/home.png';"> <img src="buttons/home.png" alt="Home" border="0" width="100" height="50" name="home"> </a> <a href="angebote" alt="Angebote" onmouseover="angebote.src='buttons/angebote-if.png';" onmouseout="angebote.src='buttons/angebote.png';"> <img src="buttons/angebote.png" alt="Angebote" border="0" width="100" height="50" name="angebote"> </a> <a href="team" alt="Team" onmouseover="team.src='buttons/team-if.png';" onmouseout="team.src='buttons/team.png';"> <img src="buttons/team.png" alt="Team" border="0" width="100" height="50" name="team"> </a> <a href="links" alt="Links" onmouseover="links.src='buttons/links-if.png';" onmouseout="links.src='buttons/links.png';"> <img src="buttons/links.png" alt="Links" border="0" width="100" height="50" name="links"> </a> </div> </td> </tr> <tr> <td width="100%" height="800"> <!-- Content --> </td> </tr> <tr> <td width="100%" height="10"> <!-- Footer --> </td> </tr> </table> </body> </html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo druckertinte,
die Pseudoklasse :link spricht nur Hyperlinks an, die noch nicht geklickt wurden. [siehe selfhtml]
Wobei ich nicht verstehe, was du mit "zwischen jedem button ist ein unterstrich" sagen willst. Am besten du postest einen Link zu der Seite, ferner ein Bild.
Button = Hyperlink?
Grundlegend hat ein Browser bestimmte Abstände vorgesetzt, die kann man mit
"reseten".* {margin:0; padding:0;}
-
hi,
wie werktags schon sagte, bedeutet :link nur "noch nicht angeklickter link" mach also aus a:link einfach nur a. Bei dir hat sich anscheinend in die <a> </a> blöcke direkt hinter das ende von <img> ein Leerzeichen eingeschlichen. Dies interpretiert der Browser nun zum Link zugehörig und zeigt für das Leerzeichen dann eine Unterstreichung an, sobald du die Seite, auf die der Link zeigt schon einmal besucht hast.
Generell vielleicht noch als Hinweis: es wäre vielleicht etwas praktischer, deine Idee mit CSS statt mit Javascript umzusetzen.
Man könnte dafür pro Menüpunkt ein Bild erstellen, in dem links das Ursprungsbild und direkt rechts daneben pixelgenau das Bild, welches erscheinen soll, wenn du mit der Maus über den Link fährst, liegt.
So etwa:
_________________________
| -----normal ---- | ------ hover ---- |
|____________|____________|
Diese Bilder bindest du dann jeweils einzeln bei jedem Link als background-image ein.
Per CSS :hover, :active, :link, und :visited müsstest du dann nur das Hintergrundbild entsprechend verschieben also etwa:
a {display:block;height:50px;width:100px;} a:hover, a:active{background-position:50px 0px} a:link, a:visited{background-position:0px 0px}
Das hat - wie gesagt, dass du einerseits komplett auf javascript verzichten kannst und dir die Schreibarbeit sparst, für jeden Link ein neues Bilder-Paar anzulegen -
ich weiß jetzt woran es lag. wenn ich den code so schreibe:
<img src="buttons/home.png" alt="Home"><img src="buttons/angebote.png" alt="Angebote"><img src="buttons/team.png" alt="Team"><img src="buttons/links.png" alt="Links">
wird alles korrekt angezeigt, schreibe ich es aber so (also mit absätzen):
<img src="buttons/home.png" alt="Home"> <img src="buttons/angebote.png" alt="Angebote"> <img src="buttons/team.png" alt="Team"> <img src="buttons/links.png" alt="Links">
kommen diese komischen leerzeichen. auch bei nicht verlinkten bildern!
so meine frage: warum kommen die leerzeichen (nein im quelltext sind keine!) und wie kriege ich sie weg? denn so kann das nicht bleiben! ein bisschen ordnung muss sein
-
wenn der Code mit dem img eingerückt ist, dann gilt auch das evtl als Leerzeichen
Du könnstest es im Quellcode als Variable ablegen,
so dass es bei Aufruf dann doch "nebeneinander" steht
als PHP:
<?
$liste[0] = "<img ...>";
$liste[1] = "<img ...>";
$liste[2] = "<img ...>";
$liste[3] = "<img ...>";
echo $liste[0].$liste[1].$liste[2].$liste[3].
?>
das geht auch per Javascript (ohne PHP)
<script type="text/javascript">
var image1 = "<img ...>";
var image2 = "<img ...>";
var image3 = "<img ...>";
document.write( image1 + image1 + image3);
</script>
oder mit Array im JS
Beitrag zuletzt geändert: 23.11.2009 17:27:53 von werbesmart -
nette idee, aber eig. wollte ich noch kein php in dieser phase benutzen. kennt jemand eine andere lösung?
-
druckertinte schrieb:
nette idee, aber eig. wollte ich noch kein php in dieser phase benutzen. kennt jemand eine andere lösung?
PHP verarbeitet Informationen, ohne dass es der User sieht. Für den Browser ist es egal, ob er ein HTML-Dokument anfordert und darstellt, oder eine PHP-Seite öffnet. Bei PHP besteht jedoch der Unterschied, dass die Informationen, die in der Datei stehen -im Gegensatz zum HTML-Dokument- nicht zum Client gesendet werden, sondern erst das PHP verarbeitet wird, und das Resultat zum Client gesendet wird. Das kein ein Bild, ein Film, eine Flash-Datei, oder in deinem Fall eben ein HTML-Dokument sein. Also: mach, was Werbesmart gesagt hat, mit PHP ist das technisch unmöglich. -
drafed-map schrieb:
druckertinte schrieb:
nette idee, aber eig. wollte ich noch kein php in dieser phase benutzen. kennt jemand eine andere lösung?
PHP verarbeitet Informationen, ohne dass es der User sieht. Für den Browser ist es egal, ob er ein HTML-Dokument anfordert und darstellt, oder eine PHP-Seite öffnet. Bei PHP besteht jedoch der Unterschied, dass die Informationen, die in der Datei stehen -im Gegensatz zum HTML-Dokument- nicht zum Client gesendet werden, sondern erst das PHP verarbeitet wird, und das Resultat zum Client gesendet wird. Das kein ein Bild, ein Film, eine Flash-Datei, oder in deinem Fall eben ein HTML-Dokument sein. Also: mach, was Werbesmart gesagt hat, mit PHP ist das technisch unmöglich.
ich weiß was php ist
nur wollte ich die seite erst im html aufbauen bevor ich php benutze. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
