Positionieren von DIV Boxen
Pez
- css
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.
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.
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
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ß