Pez: Positionieren von DIV Boxen

Hallo.

Meine Seite

Wenn ich meine braune Textbox genau neben den Links haben möchte, muss ich dann die Boxen mit Links nochmal mit einer transparenten Box umschließen. Ich bekomm das einfach nicht hin.

Meine CSS:

/* CSS Document */

body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        background-image: url(banner.gif);
background-repeat: repeat-x;
}

/* Banner */

#schriftzug {
background-image: url(schriftzug.gif);
background-repeat: no-repeat;
height: 121px;
width: 570px;
margin-top: 1em;
margin-left: 0.5em;
}

/* Navigation */

#info {
         background-color: #936b00;
         margin: 5em 0em 0em 0em;
line-height: 160%;
width: 9em;
text-align: center;

	 }  

#geschichte {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 160%;
width: 9em;
         text-align: center;
         }

#wanderwege {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
         }

#speisen {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
         }

#bildergalerie {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
         }

#gaestebuch {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
         }

#anfahrtsplan {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
         }

#kontakt {
         background-color: #936b00;
         margin: 0.1em 0em 0em 0em;
line-height: 170%;
width: 9em;
         text-align: center;
}

/* TEXTBOX */

#textbox {
background-color: #936b00;
margin: 0em 0em 0em 11em;
width: 50em;
height: 100%;
}

/* Schriften */

.navi {
         color: #ffbe0d;
         font-size: 10pt;
         font-family: Verdana, Arial;
text-decoration: none;
text-align: center;
}

a:link {
color: #ffbe0d;
         font-size: 10pt;
         font-family: Verdana, Arial;
text-decoration: none;
}

a:visited {
color: #ffbe0d;
         font-size: 10pt;
         font-family: Verdana, Arial;
text-decoration: none;
}

index.php

...
<body>

<div id="schriftzug"></div>

<div id="info"><a href="index.php?go=info" target="_self">INFO</a></div>
<div id="geschichte"><a href="index.php?go=geschichte" target="_self">GESCHICHTE</a></div>
<div id="wanderwege"><a href="..">WANDERWEGE</a></div>
<div id="speisen"><a href="..">SPEIS & TRANK</a></div>
<div id="bildergalerie"><a href="..">BILDERGALERIE</a></div>
<div id="gaestebuch"><a href="..">GÄSTEBUCH</a></div>
<div id="anfahrtsplan"><a href="..">ANFAHRTSPLAN</a></div>
<div id="kontakt"><a href="..">KONTAKT</a></div>

<div id="textbox" class="navi">
...

Könnt ich da einen Tipp bekommen bitte.

  1. hi,

    Könnt ich da einen Tipp bekommen bitte.

    Schaue dir hier einmal an, wie man ein zweispaltiges Layout erstellt, dann wirst du schnell sehen, wo dein problem liegt.

    Im übrigen darf man diese Beispiele frei verwenden; zum lernen ein guter Einstieg in die Materie.

    mfg

    --
    echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
    array(2) {
      ["SELFCODE"]=>
      string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
      ["Meaningful"]=>
      string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
    }
  2. Hallo

    Wenn ich meine braune Textbox genau neben den Links haben möchte, muss ich dann die Boxen mit Links nochmal mit einer transparenten Box umschließen. Ich bekomm das einfach nicht hin.

    also ich würde es so machen. Die Links alle noch einmal in einen gemeinsamen div-Bereich schreiben und dann diesen mit float:right; So ausrichten, dass andere Elemente den div-Bereich rechts umfliesen. In dem Fall dann eben deine Text-Box.
    Kannst ja auch einfach noch mal hier genauer nach lesen:
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

    Ich hoffe es klappt.

    Gruß