Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Hybrid Css Layouts

Started by darran, Mar 13 2008 02:36 AM

11 replies to this topic

#1 darran

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 661 posts
  • Gender:Male
  • myCENT:ZERO

Posted 13 March 2008 - 02:36 AM

I was looking for a hybrid layout where the header and footer are set to full percentage width and the content is set to a fix width, a very popular layout in today's websites. Do you think you could provide such an example? Not that I do not know how to create one, I just want to know about the right way to actually layout with such specifications.

#2 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 13 March 2008 - 03:32 AM 

<!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" xml:lang="en" lang="en">
<head>
  <title>An XHTML 1.0 Strict template</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="keywords" content="keywords list here, comma seperated" />
  <meta http-equiv="description" content="insert a description here." />
  <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
  <meta http-equiv="author" content="Jim Haslip" />
  <style type="text/css">
/*<![CDATA[*/
/* =======
Template CSS
============*/
* html { margin:0; padding:0;}
html, body { height: 100%; }
#wrapper { min-height: 100%; } /* div you want to stretch */
body { margin:0 auto; text-align:center; font-size: 62.5%;}
p { margin: 1em; padding:1em; text-align:left }
#wrapper { margin: 0 auto; width: 100%; }
#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }
#header h1 { margin: 1.8em 0; }
#page_contents { text-align: left; }
#footer { margin: 1em auto; padding: .9em; text-align:center; border-top: 1px solid #666666; }
#footer a { margin: 1em auto; padding: .15em; }
/* =======
Page specific CSS Below this line */

#content_section {

	// width: 80%; // tests okay using 800px, 60em. see below. 
				// what you might have is a problem with font size in different Browsers. 
				// IE, for instance is about 50% larger than FF2/3. 
				// font-size adjusted to 62.5% in the body and use ems to size everything gets them 'close'.
				// em sizing is also suitable for accessibility (sp?). the div scales with changes to the font size (by the User).
	
	// width: 800px;
	width: 80em;;
	 
	min-height: 300px;
	border: 1px solid green; 
	margin: 0 auto;
	text-align: center; // for older IE browsers. use text-align: left; on the inner div's 
	background-color: blue;

}
/*============*/
/*]]>*/
  </style>
<!--[if lte IE 6]>
 <style type="text/css">
  #wrapper { height: 100%; }
  #content_section { height: 300px; }
   </style>
<![endif]-->
</head>


	<body>

<div id="wrapper">
<div id="header">
<h1> ... Page Header here ... </h1>

<!-- header --> </div>

<!-- header -->
<div id="page_contents" style="padding: 1em;">
<div id="contentheader" ></div>

<div id="content_section" >
<p>add content here</p>
</div>

</div>

<div id="footer" style="clear: both;"> <a href="http://validator.w3.org/check?uri=referer">validate
the xhtml</a>&nbsp;&nbsp;&copy;&nbsp;<a href="http://jlhaslip.com/">jlhaslip.com</a>&nbsp;&nbsp;<a href="http://jigsaw.w3.org/css-validator/">validate the css</a>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/ca/"><img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-sa/2.5/ca/88x31.png" /></a>
This script is licenced under a
<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/ca/">Creative
Commons Licence</a>. </div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
See the notes about the use of ems for font and div sizing.

#3 darran

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 661 posts
  • Gender:Male
  • myCENT:ZERO

Posted 01 April 2008 - 01:41 AM

That is exactly how I would create a hybrid layout but 1 question?

I tend to define my base font size with px and everything else later in em because 1em in a 12px is 12px and 0.95em is 11px and so on and so forth. For DIVs, I just use px too.

What is the significance of using em all the way? It will become something very relative.

#4 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 01 April 2008 - 01:47 AM

IE has problems with text re-sizing of pixel based pages, which is a really good feature to have if you want/need a more accessible site, so using ems solves this problem.
The percent size of Font on the Body tag brings IE font-sizes in-line with the other Browsers. Without the 62.5% there, IE will display larger font sizes by default and using this technique allows you better font management across multiple browsers.

#5 darran

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 661 posts
  • Gender:Male
  • myCENT:ZERO

Posted 01 April 2008 - 01:53 AM

View Postjlhaslip, on Apr 1 2008, 09:47 AM, said:

IE has problems with text re-sizing of pixel based pages, which is a really good feature to have if you want/need a more accessible site, so using ems solves this problem.
The percent size of Font on the Body tag brings IE font-sizes in-line with the other Browsers. Without the 62.5% there, IE will display larger font sizes by default and using this technique allows you better font management across multiple browsers.

Once again it is IE. So lets say if I put 1em as the margin-right for my DIV, what is the exact spacing in pixels it will generate?

I will be sure to note this when I get down to coding my WordPress template.

#6 rvalkass

    apt-get moo

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 3,107 posts
  • Gender:Male
  • Location:Devon, England
  • Interests:At the moment, Physics mainly!
  • myCENT:69.42
  • Spam Patrol

Posted 01 April 2008 - 09:48 AM

View Postdarran, on Apr 1 2008, 02:53 AM, said:

Once again it is IE. So lets say if I put 1em as the margin-right for my DIV, what is the exact spacing in pixels it will generate?

I will be sure to note this when I get down to coding my WordPress template.

There is no way to tell. It will depend on the browser and its settings. As one em is the width of an 'm' in the current font, at the current font size, the margin would change depending on which font and font size the browser was using.

#7 darran

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 661 posts
  • Gender:Male
  • myCENT:ZERO

Posted 02 April 2008 - 01:24 AM

View Postrvalkass, on Apr 1 2008, 05:48 PM, said:

There is no way to tell. It will depend on the browser and its settings. As one em is the width of an 'm' in the current font, at the current font size, the margin would change depending on which font and font size the browser was using.

So there is no way of setting a fixed layout which will look the same? I want to have a layout which will look the same in every browser. Let's say I am using Arial with font size: 100%, I do know that IE uses 12px for that, but I am not sure about Safari, FireFox and Opera.

#8 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 02 April 2008 - 02:01 AM

Try specifying a particular font-face, font-size and font-weight then check it in a few Browsers.
Use the body font percent code found above if they display differently and use em's as above is the cure I use.

#9 darran

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 661 posts
  • Gender:Male
  • myCENT:ZERO

Posted 02 April 2008 - 12:38 PM

I can't manage to get the em right on the DIVs, giving me a headache. What does it take reference to? What if it is a div is nested in another div?

I am confused, would appreciate some assistance, it is much more easier setting the layout in px and text size in em.

#10 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 02 April 2008 - 02:31 PM

Can you post up your code and we'll have a look to see if what you are doing is possible?
Or better still, post a link to a page...

Thanks.
Back to CSS (Cascading Style Sheets) · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → Computers
  4. → Programming Languages
  5. → CSS (Cascading Style Sheets)
  6. Welcome - Start here! - Free Web Hosting