homepage Welcome to WebmasterWorld Guest from 54.166.108.167
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




msg:3188068
 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




msg:3188106
 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




msg:3188112
 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




msg:3190020
 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




msg:3197862
 4:03 am on Dec 23, 2006 (gmt 0)

Any Takers?

Fortune Hunter

rocknbil




msg:3198032
 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