div umbruch
Trese
- html
Ich bin gerade dabei mir ein menu zusammenzubasteln:
<!-- menu -->
<div id="menuholder" class="menuholder">
<div id="menu1" class="menu">register</div>
<div id="menu2" class="menu">feedback</div>
<div id="menu3" class="menu">donut</div>
<div id="menu4" class="menu">admin login</div>
</div>
<!-- menu end -->
<!-- request form -->
<div id="request_form" class="request_form">
<div>name:</div>
<div>firstname:</div>
<div>url;:</div>
<div>email:</div>
</div>
<!-- request form end -->
Dazu folgendes css:
.menuholder, .form
{
padding: 3px;
}
/* menu-buttons */
.menu
{
text-align: center;
cursor: pointer;
float: left;
background-image: url("../images/btnBackground.png");
height: 15px;
width: 100px;
}
/* forms */
.request_form, .feedback_form
{
border-style: solid;
border-width: 1px;
border-color: #000000;
width: 400px;
height: 200px;
}
.request_form
{
top: 18px;
left: 2px;
}
Was ich möchte: die menupunkte nebeneinander, das klappt auch. das erste formilar sollte dann aber auf eine neue zeile kommen. weil ich das nicht hingekriegt habe versuchte ich es mit der left: angabe, aber die frisst der ie7 nicht?
Hi Trese,
zunächst mal solltest du auf sinnvolle und stringente Benennungen und Selektoren in deinem css Code achten. Die Klassen hier sind z.B. völlig überflüssig.
<div id="menuholder" class="menuholder">
<div id="menu1" class="menu">register</div>
<div id="menu2" class="menu">feedback</div>
<div id="menu3" class="menu">donut</div>
<div id="menu4" class="menu">admin login</div>
</div>
Stattdessen alle divs innerhalb von #menuholder ansprechen mit
#menuholder div {
}
Dein Umbruchproblem löst du nicht so
.request_form
{
top: 18px;
left: 2px;
}
sondern so
.request_form {
clear: both;
}
Das hebt die float Angabe deiner menu divs auf. top und left Angaben dagegen sind bei Positionierungen zu benutzen, ohne eine Angabe für position aber sinnlos (und hier sowieso). Infos zu CSS hier.
Gruß
Antipitch