SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello, I know this HAS to be a basic question but I've searched for quite some time for any tutorial sites and forums on how to code css/html for sites like this one, simplebits.com, shoeboxed.com, etc. I just can't seem to figure out which words to use in my searches. I've used:
"horizontally divided vertical align css"
"horizontal grid single column css"...just to name a couple.
I have coded enough so far to get the header and footer to span the length of the browser window (even when browser is resized) but do not know how to get the logo, content and footer to align vertically; I just seem to fall back to a 2-column layout in the content section to show content. I would appreciate if someone could clue me in on what to search for. I really don't want to copy code from any of those sites. I realize that is a way to learn, but I learn much better by starting off small, know how it works and continue building on what I am learning.
Thanks...Russ -
-
CommentAuthoradjustafresh
- CommentTimeDec 5th 2007
Hi Russ,
Your description is kind of vague and confusing (to me at least). I'm not exactly sure what you're trying to achieve. By default, any block level HTML element will span 100% of the browser's width (be sure to zero out default margins and padding from the browser window).
Do you have an example of specifically what you're trying to do (a jpg would help), and the progress you've made thus far (live site is best, but code will do in a pinch)? Lots of people on the forum are willing to help if they have the info they need to provide assistance. -
-
- CommentAuthorvickypetersen
- CommentTimeDec 5th 2007
-
- CommentAuthorvickypetersen
- CommentTimeDec 5th 2007
apologies...that should be www.code-sucks.com -
Thanks for your help; this is going to be a lot. I agree after reading my post that it is vague and went off on a tangent, sorry…
I posted the files i’m working on at:
linktextI also posted a gif image to a visual description of what I’m after at:
linktextIn the gif image, the horizontal lines represent the div’s that I would like to span the browser window even when the browser is resized. The vertical lines represent the ‘invisible column’ where the header, main and footer content will fit into.
The test page is just basic elements so that I can learn why/how this all works. If you’re able to see the stylesheet, you’ll see various elements I have cobbled to together from different tutorials to try getting this to work.
The header height is fixed with a ‘head_container’ that is centered (I hope). This is where the logo lives and perhaps navigation but that’s later.
The main content area is the part I’m having problems with. I can make 2-column, liquid or faux-column layout but what I would like to do is turn the columns “90-deg” to make them span the browser window width 100%. If it’s a div, how would I make multiple div’s “stack” on top of each other? Reference the layout at ‘www.shoeboxed.com’. That site has its header, content and footer span the browser 100% and appears that each section has different background colors and images.
The footer can also be organized into smaller sections (see the gif image link above).
With all of that, the header, main and footer content is contained within a fixed width column. I can tell this by resizing the browser and the horizontal scroll bar will show as soon as the browser encroaches on either the right or left side of the content column.
I really hope this helps. As you can tell, i have to take the long way around in describing what I’m after. Now imagine trying to google the indescribable! I’m familiar with table layout but very new to CSS layout other than the occasional absolute-position <div> over the years.
Thanks for your help again!
Russ -
I would still like your input on my page linked above but after thinking about this, I think I MIGHT have this issue resolved. If I make the body background color match the #content div, then it would give the appearance of the #content section spanning the entire width of the browser window. Please let me know what you think. My stylesheet is below. I meant to paste it last night. The #secondary_content that I commented out is a div on the left of the main content div, for navigation:
----------------------------
body {
padding:0;
margin:0;
font-size:62.5%;
/*background: #ccc url(m_columns.gif) repeat-y 50% 0;*/
}
#header {
background: #E7E8E9 url(m_header_border_edge.jpg) repeat-x bottom left;
margin:0; padding:0;
clear: both;
height: 10em;
}
#head_container {
background: #E7E8E9;
width: 71%;
height: 9em;
margin:0 auto;
}
#content {
background-color:#FFA500;
width: 71%;
margin: 0 auto;
top:11em;
left: 2%;
padding:0;
}
/*
#secondary_content {
background: Yellow;
width:20%;
right:2%;
margin:0;
padding:0;
}
*/
#footer {
background: #E7E8E9 url(m_footer_border.jpg) repeat-x top left;
margin:0;
padding:0;
clear: both;
}
#foot_container {
background: #E7E8E9 url(m_footer_border.jpg) repeat-x top left;
width: 71%;
margin:0 auto;
padding: 12px 0 30px 0;
} -
Thanks for your help...i just needed to think out loud. After looking at other sites and trying to figure out how a site can have a wonderful, "big" feeling to it, I found that they are just background images. So for some sites i referenced above, i found many have images set as the background with the content overlaying the top.
I think i can figure it out from here...
Thanks,
Russ
1 to 7 of 7