relative divs übereinander legen

J

jkgrafik

Registriert
Thread Starter
Dabei seit
10.09.2009
Beiträge
1
Reaktionspunkte
0
Hallo,

ich habe eine hintergrundgrafik, dieser habe ich ein relatives div zugeordnet (blauer rand in der grafik). jetzt möchte ich auf dieses div 3 weitere divs nebeneinander drauf setzten (rote kästen in der grafik; bild, text 1, text 2).
mit absoluten divs möchte ich auf keinem fall arbeiten, da die inhalte mit dem browser mitgehen sollen. in der grafik seht ihr meine skizze. freue mich auf zahlreiche tipps. und ist dies überhaupt möglich? wie?
 

Anhänge

  • divs.jpg
    divs.jpg
    66,8 KB · Aufrufe: 116
Du meinst so ?

Bei mir sind die drei nur nich ÜBER dem div mit dem blauen rahmen, sondern darin.
Ich bin nicht 100% sicher wie Du das meintest mit drüber. :)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style>

      *{
        margin: 0;
        padding: 0;
      }

      #navigation,
      #logo {
        width: 10em;
        height: 2em;
        border: 1px solid black;
      }

      #boxOuter {
        border: 1px solid blue;
        margin: 1em 0 1em 0;
        width: 30.4em;
        height: 10em;
      }

      .boxInner {
        border: 1px solid red;
        width: 10em;
        height: 10em;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="logo"></div>

      <div id="boxOuter">
        <div class="boxInner"></div>
        <div class="boxInner"></div>
        <div class="boxInner"></div>

      </div>

      <div id="navigation"></div>
  </body>
</html>
 
Anbei nochmal das ganze ohne das die drei divs mit dem roten Rand IN dem kasten mit dem blauen Rand sind.

Das geht bestimmt noch irgendwie eleganter, aber erstmal geht es überhaupt. :)
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style>

      *{
        margin: 0;
        padding: 0;
      }

      #navigation,
      #logo {
        width: 10em;
        height: 2em;
        border: 1px solid black;
      }

      #boxOuter {
        border: 1px solid blue;
        margin: 1em 0 1em 0;
        width: 30.4em;
        height: 10em;
        float: left;
      }

      .boxInner {
        border: 1px solid red;
        width: 10em;
        height: 9.85em;
        float: left;
      }

      .first{
        margin: -11.05em 0 0 0;
      }

      .second{
        margin: -11.05em 0 0 10.15em;
      }

      .third{
        margin: -11.05em 0 0 20.25em;
      }

      .clear{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="logo"></div>

      <div id="boxOuter"></div>
      <div class="clear"></div>

      <div class="boxInner first">First</div>
      <div class="boxInner second">Second</div>
      <div class="boxInner third">Third</div>

      <div id="navigation"></div>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten