Nov 21, 2009

Fixed Centred Layout - Learn how to code that popular Centred/Fixed width layout...

free web hosting
Open Discussion > MODERATED AREA > Computers > Programming Languages > CSS (Cascading Style Sheets)

Fixed Centred Layout - Learn how to code that popular Centred/Fixed width layout...

encryptedwrath
I remember learning this so long ago after piecing together some tutorials.

First , put together your basic HTML Code. Nothing complicated , but it should probably look like this;
CODE
<!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 content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Your Site Name</title>
</head>
<body>
<div id="layout">
All but All content should be here
</div>

</body>
</html>


The ID is important. It doesn't matter what you ID/Class it as , as long as it has a value/Id smile.gif. The entire tutorial is useless otherwise

Open a new CSS file , or make a new one in notepad
CODE

body {
text-align: center;
}

#container {
margin: 0 auto;
width: abcpx;
text-align: left;
}

Body defines the entire document. The Body text align; center is used for the general code.The container tag defines the container ID we declared earlier smile.gif.The Textalign left means all text within the container will be aligned left wink.gif. The Margin tag defines no Margins on top or bottom but auto margins on the left. So replace Abc with whatever width you care to add , and the layout will be centred according to that width.

That's essentially it. There are several other tweaks , but aren't really neccesary. Hoping I helped in some way , Encryptedwrath smile.gif

NOTES:
1) The text align is compulsary for IE users. Other browsers display the code fine without it smile.gif

 

 

 


Comment/Reply (w/o sign-up)

pyost
I would just like to add why it is necessary to use text-align: center. If you tried creating a layout with that line of CSS code, everything would look fine in Opera and Firefox, which is how it should work. However, in IE, it would not. That's why you have to add text-align: center, which, oddly enough, helps. Why oddly enough? Well, the name says it all - text-align, not div-align. After all, it's Microsoft we are talking about and their lack of respect for WWW standards.

Comment/Reply (w/o sign-up)

