|
CSS - Centering A Table With Css
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? Similar TutorialsCan 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;
}
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
-----------------------------------------------------------------------------*/
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 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. 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. 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? How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Hi all, this is my CSS: Code: body {
font-family:arial;
font-size:14px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
.mainbar {
position:absolute;
height:100%;
width:600px;
display:block;
background-color:#F2F2F2;
top:0px;
bottom:0px;
z-index:0;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
.contact {
position:absolute;
display:block;
height:40px;
width:600px;
background-color:#FFFFFF;
top:80%;
bottom:0px;
z-index:0;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.logo {
position:absolute;
display:block;
height:200px;
width:600px;
background-color:#CCCCCC;
top:10%;
bottom:10%;
border:1px solid #000000;
z-index:2;
}
.logoborder {
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly. I have 2 problems: 1. How can I get these list items centered? 2. the second level seems to have problems displaying horizontally in IE. How can I fix it? Code: <div id="tablenavcontainer">
<div id="navcontainer">
<ul>
<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>
<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>
<ul>
<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>
<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
</ul>
</ul>
<br style="clear: both;" />
</div>
</div>
Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly. It's very basic. You have blank page. No wrappers no nothing. Then 1 div, holds, 1 ul, with 20 li. The div has specified width. How to center the ul inside the div? I need the UL to NOT have specified width since I'll be adding more items to it over time. Thanks! http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? |
|||||||