Welcome to WebmasterWorld Guest from 54.145.39.186

Forum Moderators: not2easy

Message Too Old, No Replies

Center a Div Tag

     

Fortune Hunter

10:55 pm on Dec 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:34 pm on Dec 13, 2006 (gmt 0)

10+ Year Member



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

Fotiman

11:42 pm on Dec 13, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

9:29 pm on Dec 15, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Any Takers?

Fortune Hunter

rocknbil

10:37 am on Dec 23, 2006 (gmt 0)

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



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month