Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
question about css layouts...
Old 02-02-2007, 10:12 PM question about css layouts...
bigfreak's Avatar
Extreme Talker

Posts: 179
Name: Andy
Trades: 0
based on the feedback i got about not having scroll bars in a page, here's a tough question.

i am making a new site, it has a header and then the body is solid white. there is a background colour. I want to plan for text overflow, and have the site work.

Should i make the header one piece and then the body a seperate piece so tha it can flow?

Does any of this make any sense?

bigfreak is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 02-03-2007, 10:40 AM Re: question about css layouts...
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Yes, it makes sense, and yes that would be the method to use.

Use a "wrapper" that will contain the rest of your layout, set it to position: relative.

Then 'stack' your layout:
header
content
footer

If you're using horizontal navigation, you can put it under the header.
You can divide content into multiple columns if needed.
The content area will be what stretches vertically as needed.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 02-03-2007, 12:58 PM Re: question about css layouts...
bigfreak's Avatar
Extreme Talker

Posts: 179
Name: Andy
Trades: 0
oh man, now where did that dictionary go...



ihere's what i have so far shortly, maybe that will help me understand what the heck you're talkin about! I would like to change the nav so they change colour, but i'll get to that. I can't use the font as normal, because i think the font isn't a standard one.

http://www.insiteci.com/sample/perfect/

thanks!!

Last edited by bigfreak; 02-03-2007 at 01:02 PM..
bigfreak is offline
Reply With Quote
View Public Profile
 
Old 02-03-2007, 04:54 PM Re: question about css layouts...
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Ok.. try this:

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>

<link href="justperfect_files/perfect.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainbody">
<div id="sidepics"></div>
<div id="text">
<!-- <p><img src="justperfect_files/welcome.gif" class="floL" height="14" width="234"></p> -->
<h1>Welcome to Just Perfect Designs! </h1>
<p>This is our new website. </p>
</div>


</div><!-- end mainbody -->
<br class="brclear" /> <!-- clear floated #sidepics -->
<div id="footer">

</div> <!-- end footer -->

</div><!-- end container -->

</body>
</html>
and CSS
Quote:
body {
margin: 0px;
padding: 0px;
font: 101% Arial, Helvetica, sans-serif;
background-color: #9eab69;
text-align: center;
}
#container {
position: relative;
width: 780px;
height: 595px;
margin: 0px auto;
}
/*#body, #header, #mainbody, #text, #sidepics{
position: absolute;
overflow: visible;
left: 414px;
width: 0px;
top: 484px;
height: 422px;
}*/


#mainbody {
height: 495px;
width: 780px;
/*top: 98px;
left: 0px;*/
font-size: 12px;
background-image: url(background_02.gif);
background-color: #FFFFFF;
border: 1px solid white;
text-align: left;
}
#sidepics {
float: right;
margin: 15px 20px 5px 10px;
height: 347px;
width: 106px;
display: inline; /* for IE 6 and below only */
/*top: 116px;
left: 656px;*/
background-color: #0000CC;
background-image: url(pics.gif);

}
#text {
/* top: 116px;
left: 7px;*/
width: 565px;
padding: 5px;
border: 1px solid blue;
}
#header {
width: 780px;
height: 97px;
/*left: 0px;
top: 0px;*/
background-image: url(background_01.gif);
border: 1px solid white;
}

img.floL {
float: left;
margin-left: 0px;
padding: 0px;
padding-top: 2px;
}

#text h1{
color: #9EAB69;
font-size: 120%;
font-family: "Trebuchet MS" sans-serif;

}
/* to clear floated elements */
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
I took out the absolutely positioned stuff, you don't need it and it will defeat your 'stretching' body section.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 02-03-2007 at 04:56 PM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 02-03-2007, 08:37 PM Re: question about css layouts...
bigfreak's Avatar
Extreme Talker

Posts: 179
Name: Andy
Trades: 0
wow, you're smooth!

now i just need to look at that and figure out what it all means.

I'll use the features in FF to play and see what does what, just the way i learn. Like how to not repeat the background. I know how to do it, just need to remember.

You're the goods kid!

there's just one thing... no dice in FF, doesn't work... hmmm what have i missed...

THANK YOU!!!!!

Last edited by bigfreak; 02-03-2007 at 08:40 PM..
bigfreak is offline
Reply With Quote
View Public Profile
 
Old 02-03-2007, 09:27 PM Re: question about css layouts...
bigfreak's Avatar
Extreme Talker

Posts: 179
Name: Andy
Trades: 0
ok, when i play around with the css, it seems that the height of the background_02.gif div tag is the issue?

when i remove the height, it works, well until i make the font small, then it doesn't lol!
bigfreak is offline
Reply With Quote
View Public Profile
 
Old 02-04-2007, 10:06 AM Re: question about css layouts...
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Take the height off of #mainbody.
The only time I could see any 'problem' with that is by shrinking the text down to such a small size, no one could read it anyway.

You can put in min-height: 400px, but IE doesn't support min-height, so that presents a problem if you were to use it.

I would also recommend that you not specify your font sizes in pixels. People with IE 6 and below will not be able to re-size the text to suit their needs. Better to use em or percentages. 70% is equal to 12px.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 02-04-2007, 02:06 PM Re: question about css layouts...
bigfreak's Avatar
Extreme Talker

Posts: 179
Name: Andy
Trades: 0
oh man, looks like i got it working!

thanks Lady! I can't add any more talkupation to you but i will when i can!

I'm going to play with it a little more and see what i can learn.

THANK YOU!
bigfreak is offline
Reply With Quote
View Public Profile
 
Old 02-04-2007, 08:36 PM Re: question about css layouts...
dionak's Avatar
Experienced Talker

Posts: 45
Name: Diona Kidd
Trades: 0
Nice one, LadynRed!
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

dionak is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to question about css layouts...
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.53101 seconds with 12 queries