|
CSS - Is This A Good Way To Center A Div?
I have been reading alot about how much trouble we get into with IE when trying to center a div. I had a lot of trouble with it and mainly just wanted to have a fixed width site (760px or so) with a thin border all the way around it.
Is the following code a good way to accomplish this? Code: <head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #666666;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div></div></td>
</tr>
</table>
</body>
I am planning on having this as my index page and just using an "include" for the different header/body/footer elements. Would love some advice/opinions. Similar TutorialsI've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it. The div needs to be absolutely positioned because I'm using top & bottom to set it's height. Here's the code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
body
{
margin: 0px;
height: 100%;
}
.centered
{
position: absolute;
border: 2px solid black;
width: 196px;
background: orange;
margin: auto;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
min-height: 50px;
height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
left: expression('auto');
right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');
}
</style>
</head>
<body>
<div class='centered'>
I'm a centered absolutely positioned div.
</div>
</body>
</html>
Hi, I'm using XHTML & CSS (strict dtd) and using one large table to format my pages. Within the table I have different alignments and any other sort of thing that you would find in a table. W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape?? Everything within the table is great, but the table itself is not centered. I'm using CSS in the following manner to try to center it currently Code: <!-- All the doctype stuff and head tags go here...--> <body style="text-align:center"> <!-- Rest of the document --> It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape. As you may know "<center>" is not defined in the XHTML strict dtd so that options out. Thanks for any help or suggestions, Kalan Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> Hello, This one doesn't look good on FF 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>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
font-size:10px;
top:3px;
width:100%;
}
#layer ul {
float:left;
list-style-type:none;
height:12px
}
#layer li {
display:inline;
height:12px
}
#layer a {
text-decoration:none;
border:1px 1px solid #990000;
color:#990000;
background-color:#CCCCCC;
padding:20px;
height:12px
}
</style>
</head>
<body>
<div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>
I've mucked up my css a bit. Works great in IE but not in FireFox. Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site. Causeway Lighitng And here is the css (it the nav2 portion that controls the top menu) Code: #nav, #nav ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 100%;
}
#nav2, #nav2 ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 135px;
}
#nav li, #nav {
margin:0;
padding:0;
}
#nav2 li, #nav2 {
margin:auto;
padding:0;
}
#nav ul li {
position: relative;
width:130px;
line-height:14px;
padding:0;
margin:0;
}
#nav li ul {
position: absolute;
margin-left:134px;
margin-top:-24px;
display: none;
}
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
display: block;
text-decoration: none; /* removes the underline */
color: #777;
background: #fff; /* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
}
#nav2 li a {
display: block;
text-decoration: none;
/* removes the underline */
color: #777;
background: #FFCC00;
/* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
text-align : center;
}
/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
height: 1%;
margin-left : auto;
}
/* End */
#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */
#nav2, #nav2 ul {
width: 100%;
}
#nav2 li {
float:left; /* makes the main nav horizontal */
width:80px; /* Width of Menu Items */
margin:0;
}
#nav2 li ul {
position: absolute; /* positions and sets width of submenus */
display: none;
float:left;
margin:0;
}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
Hello, This one looks good on IE7/FF but not with IE6 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>Untitled Document</title>
<style type="text/css">
#picture {
position:relative;
float:left;
left:6px;
color:#ff0000;
top:15px;
}
.name_txt {
position:relative;
margin-bottom:4px;
float:left;
font-size:10px;
width:235px
}
</style>
</head>
<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>
I need to link to differnt style sheets to a page and i need it so it will use one if the user has IE and a differnt one if the user is using anything else that works properly. Is this posable and if it is please tell me how? and if theres a way of doing it that uses php i would like to use that method. thanks Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores. http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1 (the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one) It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here. Issue 1 Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style. Issue 2 In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried. If anyone could look over the styles and see what I've done I'd be forever grateful: http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css Many Thanks Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot Hey, Myspace allows users to customize their profiles with CSS, and what i've done is cover my profile with a blank DIV overlay. How can I include a flash component in my DIV? I'm trying to include this little flipbook device onto my profile sothink.com/tutorials/viewtopic.php?t=61 The flipbook you'll see is obviously not hosted by the forums (...I think,) it is hosted elsewhere and the user just included it in her bulletin post. What code allows you to do that? And would it be possible to include such a code onn my DIV overlay? Thanks, Hi, Here is the site I am working on: http://www.pizzaz-lingerie.com/launch.php It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one. -CJ Hi Can anyone recommend a good book/course on CSS that they enjoyed/found very useful? I would rather read one awesome book, then 4 so-so books/courses. Thanks Drew EDIT: Just noticed the CSS resources above. But if someone does have a link to a good ebook (free or not) or hard copy, I would be happy to check it out. As per the subject I'm looking for examples of attractive yet sensibly coded forms where the layout uses only CSS. I guess bad things would be where the layout is done using absolute positioning. I'm looking for something that is easy to reuse and straightforward to code a stylesheet for. Thanks, Geoff Hello, I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE? Thx, Jules #top { margin: 0px 0px 0px 0px; padding: 10px; border-bottom: 0px solid black; background: #efefef; height: 100px; voice-family: "\"}\""; voice-family:inherit; height: 40px; } html>body #top { height: 40px; } #left { position: absolute; top: 60px; left: 0px; margin: 0px; padding: 10px; border-right: 0px dotted black; border-bottom: 5px solid yellow; background-color: orange; width: 170px; voice-family: "\"}\""; voice-family:inherit; width: 150px; } html>body #left { width: 150px; } #middle { padding: 10px; border-top: 5px solid orange; background: white; margin: 0px 150px 0px 170px; } #right { position: absolute; top: 60px; right: 0px; margin: 0px; padding: 10px; border-left: 5px solid orange; border-bottom: 15px solid orange; background: #efefef; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 130px; } html>body #right { width: 130px; } hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it. To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties. In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well. Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design? Anyone know of any web developer tool bars for IE7? The things I'm looking for are in browser notification of valid markup (like the HTML Tidy plugin on firefox) and being able to edit css live (like Chris Prodericks web developer toolbar). Sorry not quite css related but sorta ... TIA, Mark None of the browsers are looking correctly except Firefox actually. The worst is the rendering in IE. In Mac (5.x) it's the worst but in the Windows version my global navigation bar goes off the right side (XP Pro). In Mac/Safari the drop down items don't show only the divider | does though the links are hot. I haven't even tried Opera or Netscape. Anyone have a clue at all? I should have stuck to tables! Ugh. http://www.blaynecooper.com Steph |
|||||||