nicht angemeldet
div-höhenanpassung
Ich stehe vor folgendem Problem:
Ich möchte in einem DIV mit einer Hintergrundfarbe 2 divs nebeneinander positionieren, habe aber das Problem, dass dies nicht so geht, wie ich es gerne hätte. Wie schaffe ich es beispielsweise, dass der news-Bereich rechts genauso lang wird wie der content-bereich links. Ich habe versucht das main-div mit der gleichen Fabrbe zu füllen, aber das hatte keine auswirkung.
Hat jemand einen Tipp?
---------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="holder">
<div id="header">
<div id="wrapper">
<span id="one">head1</span><br>
<span id="two">head2</span>
</div>
<div id="headpic">
bild.jpg
</div>
</div>
<div id="menu">
<a href="index.html">nav1</a>
<a href="index.html">nav2</a>
<a href="index.html">nav3</a>
<a href="index.html">nav4</a>
<a href="index.html">nav5</a>
</div>
<div id="main">
<div id="content">
<p>Diese Seite entsteht und</p>
<p>und entsteht und</p>
<p>entsteht.</p>
<div id="footer">
<p>Copyright © ich</p>
</div>
</div>
<div id="rightpane">
<h5>News</h5>
<p>keine</p>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------
body {
background: #39322B;
}
/* ___________________________________________________________________ */
#holder {
}
/* ___________________________________________________________________ */
#header {
border-bottom: 5px #fff solid;
background: #eed;
}
#header #wrapper{
float:left;
width:19em; height:auto;
}
#header #one {
font: 3em "Trebuchet MS", Trebuchet, serif;
color: #fff;
}
#header #two {
font: italic 1em georgia, serif;
color: #998;
}
#header #headpic{
margin-left:20em;
text-align:right;
height:5em;
}
/* ___________________________________________________________________ */
#menu {
background: #D3D2B8;
font: bold .8em arial, sans-serif;
}
#menu a{
color: #645846;
text-decoration: none;
}
#menu a:hover{
color: #fff;
}
/* ___________________________________________________________________ */
#main {
}
/* ___________________________________________________________________ */
#content {
float: left;
width:75%;
background: #fff;
}
#content h1 {
font: 1.6em garamond, serif;
color: #77773C;
border-bottom: 1px #77773C dashed;
}
#content p {
width: 94%;
font: .8em arial, sans-serif;
color: #222;
}
#content p.indent{
text-indent: 10px;
}
#content p a{
color: #77773C;
font-weight: bold;
text-decoration: none;
}
#content p a:hover{
color: #aaa;
text-decoration: none;
}
/* ___________________________________________________________________ */
#rightpane {
background: #D3D2B8;
font: .7em arial, sans-serif;
color: #555;
}
#rightpane h5{
font: bold 1.2em verdana, sans-serif;
color: #645846;
}
#rightpane p{
background: #D3D2B8;
}
/* ___________________________________________________________________ */
#footer{
}
#footer p{
font: bold .6em verdana, sans-serif;
color: #bbb;
text-align: right;
}
-
Ich verstehe auch nicht, wie der Abstand zwischen main und menu reinkommt.
-
Hallo!
Wenn du willst, dass die linke spalte genauso hoch ist wie die rechte, dann musst du das hier schreiben.
Und sonst bitte deine Frage genauer formulieren!!#rightpane {height:500px;}
#content {height:500px;}mfg
mst-
Hi,
Wenn du willst, dass die linke spalte genauso hoch ist wie die rechte, dann musst du das hier schreiben.
Und sonst bitte deine Frage genauer formulieren!!#rightpane {height:500px;}
#content {height:500px;}Eine feste Höhenangabe für variablen Text ist Unsinn und die Frage war genau formuliert.
Nebeneinanderstehende Boxen beeinflussen sich nicht in ihrer Höhe. Allerdings läßt sich ein von Tabellen bekannter Spalteneffekt optisch simulieren, wie das Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm zeigt.
freundliche Grüße
Ingo
-
-