Hallo zusammen
Meine erste Frage:
Wie kann ich mein gesamtes Layout zentrieren, egal welche Auflösung der User hat?
Ich habe mit der Suchfunktion nach meinem Problem gesucht, wurde auch fündig, aber leider klappte das nicht wie ich mir das dachte. Darum muss ich ein neues "Thema" erstellen.
Zuerst einmal, ich habe erst gerade mit CSS angefangen und habe viellicht Anfängerfehler drin. Da wäre ich froh, wenn ihr mir könnt zeigen, wie man das besser macht.
Also hier mal mein CSS:
und das selbe online: http://www.alsodenn.ch/test/haupt.css
Hier der HTML-Code:
Das sieht dann so aus: http://www.alsodenn.ch/test/alsodenn.html
Meine Zweite Frage:
Diese Kästen haben bei mir ja immer die gleichen Farben und Rahmen. Momentan habe ich für jeden einzelnen Kasten die Farbe und Rahmen zugeteilt. Kann ich auch mittels Vererbung irgendwie diese gleichen Information nur einmal zuteilen? Damit ich, wenn ich z.B. die Farbe ändern möchte, das nur an einem Ort ändern müsste? Wie würde der Code dazu ausschauen und was muss ich dabei beachten?
Ich hoffe, jemand kann mir helfen und danke schon im voraus.
Gruss
Meine erste Frage:
Wie kann ich mein gesamtes Layout zentrieren, egal welche Auflösung der User hat?
Ich habe mit der Suchfunktion nach meinem Problem gesucht, wurde auch fündig, aber leider klappte das nicht wie ich mir das dachte. Darum muss ich ein neues "Thema" erstellen.
Zuerst einmal, ich habe erst gerade mit CSS angefangen und habe viellicht Anfängerfehler drin. Da wäre ich froh, wenn ihr mir könnt zeigen, wie man das besser macht.
Also hier mal mein CSS:
Code:
body {
margin: 0px;
padding: 0px;
border: none;
background: #99CCFF;
font-family: verdana;
font-size: 11px;
border: black 10px;
}
.topleft {
position: absolute;
left: 0px;
top: 2px;
width: 180px;
height: 100px;
border: 1px black solid;
background: #003399;
}
.topcenter {
position: absolute;
left: 187px;
top: 2px;
width: 606px;
height: 100px;
border: 1px black solid;
background: #003399;
}
.navigate {
position: absolute;
left: 187px;
top: 109px;
width: 606px;
height: 50px;
border: 2px solid;
border-color: #003399;
background: white;
}
.topright {
position: absolute;
left: 800px;
top: 2px;
width: 180px;
height: 100px;
border: 1px black solid;
background: #003399;
}
.kalender {
position: absolute;
left: 0px;
top: 109px;
width: 180px;
height: 200px;
border: 2px solid;
border-color: #003399;
background: white;
}
.useronline {
position: absolute;
left: 0px;
top: 336px;
width: 180px;
height: 200px;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-top: 2px dashed;
border-color: #003399;
background: white;
}
.useronlineheader {
position: absolute;
left: 0px;
top: 316px;
width: 184px;
height: 20px;
text-align: left;
font-weight: bold;
font-size: 14px;
color: white;
background: #003399;
}
.lastposts {
position: absolute;
left: 800px;
top: 129px;
width: 180px;
height: 280px;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-top: 2px dashed;
border-color: #003399;
background: white;
}
.lastpostsheader {
position: absolute;
text-align: left;
font-weight: bold;
font-size: 14px;
color: white;
left: 800px;
top: 109px;
width: 184px;
height: 20px;
background: #003399;
}
.lastmessages {
position: absolute;
left: 800px;
top: 436px;
width: 180px;
height: 300px;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-top: 2px dashed;
border-color: #003399;
background: white;
}
.lastmessagesheader {
position: absolute;
text-align: left;
font-weight: bold;
font-size: 14px;
color: white;
left: 800px;
top: 416px;
width: 184px;
height: 20px;
background: #003399;
}
.centertext {
position: absolute;
left: 187px;
top: 166px;
width: 606px;
height: 400px;
border: 2px solid;
border-color: #003399;
background: white;
}
.centerleft {
position: absolute;
left: 187px;
top: 593px;
width: 299px;
height: auto;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-top: 2px dashed;
border-color: #003399;
background: white;
}
.centerleftheader {
position: absolute;
text-align: left;
font-weight: bold;
font-size: 14px;
color: white;
left: 187px;
top: 573px;
width: 303px;
height: 20px;
background: #003399;
}
.centerright {
position: absolute;
left: 494px;
top: 593px;
width: 299px;
height: auto;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-top: 2px dashed;
border-color: #003399;
background: white;
}
.centerrightheader {
position: absolute;
text-align: left;
font-weight: bold;
font-size: 14px;
color: white;
left: 494px;
top: 573px;
width: 303px;
height: 20px;
background: #003399;
}
und das selbe online: http://www.alsodenn.ch/test/haupt.css
Hier der HTML-Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="de"
<html>
<head>
<title>ALSODENN COMMUNITY</title>
<LINK REL=stylesheet TYPE="text/css" HREF="haupt.css">
</head>
<body>
<DIV CLASS="topleft">
Hallo
</DIV>
<DIV CLASS="topcenter">
Welt
</DIV>
<DIV CLASS="navigate">
Navigate
</DIV>
<DIV CLASS="topright">
Hallo
</DIV>
<DIV CLASS="kalender">
Hallo
</DIV>
<DIV CLASS="useronline">
Hallo
</DIV>
<DIV CLASS="useronlineheader">
TITEL
</DIV>
<DIV CLASS="lastposts">
Hallo...<br>test...<br>blblblblblblabalballkadösjf öjf öalsdjfö alsjföeij aölsdj kföaoewjf öalsdjf öawej aölsdjf öa seu öasdjf öaseu äöaieä asdlö aölseu asejf asdfö auef jaösdf jaöeo...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>
<DIV CLASS="lastpostsheader">
TITEL
</DIV>
<DIV CLASS="lastmessages">
Hallo...<br>test...<br>blblblblblblabalbal...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>
<DIV CLASS="lastmessagesheader">
TITEL
</DIV>
<DIV CLASS="centertext">
DA KOMMT DER WICHTIGE TEXT REIN, VORSTELLUNG, IDEALE, ERLÄRUNG, ABOUT US ETC.
</DIV>
<DIV CLASS="centerleft">
Hallo<p></p>
Welt<p></p>
du
</DIV>
<DIV CLASS="centerleftheader">
LAST NEWS
</DIV>
<DIV CLASS="centerright">
Hallo<p></p>
Welt<p></p>
du
</DIV>
<DIV CLASS="centerrightheader">
LAST REGISTRANTS
</DIV>
</body>
</html>
Das sieht dann so aus: http://www.alsodenn.ch/test/alsodenn.html
Meine Zweite Frage:
Diese Kästen haben bei mir ja immer die gleichen Farben und Rahmen. Momentan habe ich für jeden einzelnen Kasten die Farbe und Rahmen zugeteilt. Kann ich auch mittels Vererbung irgendwie diese gleichen Information nur einmal zuteilen? Damit ich, wenn ich z.B. die Farbe ändern möchte, das nur an einem Ort ändern müsste? Wie würde der Code dazu ausschauen und was muss ich dabei beachten?
Ich hoffe, jemand kann mir helfen und danke schon im voraus.
Gruss