Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to center my design using CSS

    Following the code that was generously provided by ahallicks can anybody tell me how to amend the css so as to ensure that my design is always centered on the screen irrespective of the screen resolution. At the moment my design looks centered on a 1024 x 768 but is flushed left on 1280 x 1024. Here is the code:

    Quote Originally Posted by ahallicks View Post
    Code:
    html {
    padding: 0;
    margin: 0;
    }
    
    body {
    padding: 0;
    margin: 0;
    }
    
    #wrapper {
    margin: 0 auto;
    width: (whatever);
    height: auto;
    }
    
    #header {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #contenta {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #footer {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you actually change the part where it said width: (whatever) on the #wrapper? For your layout to be centered it needs to have a defined width.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    At the moment it is zero. How do I know which width to specify as different screen resolutions will have different width for the design to display in the center?

    I have only just started learning CSS so please bear with me if I'm asking elementary stuff.

    Thanks

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well if you don't want a horizontal scrollbar on a 800x600 resolution at full screen your layout can't be wider than 780px but this leaves the rest of the screen for empty space. Ideally having a layout that is fluid is the best layout to have meaning it resizes in width to fit the users resolution.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK by fluid what I understand is that if I was designing using tables, I would specify the table size in % instead of pixels and use the <DIV align="center"> tag. So at whether viewed on 1024 or higher it will always be in the middle.

    Remembering that I'm new to CSS (only started dabbling with it 2 days ago) how would code it in CSS using the code above. I did some research on w3schools.com and csszengarden.com but couldn't find anything that showed me how to position my design in the center. Basically the design is to be in the center of the screen with white space columns on both sides of the screen.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well first you would need to work on the fluid layout.
    http://bonrouge.com/2c-hf-fluid.php

    Once you've got that done you can give it a percentage width and margin:auto; will take care of the centering. You may want to look into min-width as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the link. I have read through the tuts and tried changing my code but nothing happened. Can you please have a look at my page HERE and the code and tell me what is it I need to change so that the designed is always centered irrespective of the screen resolution. I am targeting 1024 x 768 and above.

    Thanks

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't just change a stylesheet and expect things to work. You will need to resize your graphics for the layout to work. You also can't make up your own tags which it seems like you did. I think you need to do more tutorials on basic html before you go any further.
    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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>B & B France</title>
    <link href="bedStyles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="welcomeBox"><span class="welcomeTxt">Chambre d'Hôtes et Maison Hôtes de qualité à l'accueil enthousiaste<BR/><BR/>
    
    Séjourner en chambre d'hôtes, maison d'hôtes ou même table d'hôtes 
    est 
    une façon charmante de passer ses vacances en France et notre site 
    vous 
    permet de retrouver les B&Bs soigneusement sélectionnés par une 
    équipe 
    de professionnels spécialisés dans ce type d'hébergement.<BR/><BR/>  
    
    Ainsi vous pouvez être sûr que les chambres d'hôtes 
    sélectionnés, représentent &quot;la crème de la crème&quot; comme disent nos amis anglais.
    
    Bed & Breakfast France propose également un serveur vocal, de guides 
    utiles et s'assure que vous tiriez le meilleur profit de votre séjour.<BR/>
    <BR/>
    
    « En entrant, je connais déjà mes hôtes, j'ai senti l'ambiance et 
    le 
    style de l'accueil, je sais que je ne serai pas déçu. »
        </span> </div>
    <div id="languageBox"><SPAN class="languageTxt">Choississez le pays qui vous conviens le mieux pour avoir acces au B & B dans les pays respectifs.<BR/><BR/>
    <IMG src="pictures/flags/usa.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=uk" class="roll" target="_blank">Etats Unis</A> - Anglais<BR/><BR/>
    
    <IMG src="pictures/flags/unitedkingdom.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=uk" class="roll" target="_blank">Grande Bretagne</A> - Anglais<BR/><BR/>
    <IMG src="pictures/flags/france.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=fr" class="roll" target="_blank">France</A> - Francais<BR/><BR/>
    <IMG src="pictures/flags/germany.gif" /> <a href="http://www.bedbreak.com/default.asp?lng=de" class="roll" target="_blank">Allemagne</a> - Deutsch<BR/><BR/>
    <IMG src="pictures/flags/italy.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=it" class="roll" target="_blank">Italie</A> - Italiano<BR/><BR/>
    
    <IMG src="pictures/flags/spain.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=es" class="roll" target="_blank">Espagne</A> - Castellano
    </SPAN></div>
    <div id="contactBox"><span class="contactTxt">
    Vous pouvez nous contacter par un des moyens suivants:<BR/><BR/>
    
    <SPAN class="bold">Telephone:</SPAN><BR/>
     01 34 19 9000<BR/><BR/>
    <SPAN class="bold">Fax:</SPAN><BR/> 01 39 94 89 72<BR/><BR/>
    
    <SPAN class="bold">Serveur Vocal:</SPAN><BR/> 0892 69 9000*<BR/>
    *0,34€/minute à partir d'un poste fixe<BR/><BR/>
    <SPAN class="bold">Email:</SPAN><BR/> bab@bedbreak.com<BR/><BR/>
    <SPAN class="bold">Adresse:</SPAN><BR/>
    			Bed & Breakfast France<BR/>
    			C/o Association Française BAB France<BR/>
    
    			23 Centre Commerciale Les Vergers<BR/>
    			95350 ST-BRICE-SOUS-FORET<BR/>
    			FRANCE</span>
      </div>
    			
    <div id="partnersBox">
    <span class="partnersTxt"><A href="http://www.europcar.co.uk" class="roll" target="_blank">Europcar</A>  <BR/>
    "Location de voitures&quot;<BR/>
    
    <BR/><BR/>
    <A href="http://www.ferrysavers.com" class="roll" target="_blank">ferrysavers.com</A><BR/>
    "Voyagez par ferry"<BR/><BR/><BR/>
    <A href="http://www.bedbreak.com/Condresa/fr/ChHQPfr.asp" class="roll" target="_blank">Hotes qualite Paris</A><BR/>
    "Hebergement de qualite garantie"<BR/><BR/><BR/><BR/><BR/>
    <A href="http://www.thomascookpublishing.com/book.htm?series=Drive_Around&book_id=214" class="roll" target="_blank">Thomas Cook Publishing</A>  <BR/>
    "Editeurs des guides Bed & Breakfast"
    <BR/>
    <BR/><BR/><BR/>
    <A href="http://www.holidayautos.co.uk" class="roll" target="_blank">Holiday Autos</A><BR/>
    
    &quot;Location de voitures&quot; </span>
    <div id="europcar"></div><BR/>
    <div id="ferry"></div>
    <div id="thomasCook"></div>
    <div id="hotesQualiteParis"></div>
    <div id="holidayAutos"></div>
    
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    Code:
    #wrapper {
    margin: 0 auto;
    width:592px;
    position:relative;
    }
    You are also making the mistake of thinking that absolute positioning is the way to place elements on the page. Most layouts require little or NO absolute positioning.
    Last edited by _Aerospace_Eng_; 12-13-2006 at 02:25 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm not at my home pc at the moment so will try your amended codes and let you know how things go. But I would like to clear a few things:

    1. I have never designed in CSS before.
    2. The code was provided by one of the forum members and the <wrapper> tag did seem superstitious to me but decided to play along as I'm new to CSS and thought that was the way it is done.
    3. Why do I need to resize my graphics to have it centered on 1024 x 768 and above? I am not targeting 800 x 600.
    4.If layout require little or no absolute positioning, when is it appropriate to use it?
    5. How are graphics and other elements positioned on the page then?

    Thanks for clarifying these points for me.
    Last edited by forgottenglory; 12-13-2006 at 03:41 PM.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    3. Well your layout is a fixed width so no need to resize the graphics. I said that before I looked at your layout and CSS
    4. and 5. Just let things flow naturally don't use absolute positioning. If you want something so far from the left then use a left margin. Since your layout is a fixed width then this example would be better for you.

    http://bonrouge.com/2c-hf-fixed.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The thing that centers an element on the page (a block-level element, that is) is this code:

    Code:
    #element {
     margin: 0 auto;
    }
    
    OR
    
    #element {
     margin: 2em auto 1em auto;
    }
    Essentially you are putting a margin all around the element—in the case of the first example, it zeros the margins on the top and bottom and uses equal margins on the left and right. Equal margins on both sides = centered element.

    The second example creates a 2em top margin, an auto right margin, a 1em bottom margin, and an auto left margin. http://w3schools.com/css/css_margin.asp

    You need a width on the #element, though, because if you don't specify one a block-level element will stretch to the full width of the container. In other words…

    Code:
    #not_centered {
     margin: 0 auto;
    }
    
    #centered {
     width: 950px;
     margin: 0 auto;
    }
    
    <div id="not_centered">
     <div id="centered"><!-- this one is centered --></div>
    </div>
    About CSS, all CSS does is style HTML… easy peasy. So you code your HTML as well as you can so it all makes sense semantically, then add you CSS. Eventually you'll start seeing where you need to add presentational elements (like <div> and <span>, in this case, <div id="wrapper">) to get the look you want (in this case, #wrapper { width: 800px; margin: 0 auto; }).

    You might want to take a look at some basic tutorials:

    http://htmldog.com
    http://w3schools.com

    Hope this helps…

  • #12
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for all your help guys! I will apply your recommendations and read through the tutorials...and hopefully everything goes fine.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •