Hello.
I'm designing my first website and I'm facing some problems. I've researched a lot, but can't really fix my problem...
I want the site to be fluidly resizable - I hate having a 1920x1080 screen and seeing every site consisting only of a small, centered rectangle, using 20% of the available space.
The problems are:
First:
There's some kind of margin between the content and the menu I can't seem to get rid of. When the menu stops (which is another problem), that margin goes away...
How can I fix this? I want to be able to control the margin.
Check the first attached image. The red scribbles are about this problem.
Second:
The menu doesn't extend beyond its contents. I want it to be as big as... well, as big as necessary, I want it to extend to the bottom.
How can I do it?
Check the first attached image. The purple scribbles are about this problem.
The second attached image is the design I made in Photoshop. That's pretty much what I'm trying to achieve with CSS.
Thanks!
Here's the code:
CSS:
@charset "utf-8"; /* CSS Document */ html,body{margin: 0; padding: 0; height: 100%; min-width: 1000px;} #container { min-height: 100%; } /* IE 100% height hack */ * html #container { height: 100% } /* --------------------------------------------- */ #header { margin: 0; padding: 0; height: 165px; background-color: #7ab91c; } #header h1 { margin: 0; padding: 0; line-height: 165px; vertical-align: middle; text-align: center; font-size: 1.2em; font-weight: normal; font-family: Verdana, Geneva, sans-serif; color: white; } #header img { margin: 0; padding: 0; z-index: 2; position: relative; float: right; right: 60px; top: -165px; } /* --------------------------------------------- */ #right_column { width: 180px; position: relative; float: right; right: -81px; padding-left: 20px; background-color: #ededed } #right_column h2 { color: #f0ba14; font-size: 130%; font-weight: normal; font-family: Tahoma, Verdana, Geneva, sans-serif; padding: 0; margin-top: 1.2em; margin-bottom: 0.2em; } #right_column ul { color: black; font-size: 90%; font-family: Verdana, Geneva, sans-serif; line-height: 1.5; padding: 0; /* removes all padding from the unordered list */ margin: 0; /* removes all margins from the unordered list */ list-style-type: none; /* removes the bullets */ } #right_column li:hover { background: #d4d4d4; } #right_column a { text-decoration: none; color: black; } /* Highlight the-page-the-user-is-on's link in the right_column */ #HaloReach_Forum .HaloReach_Forum, #HaloReach_Guides .HaloReach_Guides, #HaloReach_Articles .HaloReach_Articles, #HaloReach_HotTopics .HaloReach_HotTopics, #HaloODST_Forum .HaloODST_Forum, #HaloODST_Guides .HaloODST_Guides, #HaloODST_Articles .HaloODST_Articles, #HaloODST_HotTopics .HaloODST_HotTopics, #GruntsPajamas_Forum .GruntsPajamas_Forum, #GruntsPajamas_Articles .GruntsPajamas_Articles, #GruntsPajamas_Events .GruntsPajamas_Events, #GruntsPajamas_Gallery .GruntsPajamas_Gallery { background: #d4d4d4; } /* --------------------------------------------- */ #left_column { position: relative; margin-right: 220px; padding-left: 25px; background-color: white; } #left_column #single_article h1 { color: #b2c336; font-size: 220%; font-weight: normal; font-family: Tahoma, Helvetica, Geneva, sans-serif; } #left_column #single_article p { color: black; font-size: 100%; text-align: justify; font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif; } #left_column #single_article p a { color: #1aa8c6; } #footer { margin: 0; padding: 0; position: relative; height: 60px; color: black; font-size: 70%; text-align: center; font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif; background-color: white; }
HTML:
@charset "utf-8"; /* CSS Document */ html,body{margin: 0; padding: 0; height: 100%; min-width: 1000px;} #container { min-height: 100%; } /* IE 100% height hack */ * html #container { height: 100% } /* --------------------------------------------- */ #header { margin: 0; padding: 0; height: 165px; background-color: #7ab91c; } #header h1 { margin: 0; padding: 0; line-height: 165px; vertical-align: middle; text-align: center; font-size: 1.2em; font-weight: normal; font-family: Verdana, Geneva, sans-serif; color: white; } #header img { margin: 0; padding: 0; z-index: 2; position: relative; float: right; right: 60px; top: -165px; } /* --------------------------------------------- */ #right_column { width: 180px; position: relative; float: right; right: -81px; padding-left: 20px; background-color: #ededed } #right_column h2 { color: #f0ba14; font-size: 130%; font-weight: normal; font-family: Tahoma, Verdana, Geneva, sans-serif; padding: 0; margin-top: 1.2em; margin-bottom: 0.2em; } #right_column ul { color: black; font-size: 90%; font-family: Verdana, Geneva, sans-serif; line-height: 1.5; padding: 0; /* removes all padding from the unordered list */ margin: 0; /* removes all margins from the unordered list */ list-style-type: none; /* removes the bullets */ } #right_column li:hover { background: #d4d4d4; } #right_column a { text-decoration: none; color: black; } /* Highlight the-page-the-user-is-on's link in the right_column */ #HaloReach_Forum .HaloReach_Forum, #HaloReach_Guides .HaloReach_Guides, #HaloReach_Articles .HaloReach_Articles, #HaloReach_HotTopics .HaloReach_HotTopics, #HaloODST_Forum .HaloODST_Forum, #HaloODST_Guides .HaloODST_Guides, #HaloODST_Articles .HaloODST_Articles, #HaloODST_HotTopics .HaloODST_HotTopics, #GruntsPajamas_Forum .GruntsPajamas_Forum, #GruntsPajamas_Articles .GruntsPajamas_Articles, #GruntsPajamas_Events .GruntsPajamas_Events, #GruntsPajamas_Gallery .GruntsPajamas_Gallery { background: #d4d4d4; } /* --------------------------------------------- */ #left_column { position: relative; margin-right: 220px; padding-left: 25px; background-color: white; } #left_column #single_article h1 { color: #b2c336; font-size: 220%; font-weight: normal; font-family: Tahoma, Helvetica, Geneva, sans-serif; } #left_column #single_article p { color: black; font-size: 100%; text-align: justify; font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif; } #left_column #single_article p a { color: #1aa8c6; } #footer { margin: 0; padding: 0; position: relative; height: 60px; color: black; font-size: 70%; text-align: center; font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif; background-color: white; }
Attachment | Size |
---|---|
problem1.jpg | 652.11 KB |
SGPSite_SingleArticle.png | 98.89 KB |