By fortuneNext on
http://wp1130551.wp169.webpack.hosteurope.de/Sites/Tests/test/drupal-6.8...
Look this website...
CSS File (important parts only):
/* Globale Einstellungen */
body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial,"Trebuchet MS",Verdana;
font-size: 90%;
margin: 0;
padding: 0;
}
/* Seiteneinstellungen */
#page {
background-color: #262626;
margin: auto;
width: 1200px;
border: #191919 solid;
border-width: 0 10px 0 10px;
}
/* Sidebars auf 20% Breite setzen */
#sidebar-left, #sidebar-right {
width: 180px;
float: left;
padding-left: 5px;
padding-right: 5px;
}
/* Seitenkopfeinstellungen */
#header {
height: 175px;
text-align: center;
}
#name-and-slogan {
margin-top: -20px;
}
#redplain {
position: absolute;
background-color: #990000;
width: 840px;
height: 175px;
/*left: 220px;*/
float: left;
border-left: 10px #660000 solid;
border-right: 10px #660000 solid;
padding-left: 10px;
padding-right: 10px;
}
/* Einstellungen Haupt */
#main {
border: #222222 solid;
border-width: 10px 10px 0 10px;
float: left;
width: 800px;
padding-left: 5px;
padding-right: 5px;
background-color: #333333;
}
/* Einstellungen Links */
a:link {
color: #FFDDDD;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
/* Einstellungen Primary */
#primary {
float: left;
width: 22.5%;
margin-left: -24.5%;
padding-left: 10px;
}
#primary a {
width: 15%;
display: block;
height: 22px;
font-size: 0.9em;
color: #ffffff;
padding: 5px 85% 0 5px;
text-align: left;
text-decoration: none;
margin-top: -70px;
}
#primary a:hover {
border-left: 10px solid #444444;
border-right: 10px solid #770000;
background: #393939;
margin-left: -10px;
}
/* Einstellungen Secondary */
#secondary {
float: left;
width: 15%;
margin: 0;
padding-right: 10px;
}
#secondary a {
width: 15%;
display: block;
height: 22px;
font-size: 0.9em;
color: #ffffff;
padding: 5px 100% 0 5px;
text-align: left;
text-decoration: none;
margin-top: -70px;
}
#secondary a:hover {
border-left: 10px solid #444444;
border-right: 10px solid #770000;
background: #393939;
margin-left: -10px;
}
I thought very long about it, but I just don't understand why the right sidebar (beginning with "Primary Links") slips below the first one (which means it has not enough horizantal space I think). Can somebody explain me?
Thank you!
fortuneNext
Comments
PS: Im just experimenting
PS:
Is it ok to work the header after the body?
Im just experimenting with theming, this is no theme which is meant to be released!
I'm not good in CSS, so I
I'm not good in CSS, so I might be completely wrong.
But: your #page is 1200px, so that's all you the width you have. You then give the sidebars 180px each, plus 10px (total) padding, makes 190px each. Your #main is 800px + 10px (total padding) + 20px (2 borders left and right), i.e. 830px in total. That sums up to 1210px, so it wraps around.
You could reduce the width of your #main, or reconsider its border settings...
Oh my god... I was just
Oh my god... I was just wrong with 380 + 830... thought it would be 1110... sometimes, problems are such simple to solve! Thank you very much!