CSS - Centreing Using Css
Ive arrived at this forum as Im at my wits end. The solution is prob really simple for seasoned css experts but its foxed me as Im still learning css as i want to move away from tables
Ive converted a website done with tables into css but i cant get the whole webpage centered. Its using absolute rather than relative placement which may be the problem. Thats because the content (images and flash) have to go into predetermined sized cells. I wont go through the list of solutions ive tried. Instead im hoping someone can help me with something that will work for css thats using absolute placement cuz Im here is the external css [CODE] <style type="text/css"> body { margin:0 auto; width:690px; } #header { left:0px; top:0px; width:690px; height:214px } #menu { position:absolute; left:0px; top:214px; width:179px; height:316px; } #content { position:absolute; left:179px; top:214px; width:511px; height:505px; text-align: left; } #face { position:absolute; left:0px; top:530px; width:179px; height:189px; } #id- { position:absolute; left:0px; top:719px; width:690px; height:61px; } </style> and here is the css div layout <html> <head> <title>header</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="sheet1.css" rel="stylesheet" type="text/css"> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div id="body"> <div id="header"> <img src="images/header.jpg" width="690" height="214" alt=""> </div> <div id="menu"> <img src="images/menu.jpg" width="179" height="316" alt=""> </div> <div id="content"> <img src="images/content.jpg" width="511" height="505" alt=""> </div> <div id="face"> <img src="images/face.jpg" width="179" height="189" alt=""> </div> <div id="id-"> <img src="images/_.gif" width="690" height="61" alt=""> </div> </div> </body> </html> THANKS!!!!! Similar TutorialsI can't get a div to centre inside a 100% width div in firefox. Any ideas? PHP Code: #footer_full_width { position:absolute; bottom:0; height:19px; background-image: url(../images/bottomredstripe.jpg); width:100%; color:#fff; background-color: #999; text-align:center; } #footer_panel { position:relative; bottom:0; height:19px; background-image: url(../images/gray_bottom.jpg); width:730px; height: 19px; color:#fff; background-color: #999; text-align:center; } <div id="footer_full_width"> <div id="footer_panel">FOOTER</div> </div> I want to centre all the small divs that go inside the nav div. Currently the code below centres the text inside each div in the #nav element but it does not centre the actual elements. I have 9 menu items and they should appear in the centre of the nav bar with centred text. Not on the left with centred text. The only work around I can think of is to use an inline style on the first element inside the nav bar and apply padding. This is fine for a fixed width design but we want to use the same nav bar in some fluid designs. |