Hi Leute,
ich habe folgendes Problem: Wenn die Auflösung des Betrachters meiner Website zu niedrig ist, verschieben sich die Designelemente autom. untendrunter.
Wenn die Zahlen jetzt ein Element darstellen sieht es so normal aus:
----1----
2--3--4
----5----
(1 und 5 sind nicht betroffen, da es Header und Ende der HP sind.)
und so, wenn die Auflösung zu niedrig ist (z.B.800*600):
----1----
2
3
4
----5----
Der Code:
Code: /* Style-Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: auto;
font-family: arial;
vertical-align: baseline;
}
img{
border: 0px;
}
* { padding: 0; margin: 0; }
/* Generelles */
a{
color: #0000ff;
text-decoration: none;
}
a:hover{
color: #99ccff;
text-decoration: underline;
}
body {
background-color: #000000;
}
/* Design */
#designcontainer {
margin: 0 auto;
width: 1100px;
}
#header_container {
height: 210px; /* Höhe des Headers */
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/Head.jpg");
background-repeat: no-repeat;
}
#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}
#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}
#nav_container {
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/BG-L.jpg");
margin: 0px 0px 0px 0px;
padding: 0px;
height: 1200px;
width: 165px;
float: left;
text-align: left;
}
#content {
float: left;
color: black;
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/IN-M.jpg");
margin: 0px 0px 0px 0px;
padding: 0px;
height: 1200px;
width: 790px;
display: inline;
overflow: auto;
}
#sidebar_container {
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/BG-R.jpg");
margin: 0px 0px 0px 0px;
padding: 0px;
height: 1200px;
width: 145px;
float: left;
position: relative;
text-align: center;
}
#extraDiv2 {
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/END.jpg");
background-repeat: no-repeat;
width: 1100px;
height: 60px;
margin-top: 1200px;
padding: 0px;
}
/* Ausblendungen */
div.header, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6{
display: none;
}
/* Seitentitel */
h2#title{
display:none;
}
/* Navigation */
li.nav_element{
list-style-type: none;
border: 0px;
height: 30px;
text-align: center;
}
li.nav_element a{
display: block;
width: 150px;
height: 30px;
font-size: 15px;
font-weight: bold;
color: #aa0000;
text-decoration: none;
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/NAV-L.jpg");
background-repeat: no-repeat;
}
li.nav_element a:hover{
display: block;
color: white;
font-size: 15px;
font-weight: bold;
text-decoration: none;
background-color: #880000;
background-image: url("http://sf2010.sf.funpic.de/Donnerbolzen/Design/NAV-L.jpg");
background-repeat: no-repeat;
}
.subpage a{
color: #009900 !important;
text-decoration: none !important;
font-size: 10px;
}
.subpage a:hover{
color: #ffffff !important;
text-decoration: underline !important;
font-size: 10px;
}
Danke schonmal. |
