Mehrere Links auf einem Skyscraper mit css?

B

baerwurz

Angesehenes Mitglied
Hi Leute, ich habe einen Skyscarpaer 160 * 600 Pixel.

Hier möchte ich jetzt verschiedene Links einblenden. Textlinks die quasi über dem Banner liegen.

Jetzt könnte ich ja für jeden einzelnen Textlink eine eigene CSS Klasse mit absoluter Ausrichtung positionieren.

Geht das evtl auch einfacher? Der Abstand der einzelnen Links müsste nach oben immer z.b. 25 px sein.

Anbei mal der Banner, damit Ihr vielleicht eher versteht was ich meine. Die Links sollen neben dem jeweiligen Einkaufswagen erscheinen.

zum Shop >>

Muss ich jeden einzeln ausrichten oder kann ich das anders lösen? Anhang anzeigen 2

 
CODE <p style="margin-top:5px;">Link1</p>
<p style="margin-top:25px;">Link2</p>
<p style="margin-top:25px;">Link3</p>


quick and dirty, vielleicht hilfts
rolleyes.gif
 
Einfach den Skyscraper als Background Bild nehmen und danach die Links mit CSS positionieren. Absolute ist dabei nicht nötig.
 
<div id="rechts_unten">
<img src="/upload/fussballschuhe-kaufen.jpg" alt="Fußballschuhe kaufen">
</div>

So im css habe ich rechts_unten jetzt so ausgerichtet dass der banner an der gewünschten Stelle erscheint.

Jetzt müssen ja die einzelnen Links im Banner positioniert werden.

Da kommt jetzt die Frage: Lege ich für jeden einzelnen Link eine div id fest, und richte jede ID im CSS einzeln aus? Z.b. durch margin-top und margin-right, oder kann ich das eleganter lösen?

Z.b. das ich eine Klasse erstelle, die ausrichte, margin-top und margin-right und dann festlege, dass der nächste link z.b. 20 Pix drunter erscheinen soll.
 
Ich würde den Skyscraper als Hintergrund im div #rechts_unten und die verschieden Links als Liste einfügen.
 
Hm, aber ich muss ja den Skyscraper ausrichten und dann die Links auch nochmal, oder stehe ich jetzt auf dem Holzweg?

So habe ich jetzt das Skyscraper ausgerichtet:

#rechts_unten {
position:absolute;
width:160px;
height:900px;
right: 10px;
top: 710px;
}

Und so die Links:

#link_1 {
position:absolute;
right: 14px;
top: 967px;
font-size:11px;
}

#link_2 {
position:absolute;
right: 14px;
top: 987px;
font-size:11px;
}

Wie könnte ich dass denn zusammenfassen?
 
Hm, wie oben schon vorgeschlagen wurde, die Grafik als Hintergrund in einem Div festlegen. Danach würde ich eine ungeordnete Liste für die Links erstellen. So zum Beispiel:

CODE
<div id="banner">
<ul id="bannerlinks">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

#banner { background: url(hintergrund.jpg) no-repeat; width: 160px; height: 600px }
ul#bannerlinks { padding: 50px 10px 0px 10px; }
ul#bannerlinks li { list-style-type: none; margin-top: 25px }



Gruß
Torsten
 
Hi, super danke Euch!

Habe es so gemacht und es passt auch, zumindest in den gängigen Browsern.

Im IE7 passt es aber nicht. Der margin-top Abstand der einzelnen Links wird da, wieso auch immer falsch dargestellt. (zu groß)

Ich müsste also diese CSS Datei:

ul#bannerlinks { padding: 224px 6px 0px 50px; }
ul#bannerlinks li { list-style-type: none; margin-top: 32px; font-size: 11px; }

für den IE so ausliefern:

ul#bannerlinks { padding: 224px 6px 0px 50px; }
ul#bannerlinks li { list-style-type: none; margin-top: 30px; font-size: 11px; }

Jemand eine Idee, wie ich das leicht machen kann?
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben