...

View Full Version : Header, left sidebar, article to the right, and footer in CSS?



steampunknyanja
02-11-2012, 05:49 AM
Hey all, I am trying to make a website with a header at the top, a sidebar to the left under that header, an article to the right/center, and a footer stuck to the bottom of the page. Every implementation I've tried so far causes overlap/changes dramatically when the browser is resized/is an obfuscated mess. How would I go about getting a <insert title>?

coothead
02-11-2012, 11:54 AM
Hi there steampunknyanja,

and a warm welcome to these forums. ;)

check out the attachment for a basic example. :cool:

coothead

steampunknyanja
02-11-2012, 08:45 PM
Thank you so much for this! But when I try to put a <h1> element in the header section, the footer is pushed downward, even if no text is there.

Excavator
02-11-2012, 08:52 PM
Hello steampunknyanja,
Your h1 has default margins on it, the top one is pushing #container down. This behaviour is called "uncollapsing margins."
Google that for lots of examples.

Here's one, along with a couple cures for it - uncollapsing margins (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html)

steampunknyanja
02-11-2012, 09:28 PM
Thank you, that fixed the footer getting pushed downward, but when I put overflow:auto into the header section of the css, a scrollbar appeared to the right of that section

EDIT: I was able to fix that by changing


font:bold 120%/100px verdana,arial,helvetica,sans-serif;

in the header to


font:bold 120%/50px verdana,arial,helvetica,sans-serif;

steampunknyanja
02-11-2012, 09:44 PM
Can I safely replace the div's with semantic elements like <article> and <footer> replacing div right and div footer? And before I was able to use @font-face, but when I copy that over, it does not change the font.

Excavator
02-12-2012, 12:24 AM
Thank you, that fixed the footer getting pushed downward, but when I put overflow:auto into the header section of the css, a scrollbar appeared to the right of that section

One of the undocumented benefits, I think, of overflow: auto; is that is shows you when your box model is broken by throwing up a scrollbar to handle the overflow. I don't have cootheads example in front of me anymore but any content you put in #header cannot exceed the set height of the header or there is overflow.


See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Excavator
02-12-2012, 12:30 AM
Can I safely replace the div's with semantic elements like <article> and <footer> replacing div right and div footer? And before I was able to use @font-face, but when I copy that over, it does not change the font.

Those are HTML5 elements and they are only semantic if you use them correctly. It should be no problem using them though, they'll work just fine. I have some getting started with HTML5 tips here (http://nopeople.com/CSS%20tips/HTML5/index.html) that may help you.

@font-face is something else entirely. Are you sure you understand what that's for? See http://sixrevisions.com/css/font-face-guide/ or https://www.google.com/search?q=chrisschleuss.com&sourceid=ie7&rls=com.microsoft:en-us:IE-Address&ie=&oe=#pq=chrisschleuss.com&hl=en&tok=YqalBhQqkpbctH11KqI1jw&cp=10&gs_id=9&xhr=t&q=%40font-face&pf=p&sclient=psy-ab&rls=com.microsoft:en-us%3AIE-Address&source=hp&pbx=1&oq=%40font-face&aq=0&aqi=g4&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=347840fe683c1672&biw=1348&bih=1017 for help with that if you feel that's really how you need to style your text.

steampunknyanja
02-12-2012, 01:01 AM
Thank you, but even after using font squirrel to convert the fonts, whenever I try to apply the font to a class the webpage does not show the font.

Excavator
02-12-2012, 01:57 AM
If you put up a test site with your most recent code, we can have a look at it. Maybe it's something we've run into before. Give us a link :)

steampunknyanja
02-12-2012, 02:38 AM
I've not put it up, I guess I misused the word webpage up there. Here are the code I have, I'm trying to make all elements of a class have this font (Visitor, a overly blockish font):


@font-face {
font-family:visitor;
src: url('visitor1-webfont.eot');
src: url('visitor1-webfont.eot?#iefix') format('embedded-opentype'),
url('visitor1-webfont.woff') format('woff'),
url('visitor1-webfont.ttf') format('truetype'),
url('visitor1-webfont.svg#VisitorTT1BRKRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html,body {
height:100%;
margin:0;
background-image:url('images/stars.png');
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
.visitor {
font-family:Visitor !important;
color:#fff;
}
#container {
position:relative;
width:998px;
min-height:100%;
border-right:1px solid #000;
border-left:1px solid #000;
margin:auto;
background-color:#cff;
}
#header {
height:100px;
border-bottom:1px solid #000;
background-color:#fcc;
overflow:auto;
font:bold 120%/50px verdana,arial,helvetica,sans-serif;
text-align:center
}

and


<div id="header">
<h1 class='visitor'>Lorem Ipsum</h1>
</div>

It successfully makes the text white, though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum