...

View Full Version : Center Within Div Issue



silverskymedia
01-17-2008, 05:34 AM
Hello, I am having quite the brainfart trying to center some text. I've tried using a <div> and a <p>.

Any help would be appreciated.

http://silverskymedia.no-ip.com/portfolio/

Thanks.

rmedek
01-17-2008, 06:55 AM
If you align the text to the right, you'll see where the problem is. The text on top of the centered text (your Constant Contact email form) is being positioned relatively, with a negative top value, to bring it up into the breadcrumb area. But positioning it relatively still reserves the space—for lack of a better term—so even though it's displayed out of the way it's still taking up space where it would normally be, preventing the text from being centered. Make sense?

Changing this:


<div style="float: right; position: relative; top: -27px; left: -30px;">

…to this:


<div style="float: right; margin: -27px 0 0 -30px;">

…should fix it. Hope that helps…

Excavator
01-17-2008, 07:11 AM
Hello silverskymedia,
This works -
h1.menu {
color:#ffcc66;
text-align:center;
border-bottom:1px solid #fff;
font-size:2.4em;
padding-left:10px;
letter-spacing:.5em
}
h2 {
text-align: center;
}h3 {
font-size:1.4em;
color:#000
}
.slogan {

and
<div id="rightcolumn">
<div id="breadcrumb">
<p>
<a href="/" style="text-decoration: none;">Home</a> | &nbsp;Portfolio
</p>
<div style="float: right; position: relative; top: -27px; left: -30px;">
<!-- BEGIN: Constant Contact HTML for Send Page to Friend -->
<div style="float: left; position: relative; top: 7px;"><img src="/images/Email.gif" border="none"></div>&nbsp;<a href="/share/default.asp?url=http://silverskymedia.no-ip.com/portfolio/Default.asp?" class="sendToFriend">Send page to a friend</a>
<!-- END: Constant Contact HTML for Send Page to Friend -->
</div>
</div>


<h2>This should be centered, but it's not!!!</h2>


<!-- End Right Column -->

<div class="clear"></div>
</div>

I only used h2 because it's not a paragraph...


Plenty of things to fix if you look at that in the validator!!

silverskymedia
01-17-2008, 07:31 AM
Wow, thanks for the responses. rmedek, you were right. using the float did the trick. Thanks for the help and I hope I can remember this in the future.

rmedek
01-17-2008, 07:35 AM
No problem, but note it wasn't the float, it was the negative margins versus relative positioning. ;)

silverskymedia
01-17-2008, 06:36 PM
OK, I'll note that. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum