...

View Full Version : CSS code for centering



myfayt
01-30-2012, 04:36 PM
I thought the code to center a DIV was Position: Absolute but I was wrong. Any idea on how to center something on a page? Is there multiple codes for it?

coothead
01-30-2012, 04:49 PM
Hi there myfayt,

here is an example for you to try...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>centered div element</title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
#container {
width:760px;
padding:20px;
border:1px solid #333;
margin:auto;
box-shadow:#333 10px 10px 20px;
background-color:#fff;
}
</style>

</head>
<body>

<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p
</div>

</body>
</html>

coothead

myfayt
01-30-2012, 05:28 PM
Didn't work for me. Here is a screenshot using the Margin and also the coding.
By the way it's the images I want centered.



.hoverbox
{
cursor: default;
list-style: none;
margin:auto;
}

teedoff
01-30-2012, 05:32 PM
Where do you want them centered relative to?

Coot's code should work, but you didnt provide enough information.

To center an element, including an image, your element needs to be less width than its container, you need a valid doctype, and like coot said, set margin to auto for the element.

You should post the link to your site.

myfayt
01-30-2012, 06:39 PM
Sorry, here is the full coding, and the needed CSS part.
Also I put padding-left back in place, until I can get it fixed.


<div id="header" class="container">

<div id="menu">
<ul>
<li class="current_page_item"><a href="#">View Photos</a></li>
<li><a href="#">Upload Photos</a></li>
<li><a href="#">Edit/Delete Photos</a></li>
<li><a href="#">Customize</a></li>

</ul>
</div>
</div>

<ul class="hoverbox">
<?php foreach ($photographs as $photograph) :?>
<li>
<a href="<?php echo $photograph->image_path(); ?>" title="<?php echo $photograph->caption; ?>" >
<img src="<?php echo $photograph->image_path(); ?>" border="0" style="border:1px solid black;" alt="<?php echo $photograph->filename; ?>"><img src="<?php echo $photograph->image_path(); ?>" alt="<?php echo $photograph->filename; ?>" class="preview"></a>
<?php if(($current->photograph != $photograph->id) && !isset($userview)) {?><p><a href="confirm.php?photo=<?php echo $photograph->id;?>" >Select As Profile Picture</a></p><?php }?>
</li>
<?php endforeach; ?>
</ul>
<p><?php echo $p_pagin; ?></p>

</div>
<div id="page">
<div id="bg1">
<div id="bg2">
<div id="bg3">
<div id="content">
<h2><?php echo $username; ?>'s Photo Gallery</h2>
<p>Hi Everyone, welcome to my photo gallery.</p>
</div>

</div>
</div>
</div>
</div>




body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

#wrapper {
background: url(../images/photogallery/images/img02.jpg) no-repeat center 115px;
}

.container {
width: 1000px;
margin: 0px auto;
}



#header {
width: 900px;
height: 115px;
margin: 0 auto;
padding: 0px 50px;
}

.hoverbox
{
cursor: default;
list-style: none;
padding-left: 280px;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

myfayt
01-31-2012, 02:09 PM
24 hour bump, thank you

Major Payne
02-01-2012, 06:36 AM
Centering an element requires setting a width to the exact width of the content and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

body {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as a Class:

.selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class: <div class="selector_name">Content here</div>

Example as an ID:

#selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class: <div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

Notice Coothead also has a valid document type in place.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum