scavenger
Threadersteller
Dabei seit: 20.11.2002
Ort: -
Alter: 41
Geschlecht:
|
Verfasst So 11.02.2007 12:58
Titel Tabellenloses Layout - Horizontal 100% vertikal zentriert |
|
|
Hi,
ich möchte für einen Freund von mir eine Homepage erstellen und versuche mich erstmals mit tabellenlosem Layout per CSS.
im Groben und Ganzen hab ichs schon hinbekommen - hab aber noch je nach browser ein paar Probleme...
Die Seite soll eine feste Größe haben und horizontal und vertikal zentriert sein. Zudem möchte ich aber noch gerne einen Hintergrund, der über 100% der Breite geht und nur Vertikal zentriert ist.
Aber am besten seht ihr euch das selber mal an:
http://www.4cg.de/apd/adcando/website.html
Meine Probleme:
Opera:
- minimaler Horizontaler Scrollbalken
- beim scrollen scrollt die komplette seite ein stück nach oben und unten
Firefox 2:
- minimaler Horizontaler Scrollbalken
- Footer landet irgendwie über dem Content
Internet Explorer:
- footer schließt nicht bündig ab
- eigentliche Seite ist nicht zentriert
meine CSS sieht so aus:
Code: | body {
background-color: #1E2F4F;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#rahmen {
position:absolute;
height:550px;
width:100%;
top: 50%;
text-align: left;
padding: 0px;
border: 1px solid #38609B;
margin-top: -275px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(../bilder/bg.gif);
}
#inhalt {
text-align: left;
vertical-align: middle;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#header {
text-align: left;
vertical-align: middle;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
background-image: url(../bilder/head.gif);
height: 75px;
}
#navi {
text-align: left;
vertical-align: middle;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 35px;
background-image: url(../bilder/navi_bg.gif);
}
#subnavi {
text-align: left;
vertical-align: middle;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 15px;
}
#content_left {
text-align: left;
vertical-align: middle;
width: 335px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 395px;
float: left;
}
#content_right {
text-align: left;
vertical-align: middle;
width: 605px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 395px;
float: left;
overflow: auto;
}
#footer {
text-align: center;
vertical-align: middle;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 30px;
background-image: url(../bilder/footer.gif);
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
|
ich wollte schon fast aufgeben und es doch wieder mit Tabellen machen aber vielleicht könnt ihr mir ja weiterhelfen.
THX
|
|