homepage Welcome to WebmasterWorld Guest from 54.166.62.226
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Center a Div Tag
Fortune Hunter

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3188066 posted 10:55 pm on Dec 13, 2006 (gmt 0)

I have a template created using CSS I am trying to modify. I don't really know much about CSS so I wasn't sure how to do this and I was hoping someone knew the answer.

I have a box (div tags) with buttons in the box. I can control the alignment within the div tags, in other words left, center, right within the div tag box, but I can't get the entire box to center in the area. The div tags are aligned on the left. I looked at the code and I couldn't see any alignment tags in there to change the alignment of the div tags (with buttons inside to center). Does anyone know how I might do this?

Fortune Hunter

 

schwartz

5+ Year Member



 
Msg#: 3188066 posted 11:34 pm on Dec 13, 2006 (gmt 0)

Without seeing your code or examples, I'd say you could nest the div within another div that's centered.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3188066 posted 11:42 pm on Dec 13, 2006 (gmt 0)

This is quite easy to do. First, create your HTML:

<body>
<div id="container">
...
</div>
</body>

In this example, the div with the id of "container" is what we want to make centered and fixed width. Now for the CSS:

body
{
margin: 0;
padding: 0;
text-align: center; /* For IE */
}

#container
{
margin: 0 auto;
width: 770px;
border: 1px solid red;
}

Fortune Hunter

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3188066 posted 9:29 pm on Dec 15, 2006 (gmt 0)

Fotiman:

I took a look at the code and I didn't see any CSS code similar to what you were describing, which makes be believe I am looking in the wrong place. However I did go and grab the code snippet of the section I am referring to. If you or anyone else could take a quick look and tell me how to center it I would really appreciate it. Here is the code...

<div id="sideNav">
<div align="right"><a href="http://www.example.com/Castlephoto/ordering/upload.aspx " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Prints','','siteassist_images/Prints_Dw.jpg',1)"><img src="siteassist_images/Prints_Up.jpg" name="Prints" width="176" height="66" border="0" id="Prints" /></a><a href="http://www.example.com/Castlephoto/ordering/upload.aspx " target="_blank"></a><br />
<br />
<a href="http://www.example.com/Castlephoto/startsharing.aspx " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Memberships','','siteassist_images/Membership_Dw.jpg',1)"><img src="siteassist_images/Membership_Up.jpg" name="Memberships" width="176" height="66" border="0" id="Memberships" /></a><a href="http://www.example.com/Castlephoto/startsharing.aspx " target="_blank"></a><br />
<br />
<a href="http://www.example.com/Castlephoto/ordering/shop.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gifts','','siteassist_images/Gifts_Dw.jpg',1)"><img src="siteassist_images/Gifts_Up.jpg" name="Gifts" width="176" height="66" border="0" id="Gifts" /></a><a href="http://www.example.com/Castlephoto/ordering/shop.aspx" target="_blank"></a></div>
</div>

[edited by: encyclo at 11:47 pm (utc) on Dec. 15, 2006]
[edit reason] examplified, see TOS [webmasterworld.com] [/edit]

Fortune Hunter

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3188066 posted 4:03 am on Dec 23, 2006 (gmt 0)

Any Takers?

Fortune Hunter

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3188066 posted 10:37 am on Dec 23, 2006 (gmt 0)

OK since no one else took this up, look here:


<div id="sideNav">
<div align="right">
<a href="#"><img src="Prints_Up.jpg" /></a>
<a href="#"></a><br /><br />
<a href="#"><img src="Membership_Up.jpg" /></a>
<a href="#"></a><br /><br />
<a href="#"><img src="Gifts_Up.jpg" /></a>
<a href="#"></a>
</div>
</div>

The first thing you do when trying to puzzle your puzzler is simplify the problem to it's basic elements as above: remove all the mouseover codes, make the links a simple # anchor, remove the image attributes. It reveals the basic problems with your code.

Whenever I see "MM_whatever" it's the signature mark of Dreamweaver. So it's likely whatever you do might get futzed up when it's edited, or re-futzed up if you continue to edit it in DW. Examples of this are the empty links you see in your code:

<a href="#"></a>

DW and every other WYSIWYG editor is notorious for these artifacts.

Second, it's been repetitively mentioned that XML-style tags are really only necessary if you have reasons for creating XML documents, so I have a problem understanding why I see so many />'s in documents that don't really need it.

With the whining out of the way, it's hard to tell what you're doing without the relevant CSS - but this use of div

<div align="right">

is deprecated and could be the prime source of your problem (and kinda' contradicts the use of XML-style tags.) If you needs to align a div right, you should use CSS to accomplish the task.

Since the "parent" div is id'ed as "sideNav" it leads me to believe there is some CSS that, well, sticks it to one side or the other. :-) Or maybe it's the align right that does that. In either case, Fotiman's suggestion still applies, we'll just change the names to protect the innocent:


body {
margin: 0;
padding: 0;
text-align: center; /* For IE */
}
#centerNav {
margin: 0 auto;
width: 770px;
border: 1px solid red;
}
#rightInside {
text-align:right;
padding:0;
margin:0;
}
#rightInside li { list-style:none; }

The HTML changes as follows:


<div id="centerNav">
<ul id="rightInside">
<li><a href="#"><img src="Prints_Up.jpg"></a></li>
<li><a href="#"><img src="Membership_Up.jpg"></a></li>
<li><a href="#"><img src="Gifts_Up.jpg"></a></li>
</ul>
</div>

You can see I've changed that right-aligning div to an unordered list. Semantically links are lists, so you should structure them that way in your document. Then you no longer need that inner div.

This should give you a 770 pixel wide centered div with the nav elements aligning to the right of the box.
Your next task is to re-add the full image URL's, then pursue a method of CSS mouseovers so you can lose the obtrusive MM_garbage code, a topic for a fresh post.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved