Log in

View Full Version : Problem with centering div tags.. help please!


pedroamorim
03-18-2008, 01:18 PM
:confused::mad::confused:

I have been trying everything to center the content with in a container but it just does not work! The ideia is to have a button with variable width depending on the text i'll have on it. I already know if you use fixed width this can be done. I have also managed to center the container div. The code is to follow:

<<CSS>>
#button-next {
display: block;
padding: 0;
border: 0;
width: auto; /* This could also be fixed */
margin: 20px auto 0 auto;

background: #f5f5f5;
height: 47px;
text-align: center;
}
#button-next-left {
margin-left: auto;
float:left;
height: 47px;
width: 12px;
background-image: url('img/button-next-left.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #f5f5f5;
}
#button-next-right {
margin-left: auto;
text-align:center;
height: 47px;
width: 48px;
float:left;
background-image: url('img/button-next-right.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #f5f5f5;

}
#button-next-text {
text-align:center;
padding: 0px 5px 0 5px;
float:left;
height: 47px;
background-image: url('img/button-next-bg.jpg');
background-repeat: repeat;
background-color: #f5f5f5;
}

<<XHTML>>

<div id="button-next">
<div id="button-next-left">
</div>
<div id="button-next-text">
<a href="can-you-help-me.php" class="button-next-link">Can you help me?</a></div>
<div id="button-next-right">
<img src="img/button-next-right.jpg" border="0" />
</div>
</div>


Thanks!!
boogyman
03-18-2008, 01:37 PM
welcome to the dd forums, please review our posting policies and regulations http://dynamicdrive.com/forums/showthread.php?t=24866

by default the width of any element is the width of the amount of information contained within... now, it appears that you want to have some image be as wide as the content within?

if you have a solid "rectangle" like image you can repeat it along the X-axis, however if your images have some special effect like rounded corners to make it appear like a button, you need some extra CSS.

it really depends on what you want to use it for, because looking at your code, this might be something that you should handle with a form input-button field
Medyman
03-18-2008, 01:44 PM
Is this what you're looking for?


<html>
<head>
<style type="text/css">

a.boldbuttons{
display: block;

font: bold 13px Arial;
line-height: 22px;
height: 30px;
text-decoration: none;
}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white;
}

a:hover.boldbuttons {
color:black;
}

a.boldbuttons span{
background: red;
padding:5px;
}

.buttonwrapper{
overflow: hidden;
margin:10px;
text-align:center;
}

</style>

</head>
<body>


<div class="buttonwrapper">
<a class="boldbuttons" href="#"><span>Help Me!</span></a>
</div>

<div class="buttonwrapper">
<a class="boldbuttons" href="#"><span>Really Really Really Really Long Text</span></a>
</div>

</body>
</html>
pedroamorim
03-18-2008, 02:01 PM
http://i27.tinypic.com/4g0mly.jpg


Thanks for your answers guys. In fact i'm trying to have some round corners, that's why I'm using image bg. To understand better what I'm working on i took a shot of the button. By the way the button-next container is inside another two containers. The basic structure of the page would be something like:

<div id=todo>
<div id=nav></div>
<div id=content>
<p class=blerg>text</p>
<div id=button-next></div>
</div>
</div>

Thanks again guys for the quick answer!!
Medyman
03-18-2008, 03:43 PM
Ahhh I see...

Have you looked at this:
http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/

It's the same technique, but you would need to add some padding to right of your text to fully display the arrow on the left side.

The markup will be almost identical to my post above, just a matter of adding some padding and swapping out the images.

Let us know if you have any problems implementing this.
pedroamorim
03-18-2008, 04:46 PM
Nice one mate! Thank you very much for this.
By the way, these forums rock!

cheers...
boogyman
03-18-2008, 05:53 PM
please don't forget to review the posting policies in the link in my first post...

it's a lot easier for us to look at computer code when it has the proper formatting... eg MedyMan's post has coding format tags