CSS Hintergrundbilder nebeneinander ausrichten

[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!

[007]

Kannst Du etwas mehr Code posten, also die Elemente vor und nach den beiden Links?

[aBanDon]

Ja sicher

HTML-Dokument:

Code: Alles auswählen

  <div id="left_pannel">
    <div id="header_bg">
      <a href="http&#58;//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">&nbsp;Lesen&nbsp;</a></p>

        <br class="spacer">
      </div>
      <a href="http&#58;//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">&nbsp;Lesen&nbsp;</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;
}

[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?

[aBanDon]

Jepp - alles bleibt so wie es ist, nur die Bilder bekommen en Hyperlink.
Ich würde gerne die Bilder als Hintergrund beibehalten.

[007]

Mal anhand des aktuellen Codes:

Code: Alles auswählen

<div class="logo_bg">
<a href="..."><div style="width&#58;160px; height&#58;160px; margin-top&#58;-12px; position&#58;absolute"></div></a>
<div class="logo_divider">
<p class="first">Das R&ouml;mische Imperium<span></span></p>
<p class="content">Das Kaisertum beherschte in Ihrer Bl&uuml;tezeit den gesamten Mittelmeerraum</p>
<p class="more"><a href="Roemer/geschichtliche-Entwicklung.html">&nbsp;Lesen&nbsp;</a></p>
</div>
<br class="spacer">
</div>

<div class="webdesign_bg">
<a href="..."><div style="width&#58;160px; height&#58;160px; margin-top&#58;-12px; position&#58;absolute"></div></a>
<div class="webdesign_divider">
<p class="first">Die Mythen der Griechen<span></span></p>

Usw... Etwas schöner wie ich finde...

[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!