Seite 1 von 1
CSS Hintergrundbilder nebeneinander ausrichten
Verfasst: 23.10.2011, 10:56
von aBanDon
Hallo,
ich habe 4x Hintergrundbilder die ich gerne über CSS nebeneinander ausrichten möchte. Jedes dieser 4x Hintergrundbilder ist mit einem Hyperlink belegt.
CSS-AUsschnitt:
1. BILD
#logo_bg {
width : 160px;
height : 160px;
float : left;
background : url(images/Roemer.png) 0% 0% no-repeat;
line-height : 0;
font-size : 0;
padding : 12px 0 0 0;
margin : 80px 19px 0 0;
display:block;
}
2.BILD
#webdesign_bg {
width : 160px;
height : 160px;
float : left;
background : url(images/Griechen.jpg) 0% 0% no-repeat;
line-height : 0;
font-size : 0;
padding : 12px 0 0 0;
margin : 32px 19px 0 0;
display:block;
}
Meine HTML:
<a href="
https://www.antike-kulturen.com/Roemer/ ... klung.html" id="logo_bg"></a>
<a href="
https://www.antike-kulturen.com/Roemer/ ... klung.html" id="webdesign_bg"></a>
Jetzt sind die beiden Bilder mit Hyperlinks versehen, doch leider sind sie untereinander ausgerichtet und nicht nebeneinander. Habt ihr ne Idee wie ich das einfach realisieren kann? Danke schonmal!
Verfasst:
von
Hochwertiger Linkaufbau bei ABAKUS:
- Google-konformer Linkaufbau
- nachhaltiges Ranking
- Linkbuilding Angebote zu fairen Preisen
- internationale Backlinks
Wir bieten
Beratung und
Umsetzung.
Jetzt anfragen:
0511 / 300325-0
Verfasst: 23.10.2011, 12:56
von 007
Kannst Du etwas mehr Code posten, also die Elemente vor und nach den beiden Links?
Verfasst: 23.10.2011, 13:05
von aBanDon
Ja sicher
HTML-Dokument:
Code: Alles auswählen
<div id="left_pannel">
<div id="header_bg">
<a href="http://www.antike-kulturen.com/Roemer/geschichtliche-Entwicklung.html" id="logo_bg"></a>
<div class="logo_divider">
<p class="first">Das Römische Imperium<span></span></p>
<p class="content">Das Kaisertum beherschte in Ihrer Blütezeit den gesamten Mittelmeerraum</p>
<p class="more"><a href="Roemer/geschichtliche-Entwicklung.html"> Lesen </a></p>
<br class="spacer">
</div>
<a href="http://www.antike-kulturen.com/Roemer/geschichtliche-Entwicklung.html" id="webdesign_bg"></a>
<div class="webdesign_divider">
<p class="first">Die Mythen der Griechen<span></span></p>
<p class="content">Die Griechische Mythologie umfasst die Geschichten der Götter und Helden des antiken Griechenlands </p>
<p class="more"><a href="Griechen/Entstehungsgeschichte.html"> Lesen </a></p>
CSS:
Code: Alles auswählen
#header_bg {
background : url(images/header_bg.jpg) 0% 0% no-repeat;
line-height : 0;
font-size : 0;
padding : 23px 0 0 35px;
width : 727px;
}
#logo_bg {
width : 160px;
height : 160px;
float : left;
background : url(images/Roemer.png) 0% 0% no-repeat;
line-height : 0;
font-size : 0;
padding : 12px 0 0 0;
margin : 80px 19px 0 0;
display:block;
}
#header_bg div.logo_divider {
background : url(images/divider.gif) 0% 100% repeat-y;
padding : 157px 19px 24px;
line-height : 0;
font-size : 0;
width : 122px;
text-align : center;
}
#webdesign_bg {
width : 160px;
height : 160px;
float : left;
background : url(images/Griechen.jpg) 0% 0% no-repeat;
line-height : 0;
font-size : 0;
padding : 12px 0 0 0;
margin : 32px 19px 0 0;
display:block;
}
#header_bg div.webdesign_divider {
background : url(images/divider.gif) 0% 100% repeat-y;
padding : 160px 19px 55px;
line-height : 0;
font-size : 0;
width : 122px;
text-align : center;
}
Verfasst: 23.10.2011, 14:19
von 007
Mir erschliesst sich leider nicht wie das am Ende aussehen soll. So wie aktuell auf der verlinkten Website bloss mit verlinkten Bildern?
Gibt's einen Grund dafür dass Du das so umständlich zu lösen versuchst? Wozu die Bilder als Hintergrund?
Verfasst: 23.10.2011, 14:24
von aBanDon
Jepp - alles bleibt so wie es ist, nur die Bilder bekommen en Hyperlink.
Ich würde gerne die Bilder als Hintergrund beibehalten.
Verfasst: 23.10.2011, 15:00
von 007
Mal anhand des aktuellen Codes:
Code: Alles auswählen
<div class="logo_bg">
<a href="..."><div style="width:160px; height:160px; margin-top:-12px; position:absolute"></div></a>
<div class="logo_divider">
<p class="first">Das Römische Imperium<span></span></p>
<p class="content">Das Kaisertum beherschte in Ihrer Blütezeit den gesamten Mittelmeerraum</p>
<p class="more"><a href="Roemer/geschichtliche-Entwicklung.html"> Lesen </a></p>
</div>
<br class="spacer">
</div>
<div class="webdesign_bg">
<a href="..."><div style="width:160px; height:160px; margin-top:-12px; position:absolute"></div></a>
<div class="webdesign_divider">
<p class="first">Die Mythen der Griechen<span></span></p>
Usw... Etwas schöner wie ich finde...
Verfasst: 23.10.2011, 15:36
von aBanDon
Jetzt funzt! Vielen dank, hab da schon längere Zeit dran gesessen und rückblickend betrachtet kann ich sagen, dass ich viel zu kompliziert an das Problem heran gegangen. Nochmal Danke!
