✔ Bilder werden nicht horizontal angezeigt

P

Pielo

Mitglied
Tagchen ich bins mal wieder mit einer sicher ziemlich dummen Frage, aber ich find nirgens ne lösung, bzw ich weiß nicht so genau nach was für Schlüsselworter ich suchen muß. Hab schon soo einiges probiwert aber ohne Erfolg.

Und zwar wollte ich eine Navigationsleiste machen aber irgendwie werden die Bilder für die Links senkrecht angezeigt und nich horizontal ich weis einfach nicht warum. :(

hier mal mein code:

Code: 
div.navileiste {
  position: absolute;
  top: 60px;
  left: 50px; 
  width: 750px; 
  height:600px; 
  z-index:2;
  }

a.link1 {
display: block;
width:177px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link1.jpg) no-repeat;
}

a.link1:hover {
display: block;
width:177px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link1over.jpg) no-repeat;
}

a.link1:active {
display: block;
width:177px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link1klick.jpg) no-repeat;
}

a.link2 {
display: block;
width:85px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link2.jpg) no-repeat;
}

a.link2:hover {
display: block;
width:85px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link2over.jpg) no-repeat;
}

a.link2:active {
display: block;
width:85px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link2klick.jpg) no-repeat;
}

a.link3 {
display: block;
width:154px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link3.jpg) no-repeat;
}

a.link3:hover {
display: block;
width:154px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link3over.jpg) no-repeat;
}

a.link3:active {
display: block;
width:154px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link3klick.jpg) no-repeat;
}

a.link4 {
display: block;
width:74px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link4.jpg) no-repeat;
}

a.link4:hover {
display: block;
width:74px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link4over.jpg) no-repeat;
}

a.link4:active {
display: block;
width:74px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link4klick.jpg) no-repeat;
}

a.link5 {
display: block;
width:185px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link5.jpg) no-repeat;
}

a.link5:hover {
display: block;
width:185px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link5over.jpg) no-repeat;
}

a.link5:active {
display: block;
width:185px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link5klick.jpg) no-repeat;
}

 
 
    	</style>
   
       </head>
 
    <body>

<div class="navileiste">
 	 <a class="link1" href="http://www.tutorials.de/forum/css/..."></a>
 	 <a class="link2" href="http://www.tutorials.de/forum/css/..."></a>
 	 <a class="link3" href="http://www.tutorials.de/forum/css/..."></a>
 	 <a class="link4" href="http://www.tutorials.de/forum/css/..."></a>
 	 <a class="link5" href="http://www.tutorials.de/forum/css/..."></a>
</div>

    </body>

</html>

HIER mal zur Veranschaulichung


Ist sicher wieder nur ein totaler Leichtsinnsfehler, aber es wäre voll lieb wenn mir einer auf die Sprünge helfen könnte.

***lg Pielo***
 
Hi,

tausch mal display:block gegen float:left aus, denn mit Ersterem erzeugen die Elemente einen Absatz im Textfluß.

Außerdem lassen sich die CSS-Regeln deutlich abspecken:
CSS: 
a.link1 {
float:left;
width:177px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link1.jpg) no-repeat;
}

a.link1:hover {
background: url(http://www.pielos-page.de/MIX/Myspace/Link1over.jpg) no-repeat;
}

a.link1:active {
background: url(http://www.pielos-page.de/MIX/Myspace/Link1klick.jpg) no-repeat;
}

a.link2 {
float:left;
width:85px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link2.jpg) no-repeat;
}

a.link2:hover {
background: url(http://www.pielos-page.de/MIX/Myspace/Link2over.jpg) no-repeat;
}

a.link2:active {
background: url(http://www.pielos-page.de/MIX/Myspace/Link2klick.jpg) no-repeat;
}

a.link3 {
float:left;
width:154px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link3.jpg) no-repeat;
}

a.link3:hover {
background: url(http://www.pielos-page.de/MIX/Myspace/Link3over.jpg) no-repeat;
}

a.link3:active {
background: url(http://www.pielos-page.de/MIX/Myspace/Link3klick.jpg) no-repeat;
}

a.link4 {
float:left;
width:74px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link4.jpg) no-repeat;
}

a.link4:hover {
background: url(http://www.pielos-page.de/MIX/Myspace/Link4over.jpg) no-repeat;
}

a.link4:active {
background: url(http://www.pielos-page.de/MIX/Myspace/Link4klick.jpg) no-repeat;
}

a.link5 {
float:left;
width:185px; 
height:97px;
background: url(http://www.pielos-page.de/MIX/Myspace/Link5.jpg) no-repeat;
}

a.link5:hover {
background: url(http://www.pielos-page.de/MIX/Myspace/Link5over.jpg) no-repeat;
}

a.link5:active {
background: url(http://www.pielos-page.de/MIX/Myspace/Link5klick.jpg) no-repeat;
}

mfg Maik
 
wow, hammer so schnell hab ich aber auch noch nirgens ne antwort bekommen!

Das Prob ist jetzt nur das auf einmal alles weg ist. Quasi nur noch ne leere Seite zu sehn :confused:

[Edit] die Links sind aber da wenn man über die Stelle fährt wo die Bilder eigendlich sein müssten. komisch
 
Zuletzt bearbeitet:
Pielo hat gesagt.:
Das Prob ist jetzt nur das auf einmal alles weg ist. Quasi nur noch ne leere Seite zu sehn :confused:
Zum Vergrößern anklicken....
In deiner verlinkten Test-Seite hat sich bislang an der Ausgangssituation schon mal nichts verändert.

Ansonsten ist dir wohl "lokal" beim Ändern irgendwo ein (Syntax-)Fehler unterlaufen, denn bei mir ist alles da und an seinem rechten Fleck :-)

Test3.jpg


mfg Maik
 
ohh ja sorry da hab ich ein ; vergessen gehabt!!

DANKE für deine schnelle hilfe Und für den hilfreichen Tip mit dem verkürzen!!

***lg Pielo***
 
Ich habe das Thema noch mal geöffnet weil ich doch noch nicht soo 100%ig zufrieden bin. Und zwar gibt es doch auch ne möglichkeit mit der ich die ganze Menüleiste als eine Grafik (oder 3 Grafiken für hover und active noch eine) verwenden kann und so das laden von insgesammt 9 Grafigen zu vermeiden und damit die aussetzer die maschmal kommen zu verhindern. ich weis jetzt nur nicht genau nach was ich da suchen soll. Hab sie Sufu schon benutzt aber bin anscheint zu blöd da das richtigte rauszusuchen. Wär lieb wenn du mir da nochmal nen Tip oder nen Link geben könntest.

***lg Pielo***
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück