a Tag mit Hover Bilder neben einadner im Div Tag

[SonGoku]

Hallo, ich habe ein kleines Problem mit der Darstellung 2 Links die ich mit verschiedenen Bilder, Mousehover Effekt gegeben habe. diese neben einander darzustellen. Die macht er mir entweder neben einander oder übereinander wenn ich das versuche :/ Da kommen noch ein paar mehr Links mit dem selben Effekt naben, ich denke es werden insgesamt 4 bis 6 Stück. es wäre hilfreich wenn mir jemand zeigen könnte wie ich die Nebeneinadner Darstellen kann. zb in Tabellen würde das so aus sehen

<table>
<tr>
<td>xxx</td><td>xxx</td><td>xxx</td><td>usw</td>
</tr>
</table>

und hier meins bis jetzt
HTML

<div id="header">
    <a class="test" href="http://xxx.xx" alt="xxx" title="xxx"><span>text wenn kein bild</span></a>
    <a class="test01" href="http://www.xxx.xx" alt="xxx" title="xxx"><span>text wenn kein bild</span></a>
    </div>

CSS

#header {
    background-color: #006699;
    text-align: left;
    padding: 10px 0 10px 10px;
    margin:0px;
    }

.test span { display: none; } 
.test:link, .test:visited { display: block; width: 80px; height: 80px; background: url(images/bild1.png); } 
.test:hover, .test:active, .test:focus { background-image: url(images/bild2.png); }

.test1 span { display: none; } 
.test1:link, .test1:visited { display: block; width: 80px; height: 80px; background: url(images/bild3.png); } 
.test1:hover, .test1:active, .test1:focus { background-image: url(images/bild4.png); }

 

[hokage555]

Also xD

ersteinmal muss ich sagen, dass das was du schon versucht hast nicht schlecht ist.
ich änder trotzdem noch ein paar dinge ab und verbessere etwas ;-)
weil anscheinend klappt es so ja nicht ;-)

also...
wenn ich alles verstanden habe meinst du eine horizontale mienuleiste mit hovereffekt. also sowas wie hier (drop down wegdenken) :
Faszination Internet - Home

was hast du in deinem letzten threat erfahren?
richtig, menues werden immer als listen ausgezeichnet.

also schreibst du so:

<ul id="header">  [B][COLOR=Black]//warum eig. header und nicht menue???[/COLOR][/B]
<li class="link"> <a href="###.html"> text1 </a> </li>
<li class="link"> <a href="###.html"> text2 </a> </li>
<li class="link"> <a href="###.html"> text3 </a> </li>
<li class="link"> <a href="###.html"> text4 </a> </li>
</ul>

in html war es das auch schon.

<span>text wenn kein bild</span>

das verstehe ich nicht. meinst du einen altanativen text, wenn der benutzer im browser images abgeschaltet hat? wenn ja, dann musst du diesen unter dem attribut alt="..." eintragen.
wenn du allerdings meinst, dass du den text auf das hintergrundbild selber schreibst (mit bildbearbeitungsprogramm), wovon ich dir sehr abraten würde, dann muss an diese stelle auch der text des buttons. eben aus oben genanntem grund.
ABER: was macht dieser span tag da??? der ist total überflüssig.

jetzt zu css:

#header {
    background-color: #006699;
    text-align: left; [COLOR=Red][COLOR=Black][B]/[/B][B]/left??? bei horizontalen menus sollte man zentrieren also center. sieht besser aus.[/B][/COLOR][/COLOR]
    padding: 10px 0 10px 10px; [COLOR=Black][B]//wofür brauchst du padding??? ebenfalls überflüssig[/B][/COLOR]
    margin:0px; [B][COLOR=Black]//löschen.
    width:***; //für magrin:0 auto brauchst du eine breite.
    [/COLOR][COLOR=Black]margin:0 auto; [/COLOR][COLOR=Black]//zentriert das menue im viewport[/COLOR][/B]
   [B][COLOR=Black]list-style-type:none;[/COLOR] //keine aufzählungszeichen im menue[/B] 
    }

[B].link a{
float:left; //innerhalb des menus fließen die buttons/links ausgehend von links
width:***;//größenangaben für einzelnen butten individuell wählen (solte gleich dem hintergrundpic sein)
height:***; 
background-image:url(bild1.jpg);//hintergrundpic der einzelnen links
}

.link:hover a{
float:left; //innerhalb des menus fließen die buttons/links ausgehend von links
width:***;//größenangaben für einzelnen butten individuell wählen (solte gleich dem hintergrundpic sein)
height:***; 
background-image:url(bild2.jpg);//hoverhintergrundpic der einzelnen links
}[/B]

so also den rest von deinem css code benötigst du nicht.
hoffe ich konnte dir helfen und habe dein problem richtig verstanden.

grüße hokage

 

[SonGoku]

Hallo,
naja eigentlich meine ich das so wie diese Beipsiel, nur das die Bilder neben einander sollen.

 

[Efchen]

Bilder stehen eigentlich immer nebeneinander, wenn man ihnen nichts anderes sagt.

 

[hokage555]

richtig.

also lass das display:block; weg und die pics werden nebeneinander angezeigt.

naja eigentlich meine ich das so wie diese Beipsiel, nur das die Bilder neben einander sollen.

ich weiß nicht was da so anders ist, im gegensatz zu meinem beispiel... außer halt das pic und der text, den ich dem link noch gegeben habe.

 

[SonGoku]

@ hokage555 Das Beispiel ist ja von mir, ich wollte nur die Bilder nebeneinander haben. Das hat ja jetzt geklappt dank dir ;) Die anderen Danke ich natürlich auch.

 

[hokage555]

gerne xD

man freut sich doch, wenn man helfen kann :grin: