Hi Leute,
bin realtive neu im CSS-Geschäft und werde auch nicht so ganz schlau aus allem. Ich möchte einen content haben indem der main-inhalt ist und neben dem content kleine boxen wie "login" oder "neuster beitrag", sowas in der art.
Habe gestern rumprobiert und mich für die Div elemente entschieden.
Jetzt folgendes Problem: Wenn der Browser voll geöffnet ist, sprich maximiert sieht alles gut aus HIER SCREENSHOT.
Sobald ich die Größe des Browser (unabhängig ob IE oder FIFOX) verändere, verschiebt sich alles, nur die login box nicht SCREENSHOT2. Ich weiss zwar das es daran liegt das die Loginbox auf position:absolute gestellt ist, weiss aber keine alternative, dass letzendlich ALLES so bleibt wies auf dem 1. Screenshot zu sehen ist auch wenn das Fenster verändert wird.
Hier ein Auschnitt aus meinem CSS-CODE
div.login {
width:150px;
height:auto;
position:absolute;
top:300px;
left:870px;
padding-right:2px;
padding-left:2px;
font-family:verdana;
font-size:10px;
background-color:#7ac7f7;
text-align: left;
}
div.content
{
text-align: left;
margin:10px auto 0;
width:800px;
height:auto;
padding-right:2px;
padding-left:2px;
font-family:verdana;
font-size:10px;
background-color:#7ac7f7;
border-style: solid;
border-width: 1px; }
div.navigation
{
margin:10px auto 0;
width:800px;
font-family:verdana;
font-size:10px;
background-color:#e1e1e1;
border-style: solid;
border-width: 0px;
}
div.fusszeile
{
padding-right:2px;
padding-left:2px;
margin:2px auto 0;
width:800px;
font-family:verdana;
font-size:9px;
background-color:#7ac7f7;
border-style: solid;
border-width: 1px; }
div.banner {
text-align: left;
margin:80px auto 0;
width:800px;
height:150px;
background-image: url(images/banner.jpg);
padding-right:2px;
padding-left:2px;
font-family:verdana;
font-size:10px;
background-color:#7ac7f7;
border-style: solid;
border-width: 1px; }HTML:
<div class=content>
<img src=images/news.jpg>
content
<div class=login>
<form action=# method=POST>
[b]Benutzername
[/b]
<input type=text name=email>
[b]Passwort
[/b]
<input type=password name=password>
<input class=buttom type=submit value=Anmelden>
<center><a href=#>Passwort vergessen?</a>
</form>
</div>Mfg amigo[/code]