✔ Hintergrundbilder überlappen sich

Status
Nicht offen für weitere Antworten.
R

RaRu

Mitglied
Gute Morgen!

ich habe noch so meine Probleme mich float. ich will ganz einfach nur 2 divs, die nebeneinander stehen und beide ein eigenes Hintergrundbild haben. nachfolgend habe ich meinen Versuch gepostet. Leider klappt es nicht, denn die divs stehen zwar nebeneinander, aber das Hintergrundbild der zweiten divs fängt einfach schon bei der ersten div an, liegt also unter der ersten div und guckt rechts nur ein bisschen raus.
Was mache ich falsch?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style type="text/css">
<!--
 div.links {
    width: 298px;
    height: 221px;
    background: url(img/bg_1.gif);
    float: left;
 }

 div.rechts {
    width: 800px;
    height: 225px;
    background: url(img/bg_2.gif);
 }
//-->
</style>
</head>

<body>

  <div class="links">
  </div>
  
  <div class="rechts">
  </div>

</body>

<html>
 
Ich bin zwar nicht der Crack in CSS, aber Du hast kein margin-Attribut (beim rechten DIV) angegeben.
Der 2.te DIV fängt demzufolge an der gleichen Position an, wie der erste.
 
Hi,

mit diesen Regelerweiterungen überlappen sich die Elemente nicht mehr:

Code: 
 div.links {
    width: 298px;
    height: 221px;
    background: url(img/bg_1.gif);
    float: left;
    margin-right:0 !important;
    margin-right:-3px; /* fixt den "3px-Gap-Bug" im IE */
 }

 div.rechts {
    width: 800px;
    height: 225px;
    background: url(img/bg_2.gif);
    margin-left:298px !important;
    margin-left:295px; /* fixt den "3px-Gap-Bug" im IE */
 }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück