|
CSS - Centering A Div Table On Top Of A Page?
Hi,
Im having a problem centering a DIV table exactly how i want it too. I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600. ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600 I have included/attached a image to kinda give a better idea. Similar TutorialsHowcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. Can anyone please tell me why cant i see a table centered by using this style sheet? All other elements are centered except form the tables tmemselves. Code:
/* style.css */
body {
background-image: url(/data/images/night.gif);
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
#page {
position: relative;
width: 100%;
height: auto;
}
#select_form {
margin-top:1 5px;
font-size: 3ex;
color: lime;
text-align: center;
}
#DivText {
overflow: auto;
background-image: url(/data/images/kenzo.jpg);
border: 4px Ridge Magenta;
width: 850px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
color: LightSkyBlue;
text-align: left;
font-family: Times;
font-size: 18px;
}
#user_form {
position: relative;
margin-top: 60px;
}
#info {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
#links {
text-align: center;
color: lime;
}
#links a {
color: lime;
}
#links p {
font: 12px bold;
text-align: right;
margin-bottom: 10px;
}
table.user_form {
background-image: url(/data/images/swirl.jpg);
width: 55%;
color: lime;
font: 18px times;
text-align: center;
border: 5px inset blue;
border-collapse: collapse;
}
table.info {
background-image : url(/data/images/blue.jpg);
width: 90%;
color: lime;
font: 18px comic;
text-align: center;
border: 3px inset red;
border-collapse: collapse;
}
table.tip {
background-image : url(/data/images/brick.jpg);
width: 20%;
color: lime;
font: 18px comic;
text-align: center;
border: 3px inset magenta;
border-collapse: collapse;
}
table.games {
background-image : url(/data/images/swirl.jpg);
width: 80%;
color: yellow;
font: 18px comic;
text-align: center;
border: 3px inset magenta;
border-collapse: collapse;
}
table {
margin-top: auto;
margin-bottom: auto;
text-align: center;
}
Tr {
text-align: center;
border: 2px inset blue;
}
td {
padding-top: 3px;
padding-bottom: 3px;
padding-right: 5px;
padding-left: 5px;
border: 1px inset yellow;
}
span {
text-align: center;
}
h3 {
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
}
span.yellow {
font: 18px comic;
color: yellow;
}
td.pink {
font: 18px comic;
color: pink;
}
td.lime {
font: 18px comic;
color: lime;
}
td.yellow {
font: 18px comic;
color: yellow;
}
td.cyan {
font: 18px comic;
color: cyan;
}
td.white {
font: 18px comic;
color: white;
}
td.aquamarine {
font: 18px comic;
color: aquamarine;
}
h3.pink {
font: 18px comic;
color: pink;
}
h3.lime {
font: 18px comic;
color: lime;
}
h3.yellow {
font: 18px comic;
color: yellow;
}
h3.cyan {
font: 18px comic;
color: cyan;
}
h3.white {
font: 18px comic;
color: white;
}
h3.aquamarine {
font: 18px comic;
color: aquamarine;
}
I'm trying to center a table with CSS, because apparently putting align="center" in the table tag doesn't validate as HTML Strict. I've tried table.center { position: fixed; left: 50%; } but that makes the table go off of the page. I've tried all the options given on w3schools.com with their positioning lessons, but none of them work. Any suggestions? Seems like I'm always trying to get something to render correctly in IE but this time it's firefox that is acting ornery. There's not much to the page I'm working on. The table (#schoolstable) should be centered in the #mainbody div. Works in ie, fails in firefox. Here's my css: Code: /* = Default Layout
-----------------------------------------------------------------------------*/
/* Remove padding and margin */
* {
margin: 0;
padding: 0;
}
/* Remove border around linked images */
img {
border: 0;
}
body {
text-align: center;
min-width: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/
h1 {
margin: 8px 0;
}
h2 {
margin: 8px 0;
}
p {
margin: 4px 0;
}
ul {
margin: 8px 0;
}
li {
font-size:14px;
}
form {
margin: 8px 0;
}
/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/
#wrapper {
width:760px;
margin: 0 auto;
text-align: center;
}
#masthead {
width:760px;
margin: 0;
background: url(../images/indexheader.jpg) no-repeat center;
height: 270px;
}
#mainbody{
width:760px;
margin: 0;
text-align: center;
}
/* = Basic Links
-----------------------------------------------------------------------------*/
a, a:visited {
color: #000000;
background-color: #EEEEEE;
width: 150px;
line-height: 18px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
display: block;
}
a:hover, a:visited:hover {
color: #FFFFFF;
width: 150px;
text-decoration: none;
background-color:#00FF33;
}
/* = Advanced Links
-----------------------------------------------------------------------------*/
.c0000FF a, .c0000FF a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c0000FF a:hover, .c0000FF a:visited:hover {
color: #FF6600;
width: 150px;
text-decoration: none;
background-color: #0000FF;
}
.c990000 a, .c990000 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c990000 a:hover, .c990000 a:visited:hover {
color: #FFCC00;
width: 150px;
text-decoration: none;
background-color: #990000;
}
.cCC6600 a, .cCC6600 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.cCC6600 a:hover, .cCC6600 a:visited:hover {
color: #FFFFFF;
width: 150px;
text-decoration: none;
background-color: #CC6600;
}
.c3366CC a, .c3366CC a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c3366CC a:hover, .c3366CC a:visited:hover {
color: #FFCC33;
width: 150px;
text-decoration: none;
background-color: #3366CC;
}
.c333366 a, .c333366 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c333366 a:hover, .c333366 a:visited:hover {
color: #CCCC99;
width: 150px;
text-decoration: none;
background-color: #333366;
}
/* = Basic Lists
-----------------------------------------------------------------------------*/
ul {
list-style-position: inside;
list-style-type: none;
}
ul li {
}
/* = Advanced Lists
-----------------------------------------------------------------------------*/
.schoollist {
text-align: center;
}
.schoollist li {
line-height: 16px;
padding: 1px 1px;
width: 150px;
}
/* = Tables
-----------------------------------------------------------------------------*/
table {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 8px 0;
}
tr {
padding: 0;
margin: 0;
}
td {
padding: 0;
margin: 0;
}
/* = Advanced Tables
-----------------------------------------------------------------------------*/
#schoolstable {
}
#schoolstable tr {
}
#schoolstable td {
}
/* = Forms
-----------------------------------------------------------------------------*/
fieldset {
}
/* = Advanced Forms
-----------------------------------------------------------------------------*/
Okay, I have a table and I can center it using css, and I can turn on the outside border, but I cannot seem to turn on the row borders. How do I do this. I tried.style="border:5px outset #a0a0a0; margin-left:auto;margin-right:auto; margin-top:15%;" which works for the outside border and centering, but to turn on the inside cell row borders I had to use border="3" and then I am unable to center the table on the page no matter what I do. How do I center this table properly using css with both outside border and the row border turned on. I seem to have had success creating a cross-platform method for centering tables. #centeredTable { display:table; width: auto; margin-top: 5px; margin-left: auto; margin-right: auto; text-align: center; } You can view an example he http://jim.centerfuse.net/css/table...ed-example.html IE ignores display:table and doesn't successfully interpret margin: auto, but text-align: center seems to take care of centering the table in IE. Tested in Opera 7, IE 6, IE 5.5, Mozilla 1.5. (I have the top margin in there just to move it away from my header a bit.) It does require that you set a width on your table, or it will simply fill the entire page, though you could get around that with a container DIV (like this: http://jim.centerfuse.net/css/table...able_width.html ). I thought others might be interested in seeing this, since it seems to be a common problem. I had originally developed a slightly more complicated way of doing what I need to do, but this seems to work just as well. My main concerns are that future versions of IE will break this code because of added support for display:table and margin:auto, or that the specs for display:table; will change in the future, since it seems to be entirely unsupported in some browsers (namely IE). Comments/Flames welcome -Jim Keller I know this is probably soooo not kosher, but this is where I'm at ... I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen. I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose. Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it. Here's the css code: Code: /* star rating */
.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
ul.rating li{
display:inline
}
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
.rating a:active {
background-position:top;
}
and here's the HTML code (in php format): Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns. Cheers. Julian i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie..... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ranid Photo Gallery</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff"> <div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;"> <h1>Ranid Frog Photos</h1> <p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0> <tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr> </table></p> <h5>:<a href="gallery.html">Back to the Gallery</a>:</h5> </body> </html> My style sheet Code:
body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
any ideas? I hate to sound like a newbie. I am using dreamweaevr and I am trying to center a page using css. here is my html (I know it is ugly!) [code] <body onLoad="MM_preloadImages('/images/m2.jpg','/images/m1_over.jpg','/images/m3_over.jpg','/images/m4_over.jpg','/images/m5_over.jpg','/images/m6_over.jpg','/images/m7_over.jpg','/images/m8_over.jpg','/images/m1.jpg')"> <!-- Save for Web Slices (01_home.psd) --> <div id="Table_01"> <div id="logo"> <img src="images/logo.jpg" width="980" height="105" alt=""> </div> <div id="id01-home-02"> <img src="images/01_home_02.jpg" width="970" height="1" alt=""> </div> <div id="header-bgd1"> <img src="images/header_bgd1.gif" width="1" height="46" alt=""> </div> <div id="id01-home-04"> <img src="images/01_home_04.jpg" width="9" height="46" alt=""> </div> <div id="id01-home-05"> <img src="images/01_home_05.jpg" width="20" height="77" alt=""> </div> <div id="m1-act"> <img src="images/m1.jpg" width="114" height="45" id="Image2" onMouseOver="MM_swapImage('Image2','','images/m1_act.jpg',1)" onMouseOut="MM_swapImgRestore()"></div> <div id="id01-home-07"> <img src="images/01_home_07.jpg" width="4" height="77" alt=""> </div> <div id="m2"> <a href="#"><img src="images/m2.jpg" alt="" width="114" height="45" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/m2_over.jpg',1)" onMouseOut="MM_swapImgRestore()"></a> </div> <div id="id01-home-09"> <img src="images/01_home_09.jpg" width="4" height="77" alt=""> </div> <div id="m3"> <img src="images/m3.jpg" alt="" width="114" height="45" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/m3_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-11"> <img src="images/01_home_11.jpg" width="4" height="77" alt=""> </div> <div id="m4"> <img src="images/m4.jpg" alt="" width="114" height="45" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/m4_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-13"> <img src="images/01_home_13.jpg" width="4" height="77" alt=""> </div> <div id="m5"> <img src="images/m5.jpg" alt="" width="114" height="45" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','images/m5_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-15"> <img src="images/01_home_15.jpg" width="4" height="77" alt=""> </div> <div id="m6"> <img src="images/m6.jpg" alt="" width="114" height="45" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','images/m6_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-17"> <img src="images/01_home_17.jpg" width="4" height="77" alt=""> </div> <div id="m7"> <img src="images/m7.jpg" alt="" width="114" height="45" border="0" id="Image7" onMouseOver="MM_swapImage('Image7','','images/m7_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-19"> <img src="images/01_home_19.jpg" width="4" height="77" alt=""> </div> <div id="m8"> <img src="images/m8.jpg" alt="" width="114" height="45" border="0" id="Image8" onMouseOver="MM_swapImage('Image8','','images/m8_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-21"> <img src="images/01_home_21.jpg" width="10" height="45" alt=""> </div> <div id="id01-home-22"> <img src="images/01_home_22.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-23"> <img src="images/01_home_23.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-24"> <img src="images/01_home_24.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-25"> <img src="images/01_home_25.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-26"> <img src="images/01_home_26.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-27"> <img src="images/01_home_27.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-28"> <img src="images/01_home_28.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-29"> <img src="images/01_home_29.jpg" width="114" height="32" alt=""> </div> <div id="header-bgd2"> <img src="images/header_bgd2.jpg" width="20" height="32" alt=""> </div> <div id="head-img1-01-01"> <img src="images/head_img1_01_01.jpg" width="595" height="246" alt=""> </div> <div id="head-img1-01-02"> <img src="images/head_img1_01_02.jpg" width="385" height="246" alt=""> </div> <div id="id01-home-33"></div> <div id="id01-home-34"></div> <div id="banner1"></div> <div id="id01-home-36"></div> <div id="id01-home-37"></div> <div id="id01-home-38"></div> <div id="id01-home-39"> <img src="images/01_home_39.jpg" width="980" height="73" alt=""> </div> <div id="id01-home-40"> <img src="images/01_home_40.jpg" width="979" height="36" alt=""> </div> <div id="id01-home-41"> <img src="images/01_home_41.jpg" width="1" height="36" alt=""> </div> </div> <!-- End Save for Web Slices --> </body> [code] I have tried using the tutorials on other sites and have had no luck. Can someone please help? Here is my CSS: [code]@charset "utf-8"; /* CSS Document */ <style type="text/css"> <!-- body { text-align: center; } #Table_01 { position:absolute; left:0px; top:0px; width:980px; height:987px; text-align:left; } #logo { position:absolute; left:0px; top:0px; width:980px; height:105px; } #id01-home-02 { position:absolute; left:0px; top:105px; width:970px; height:1px; } #header-bgd1 { position:absolute; left:970px; top:105px; width:1px; height:46px; } #id01-home-04 { position:absolute; left:971px; top:105px; width:9px; height:46px; } #id01-home-05 { position:absolute; left:0px; top:106px; width:20px; height:77px; } #m1-act { position:absolute; left:20px; top:106px; width:114px; height:45px; } #id01-home-07 { position:absolute; left:134px; top:106px; width:4px; height:77px; } #m2 { position:absolute; left:138px; top:106px; width:114px; height:45px; } #id01-home-09 { position:absolute; left:252px; top:106px; width:4px; height:77px; } #m3 { position:absolute; left:256px; top:106px; width:114px; height:45px; } #id01-home-11 { position:absolute; left:370px; top:106px; width:4px; height:77px; } #m4 { position:absolute; left:374px; top:106px; width:114px; height:45px; } #id01-home-13 { position:absolute; left:488px; top:106px; width:4px; height:77px; } #m5 { position:absolute; left:492px; top:106px; width:114px; height:45px; } #id01-home-15 { position:absolute; left:606px; top:106px; width:4px; height:77px; } #m6 { position:absolute; left:610px; top:106px; width:114px; height:45px; } #id01-home-17 { position:absolute; left:724px; top:106px; width:4px; height:77px; } #m7 { position:absolute; left:728px; top:106px; width:114px; height:45px; } #id01-home-19 { position:absolute; left:842px; top:106px; width:4px; height:77px; } #m8 { position:absolute; left:846px; top:106px; width:114px; height:45px; } #id01-home-21 { position:absolute; left:960px; top:106px; width:10px; height:45px; } #id01-home-22 { position:absolute; left:20px; top:151px; width:114px; height:32px; } #id01-home-23 { position:absolute; left:138px; top:151px; width:114px; height:32px; } #id01-home-24 { position:absolute; left:256px; top:151px; width:114px; height:32px; } #id01-home-25 { position:absolute; left:374px; top:151px; width:114px; height:32px; } #id01-home-26 { position:absolute; left:492px; top:151px; width:114px; height:32px; } #id01-home-27 { position:absolute; left:610px; top:151px; width:114px; height:32px; } #id01-home-28 { position:absolute; left:728px; top:151px; width:114px; height:32px; } #id01-home-29 { position:absolute; left:846px; top:151px; width:114px; height:32px; } #header-bgd2 { position:absolute; left:960px; top:151px; width:20px; height:32px; } #head-img1-01-01 { position:absolute; left:0px; top:183px; width:595px; height:246px; } #head-img1-01-02 { position:absolute; left:595px; top:183px; width:385px; height:246px; } #id01-home-33 { position:absolute; left:0px; top:429px; width:980px; height:40px; background-color:#363d3e; } #id01-home-34 { position:absolute; left:0px; top:469px; width:600px; height:208px; background-color:#363d3e; } #banner1 { position:absolute; left:600px; top:469px; width:360px; height:157px; background-image:url(images/banner1.jpg); } #id01-home-36 { position:absolute; left:960px; top:469px; width:20px; height:208px; background-color:#363d3e; } #id01-home-37 { position:absolute; left:600px; top:626px; width:360px; height:51px; background-color:#363d3e; } #id01-home-38 { position:absolute; left:0px; top:677px; width:980px; height:201px; background-color:#4a585a; } #id01-home-39 { position:absolute; left:0px; top:878px; width:980px; height:73px; } #id01-home-40 { position:absolute; left:0px; top:951px; width:979px; height:36px; } #id01-home-41 { position:absolute; left:979px; top:951px; width:1px; height:36px; } --> </style>[code] First off all, I am new to CSS so please go slow on me! I am trying to center a Wordpress website wich has 2 colums. #content and sidebar. I want the page to center according the users screen resolution. A good example of how I wood like to see it work is http://www.xterior.nl If you resize the window the site responds to it. Website adres: http://www.accent-aes.com Any help is highly appreciated. Many thanks in advance. Jeroen My current CSS file: Code: body {
background: url(images/qpwilm-bkgrnd.jpg) repeat-x top left fixed;
background-color: #f1f0e5;
font: 12px "Helvetica Neue", helvetica, tahoma, arial;
color: #000000;
margin:0px;
padding:0px;
}
a {
color: #000000;
text-decoration: underline;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
/********************************************************************************/
/*wp admin bar plugin*/
#wp-admin-bar {margin:0; padding:5px; background:#f9f9f9; border:1px solid #666; clear:both; text-align:center;}
#wp-admin-bar ul {margin:0; padding:0;list-style:none;}
#wp-admin-bar ul li {list-style:none; display:inline; margin:0 10px; padding:0;}
/********************************************************************************/
/*Structure*/
#header{
position:relative;
margin:0px;
padding:0px;
background: url(images/qpwilm-header-bkgrnd.jpg) repeat-x top left;
width:100%;
height:150px;
}
#headerimg {
float:left;
margin:0px;
padding:0px;
width:100%;
height:150px;
background: url(images/qpwilm-header.jpg) no-repeat top left;
}
#header ul {position: absolute; bottom: 0; left: 55px;}
/********************************************************************************/
/*nav menu*/
ul#nav {list-style: none; font-size: 1em; margin:0; padding:0;}
ul#nav li { float: left; list-style: none; }
span.slash { margin-left: 10px; margin-right: 10px; color: #999;}
ul#nav li a { display: block; color: #2078ba; text-decoration: none; background-color: #f1f0e5; margin-right:5px; padding: 5px 10px;}
ul#nav li a:hover { color: #fff; background-color: #2078ba;}
/********************************************************************************/
/* #wrapper { padding-left: 30px; margin: 30px auto 0; } */
#wrapper {
padding-left: 30px; margin: 30px auto 0; }
#content {
width: 705px;
text-align: left;
float: left;
margin: 5px;
padding: 0px 20px 30px 20px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar {
text-align: left;
padding: 20px;
float: left ;
margin: 5 px;
}
#sidebar-1 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
#sidebar-2 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar ul li{
padding-bottom:15px;
}
.post, .page {
padding-top:30px;
padding-bottom:30px;
}
.post img, .page img {
background-color:#FFFFFF;
padding: 9px;
border: 1px solid #ffffff;
margin: 0 5px 5px 0;
}
.post img:hover, .page img:hover {
border: 1px solid #858482;
}
.post-title, .page-title {
font-size: 1.4em;
color:#ffffff;
margin: 0 5px 5px 0;
float:left;
}
.page-title {
margin-bottom: 30px !important!;
}
.post-date-meta {
float:left;
margin: 0 0 25px 0;
}
.comments-title-meta {
float:left;
margin: 0 0 20px 0;
}
span.date, .comments-title {
font-size: 0.9em;
margin:0;
padding:0;
font-weight:bold;
}
.postmeta, .comments-meta {
font-size: 0.7em;
font-weight:bold;
}
/**********************************************************************************/
/*Typography*/
/*Header text Option 1 - blog title text replaced with logo image.
This code hides the plain text blog title and description and adds an image or logo.
It's on by default. To disable it, just comment out the following "h1", "h1 a" and".description" tags
and uncomment out one of options 2 or 3.
*/
h1 {
float:center;
margin:0 43% 0 57%;
background: url(images/qpwilm-header-logo.png) no-repeat center left;
text-indent: -4000px;
width:80px;
height:105px;
}
h1 a {
display:block;
width:91px;
height:114px;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 1 */
/*Header text Option 2 - blog title in red box with live text. Blog description hidden.
This code uses the live text Blog Title and puts it in a nice red box, it also hides the blog description.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
margin:0 43% 0 57%;
background-color: red;
width:80px;
padding: 5px 5px 10px 5px;
text-align: center;
}
h1 a {
display:block;
bottom:0;
margin-top: 60px;
font-size: 0.5em;
color: #fff;
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 2 */
/*Header text Option 3 - Plain text blog title and description
This code displays the Blog Title and Description in plain boring live text.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
font-size: 3em;
margin: 50px 0 0 55px;
}
h1 a {
text-decoration: none;
color: #fff;
display: block;
}
h1 a:hover {
color: #f0160c;
}
.description {
float:center;
margin: 0 0 0 55px;
font-size: 1.5em;
color: #fff;
}
*/
/**********************************************************************************/
/*Typography continued*/
h2 { margin-top: 20px; margin-bottom: 0; line-height: 1.5em;}
h2 a { color: #ffffff; text-decoration: none; background-color:#f0160c; padding: 5px 10px;}
h2 a:hover { color: #f0160c; background-color:#ffffff;}
.sidebar h2 {
font-size: 1.1em;
color:#f0160c;
}
.sidebar {
font-size: 1em;
}
.post h3, .page h3, .archive-title, div.page .archives-month a, #postcomment {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
display:block;
padding: 5px 10px;
background-color:#ffffff;
clear:left;
font-weight: bold;
}
div.post h2 span.nobreak {
white-space: nowrap;
}
p { clear:both; font-size: 1em; line-height: 1.5em; margin: 1.2em 0; }
ol, ul {
font-size: 0.8em;
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
}
ul li,
ol li{ margin-bottom: 0.2em; }
.sidebar ul, .sidebar ol {
font-size: 1em;
}
img, a img{ border:0px;}
.sidebar a { text-decoration: none; }
#sideblog-1 a,
.textwidget a,
.widget widget_meta a,
.posts-nav a { text-decoration: underline !important!; }
#sideblog-1 a:hover,
.textwidget a:hover,
.widget widget_meta a:hover,
.posts-nav a:hover { text-decoration: none !important!; }
blockquote {
margin: 0px;
padding: 0 30px;
border-left: 4px solid #ffffff;
font-size: 0.9em;
}
pre{
display: block;
margin: 1.0em 1.5em 1.0em 0;
padding-left: 0.8em;
border-left: 1px solid #ccc;
background-color: #eee;
overflow: auto;
}
code{font-family: monospace; font-size: 11px; background-color: #eee;}
pre code{ line-height: 1.3em;}
kbd{
background-color: #ddd;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: inherit;
font-family: inherit;
padding: 0 3px 2px 4px;
}
del, del * { text-decoration: line-through; }
.comments-link, .tags, .small{
font-size: 0.7em;
}
ol.postspermonth, ul.postspermonth {
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
font-size: 0.7em;
}
ul.postspermonth li, ol.postspermonth li{ margin-bottom: 0.2em; }
.update {
color: #f0160c;
font-weight: bold;
}
.posts-nav {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
padding: 5px 10px;
background-color:#ffffff;
font-weight: bold;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/***********floating images***************/
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 20px !important!;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 20px 2px 0 !important!;
display: inline;
}
/* End Images */
/***********comments***************/
#comment {
width: 100%;
}
.comments {
background: url(images/qpwilm-trans.png) repeat top left;
padding:10px;
margin-top:5px;
margin-bottom:5px;
}
.comments-alt {
background: url(images/qpwilm-trans2.png) repeat top left;
}
.comments ol, .comments ul {
line-height: 1.3em;
margin: 1.2em 0 1.2em 56px;
font-size: 0.8em;
}
.comments ul li,
.comments ol li{ margin-bottom: 0.2em; }
.comments li:hover{ background-color: #ffffff; }
.comments-title {
margin-top: 10px;
margin-bottom:2px;
}
.comments-meta {
padding-top: 1px;
}
.comments p {
margin: 15px 56px;
font-size: 0.8em;
}
/**********gravatar***************/
.gravatar {
float:left;
}
.gravatar img{
background-color: #ffffff;
padding: 5px;
margin-right:5px;
}
/*********Privado-comments***************/
.comments-author {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li:hover{ background-color: #ffffff; }
/*********sidebars***************/
.sidebar h2 {
margin: .5em 0 0.6em 0;
display:block;
padding: 5px 10px;
background-color:#ffffff;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.sidebar ul ul {
margin: 1.0em 0 1.5em 0;
border-top: 1px solid #858482;
}
#sideblog-1 ul {
border-top: 0;
}
.sidebar ul ul li {
padding: 0 0 0 10px;
border-bottom: 1px solid #858482;
}
.sidebar ul ul li a {
display: block;
margin: 0 0 0 -10px;
padding: 2px 10px;
font-weight:normal;
}
.sidebar ul ul li a:hover {
color: #f0160c;
background-color: #ffffff;
}
#flickr img, #runforcover img {
margin: 0 6px 6px 0;
padding: 5px;
background-color:#ffffff;
border: 1px solid #ffffff;
}
#flickr img:hover, #runforcover img:hover {
border: 1px solid #858482;
}
}
/**********formularios*********/
input, textarea, select {
border: 1px solid #C1C0B5;
background-color: #ffffff;
color: #000000;
font-size: 0.9em;
}
/**********************************************/
#searchform{
width:100%;
Hi, I'm in the construction phase of a site and have come into a bit of trouble.. The page is centered horizontally using a master <table align=center> that holds all the page content within it. I'm trying to put in some help widgets that appear or disappear based on an onClick event.. The only way I can find to have the help widgets layered over top of the already-displayed page is to use the position:absolute style, but this bases the position on the left and top edges of the window, rather than the left and top edges of the master table (of course). I'm wondering if there's any way I can set the style to base the absolute location of the help widgets on a figure such as the center of the window or something like the width of the window divided in half. I tried using javascript to set the element's style.left to (window.innerWidth/2)-(width of master table/2) but that only seems to work in FireFox as IE doesn't seem to recognize innerWidth. Any crafty solutions would be greatly appreciated! I know how to center a division horizontily in a page with this: Code: #division {
width:800px;
left:50%;
margin-left:-400px;
}
Now I havent been able to center it both horizontilly and vertically, in a fashion that will resize the division based on the resolution. In other words I do not want to use absolute left or right locations. Any help would be appreciated, thanks! I'm working on a new design for my family site and I'm having trouble with the centering of the page. The Site I love the way it looks so far, but if you adjust the size of your browser(any browser, doesn't matter...) window horizontally, certain elements fail to line up properly due to what appears to be a "remainder" error on the centering, i.e. whether there is an even or odd number of pixels to work with. Any idea how to solve this issue? I did find this at Position is Everything, but I'm not exactly clear on how to implement the proposed "solution" or if it would even work in my case... Note that the linked css in the page, is actually just a place holder, all the css is embedded at the top. Thanks... BTW - I'm just getting going on the family site now (even though I've had the domain for a while) because my wife and I just found out we are having a baby!!!! I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover... CSS Code Code:
/* Usual Selectors */
div.wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
}
/************************* Identification *************************/
#header {
position: absolute;
width: 950px;
height: 46px;
margin: 0;
margin-top: 50px;
padding: 0 0 50px 0px; /*top right bottom left*/
text-align: left;
}
#footer {
width: 950px;
text-align: center;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 50%;
height: 50px;
margin: 0;
margin-top: 68px;
padding: 0 0 50px 250px; /*top right bottom left*/
font-weight: normal;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 35px;
padding: 0 0 0 250px; /*top right bottom left*/
width: 740px;
text-align: left;
}
#search_box {
background-color: #FFFFFF;
height: 28px;
text-align: left;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF;
font-color: #000000;
width: 70%;
text-align: left;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
text-align: left;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 100px;
padding: 0 0 50px 0px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 250px; /*top right bottom left*/
margin-top: 100px;
margin-right: 10%;
text-align: left;
width: 740px;
}
Thanks. Hi friends, I'm trying to center this page with CSS, but no idea where my code is wrong? in screen resolution 800 it looks fine but in 1024 and above it remains on left side of the page. Here is a page url http://gooo.ueuo.com/ and CSS code is given below. Code:
<style type="text/css">
#container{
margin-left: auto;
margin-right: auto;
}
#logo {
position:absolute;
left:-1px;
top:-2px;
width:200px;
height:60px;
background-color: #003399;
}
#description {
position:absolute;
left:19px;
top:140px;
width:760px;
height:530px;
z-index:1;
}
#Layer5 {
position:absolute;
left:243px;
top:151px;
width:395px;
height:45px;
z-index:4;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #990066;
font-size: 18px;
}
#paragraph {
position:absolute;
left:243px;
top:206px;
width:397px;
height:200px;
}
.style3 {font-family:Verdana, sans-serif;
font-size: 11px;
color:#000000;
line-height: 18px;
padding: 6px;
}
#system {
position:absolute;
left:29px;
top:379px;
width:200px;
height:80px;
z-index:5;
}
.style4 {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.style5 {font-size: 10px;}
.style6 {font-size: 10px;}
#footer {position:absolute;
left:0px;
top:680px;
width:799px;
height:175px;
background-color:#0D75D2;
}
.style7 {
font-family: Verdana, sans-serif;
font-size: 10px;
list-style-type: none;
}
.style9 {
font-family: Verdana, sans-serif;
font-size: 11px;
}
.style10 {
font-weight: bold;
font-size: 14px;
font-family: Verdana, sans-serif;
color: #990066;
}
</style>
Hey guys. http://fairplaygamers.com/fifa/application.php if you look there you will see my banner which is 760px. I want to make the whole entire rest of the page to be within those margins. How can I achieve this? Pretty much itd be like having a 1 cell table with everything in between. I am trying to center the page layout horizontally. I used margins: 0 auto; align: center; and it works properly in foxfire, but in IE it is aligned left. How can I make it center in IE too?? Thanks! This might be tricky, but I'm sure it's possible using Javascript. When you position a JPEG in a web page, you can give it a left position, right position, top position.... 100px from the Left, 50 px from the top etc. What I'm after is a top/centred position... Before you guys say it... yes I know you can centre it easily, but I'm after something with a difference. Please see the JPEG attached. I'd like it so that no matter what size the browser window is, big or small, the RED DOT in the middle of the image stays DEAD CENTRE in the top middle of the browser window. This means that the left and right sides of the JPEG image would be cut off at the edges, which is what I want. The important bit is that the "This is a test" text and red dot must stay dead centre. At the moment, when the browser window is made smaller, the JPEG image stays fixed againt the left hand side and the menu options saying "This is a test" get cut off. I am guessing I need some bit of JS code that judges the centre position by calculating the width of the browser window and halving it... then judging the size of the image, halving that and working out where the Image should go. I hope this makes sense ! This is the code I am currently using : Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" style="margin:0;overflow:hidden;"> <div align="center"><img src="LongerHeader.jpg" width="1500" height="100" alt="" ""> </div> </body> </html> Actually, I found this code, which might be of use to people trying to suss this problem out. It opens a new window in the centre by judging the width of halving the monitor window and positioning accordingly. Similar thing I guess. Any ideas folks ?! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var win4=null;
function GoogleWindow(mypage,myname,w,h,scroll,pos){
if(pos=="center"){LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:50;TopPosition=(screen.availHeight)?(screen.availHeight-h)/3:50;}
else if((pos!="center" && pos!="random" && pos!="default" && pos!="top") || pos==null){LeftPosition=0;TopPosition=20;}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',l ocation=no,directories=no,status=yes,menubar=no,toolbar=yes,resizable=yes';
win4=window.open(mypage,myname,settings);
if(win4.focus){win4.focus();};}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<p> </p>
<p><font size="3" face="Arial, Helvetica, sans-serif"><strong><a href="http://www.google.co.uk" target="_parent" onFocus="this.blur()"
onClick="GoogleWindow(this.href,'Detailed','780','520','no','center');return false"><span>>CLICK HERE</span></a> </strong></font></p>
</div>
</body>
</html>
I'm trying to replicate the layout of an existing site as part of a long-term move to a new CMS. It's mostly working like I want, except for centering some columns in the layout. test page here, but I can't hyperlink as a newbie http://postdotnet.com/habitat/ 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=utf-8" />
<title>test page</title>
<style type="text/css">
body{ text-align: center; background: #A4CEF5; }
div .body { margin: 0px auto; width: 1000px; }
div .top { background: url("header-rooftop.png") top center transparent no-repeat;
height: 50px;
padding: 0px !important;
}
div .header {
background: url("maincontent-bg-white.png") top center repeat-y;
padding: 0px !important;
}
div .header img { text-align: center; }
div .nav {background: url('nav-bg-full.png') top no-repeat !important;
height: 93px;
}
div .container {
margin: 0px 0px 0px 0px;
z-index: 10;
}
div .content {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index: 10;
height: 500px;
background: url("maincontent-bg-white.png") top center repeat-y;
position: relative;
}
div .columns {
width: 1000px;
overflow: auto;
clear: both;
display: inline;
}
div .content-bottom {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index:15;
position: relative;
background: url('maincontent-bg-bottom-white.png') top center no-repeat;
}
.footer-grass {
height: 169px;
width: 100% !important;
background: url('footer-grass-2.png') top center repeat-x transparent !important;
position: relative;
margin-top: -125px;
z-index: 0;
}
.footer-wrapper {
background: url('footer-bg-grad.png') top left repeat-x #7D7369 !important;
}
div .colleft {
float: left;
width: 250px;
border: 1px solid red;
height: 400px;
}
div .colright {
width: 750px;
border: 1px solid blue;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="body">
<div class="container">
<div class="top">
</div>
<div class="header">
<img src="habitat-nwhc-logo-262px.png" alt="Habitat for Humanity Northwest Harris County" />
</div>
<div class="nav"></div>
<div class="content">
<div class="columns">
<div class="colleft"> </div>
<div class="colright"> </div>
</div>
</div>
<div class="content-bottom"> </div>
</div>
<div class="footer-grass"></div>
<div class="footer-wrapper"> </div>
</div>
</body>
</html>
The red & blue columns should be centered on the white background. I'm trying to replicate the basic layout used he http://habitatnwhc.org/ I've been reading numerous articles on how to do CSS columns, and have tried dozens of different things, but nothing seems to work. I'm a programmer, not a UI guy, so I'm actually proud that I've made it this far on my own. I'd really appreciate any hints on how to solve this. thanks! |
|||||||