encryptedwrath
Thanks Pyost , will add that in smile.gif

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : fixed, centred, layout, learn, code, popular, centred, fixed, width, layout,

  1. Css Layout Help
    need help with my layout (8)
  2. Centering A Div Containing Image.
    I have a logo I need centered in a aujustable width page (9)
    http://sonesay.trap17.com/sonesayi/ Just a new layout I'm working on, Any ideas how I can get
    the logo to be centered? At the moment I can only float it left or right. I think is possible to get
    it done in tables but I would prefer to stay away from them in layouts. Any insight appreciated. by
    the way source code and css is at http://sonesay.trap17.com/sonesayi/index.html
    http://sonesay.trap17.com/sonesayi/main.css thanks ....
  3. Problem With Css Code
    (3)
    Hello, I have a css file that i made for the my forum as a skin and for some reason in Opera
    browser it dose not work right. what it does is it dose not bring in one of the images. and i just
    installed mkportal and made it to where the forum shows in the portal and now it dose not work that
    way either. Here is a picture of what it does in Opera: and here is what is show in Internet
    Explore and what it is suppot to look like: the id for the title bar in the css file is
    "maintitle" here is the css code: CODE html { overflow-x: auto; } BODY { background-c....
  4. Looking For A Fix To Use "fixed" Positioning In Ie
    (8)
    Hi all I'm trying for the first time to use JS to modify styles and such and part of my design
    is to have a DIV appear in the middle of the browser's window, so to do this, and keep the DIV
    in the middle even while scrolling ive used the FIXED positioning style with CSS, now i develop in
    FF so as soon as i toggle to IE, version 6.x, i suddenly see that my DIV is just stuck at the top
    not where it should be and not FIXED either. After some research i find that FIXED doesnt work in IE
    less than version 7, now i could just upgrade to IE7 despite my reluctance but t....
  5. Lists, Unordered And Nested
    some layout tricks (2)
    Unordered lists are one of the three list types in (x)html. The others are Ordered Lists and
    Definiton Lists. The w3c page of information about lists is here They all behave the same as
    (x)html elements, but there are some differences between them. Read the Specification page linked
    above to know more that you need to know about them. Only difference between html4 and xhtml is the
    tags must be lower-case and closed for xhtml to be valid. Ordered Lists have numbers preceding
    them. Paste the following code into a file and display it in your Browser to see the eff....
  6. Help Fix My Site's Css/layout Issues
    Thanks for your time (9)
    The first issue has been resolved. Please goto Post #7 to see the current discussion.
    This is in reference to: http://facesofwar.org/cms/ When you load the page up in Firefox it
    works fine. But when you use I.E. it creates a nasty line break after each of the spans containing
    a dividing line. The relevant html is: CODE
    Home    Iraq    Alt.
    Media    Other    Contact And the relevant css (for
    1280 resolutions) is: CODE .menuOuter {     width: 100%;    ....
  7. Basic Css Layout Issue
    Floated Cell with similar height (5)
    Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem being I
    don't know how to make a floated cell be the same height as another. FOr example CODE
    just some stuff over here! but... over here I have even more stuff to display
    now If I float the left to the left and the right to the right and set ther widths so that they
    will be beside eachother the left div is shorter then the right, which makes sense because there is
    more content in the right. I want to know how to make them the same heigh....
  8. Css Layout: Trouble With Ie
    the scrollbar and margin-bottom (4)
    I have a site which I'm developping and trying to get a frames-like layout design. But IE does
    not propperly show the scrollbox, its hidden behind the fixed divs of the top header and the bottom
    footer... Firefox does alright, so If you dont understand what I mean you can check it out here:
    http://web.cucea.udg.mx/ineser/alap/test.php Seems like Opera and Safari are doing also good...
    And also, the margin of #content (which is the main content area) is not working, becouse it does
    not go up above the footer, I don't know what is going on (that rule is ins....
  9. Unordered List Css Layout
    two rows of list and sublist (4)
    I have a layout which i want to do fully in CSS. Im having trouble centering the second list, or
    sublist which comes from the menu. It doesnt work in IE now, just firefox (Actually the page doesnt
    even show on IE, nor Opera, i dont know why). I just want it to appear centered, when im hovering
    the main list, not left aligned... Here's the link, youll understand when you see it...
    http://web.cucea.udg.mx/cucea/graphix/level5/ I also want to fix the background, (i removed the
    background for now) becouse when i hover the sublist items, the background becomes bigge....
  10. CSS Rollover Menu Code
    for < a > tags used on HTML pages (5)
    QUOTE(moldboy @ Nov 18 2005, 03:23 PM) ...  I am wondering if you have a particular site in mind
    that would show how? 206171 Hate to add this to a topic about unordered lists, but here
    goes. Maybe this part will get split into its own topic later. I'll ask another mod how to do
    that. ( new guy comment) My Webpage , or click on the bottom link of my signature to go to the
    same site which has css rollover effects. This isn't the exact code that performs the rollover
    on that site, but is from another (handier to acquire) html page on my computer. ....
  11. Moving Ads With Css Layout On Free Hosting
    CSS help (7)
    Can anyone help me how to move top banner from free host? I hear that can be done with css!....
  12. Help With A Css Design
    code optimization (8)
    hello there!, i need somebody tell me how to put a scrollbar into my divs or tables, and how to
    delete the h3 cellpadding or how to bold a text with css. thanks a lot! /blink.gif' border='0'
    style='vertical-align:middle' alt='blink.gif' /> ....
  13. Css Layout Generator - *free*
    Generate a CSS layout for your site (8)
    pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
    alt='smile.gif' /> and it's freely available online.
    http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
    structural elements your site requires (header, footer, columns). Then specify a size in the field
    provided and choose a background color from the color chooser below. The color chooser changes
    values as you move your mouse along a row. To set a value click on the color row to release click
    again. Once the color in the box is th....
  14. Css How To Use It?
    how do you use it to make a custom layout 4 website? (3)
    how you make a custom layout and what is the coding and stuff?....
  15. Css Files, Get Your Css Files Here! [resolved]
    Want a nice CSS layout? (0)
    Alright, if anybody wants a CSS layout; I'll make one for you! Just tell me what you want the
    background color to be, main font color, and the link colors! Then later in the topic I'll post
    them and I'll post the username of the user that requested next to them so you know which one is
    yours! So if anyone wants a CSS File; Ask Mike! >_>....

    1. Looking for fixed, centred, layout, learn, code, popular, centred, fixed, width, layout,

Searching Video's for fixed, centred, layout, learn, code, popular, centred, fixed, width, layout,
See Also,
advertisement


Fixed Centred Layout - Learn how to code that popular Centred/Fixed width layout...

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com