positioning elements inside a div

[willyd57]

I am struggling with correctly positioning 4 elements inside a div using CSS. The solution may include slight changes to the markup, so consider the following example XHTML

<div id="enter_exit_buttons">
<p id="enter_button"><a href="mainpage.html"><img src="images/enterbutton.jpg"
alt="enterbutton.jpg" /></a></p>
<p id="exit_button"><a href="http://www.gottago.com"><img src="images/exit.jpg"
alt="exit_button" /></a></p>
<p>Website Template By: some name you can't see</p>

<p>Copyright © 2007 awebpage.com.com || All Rights Reserved.</p>
</div>

At present, there are no existing rules in the CSS file for #enter_exit_buttons or it's contents. The div above the enter_exit_buttons div has a padding-bottom: 30px; rule in place so I have some room "over my head" so to speak.

What I need is for the first two elements (enter_button, and exit_button) to be centered on one line seperated by 30 or so px. The last two elements also need to be centered, each on it's own line.

One XHTML book, and next to zero experience with CSS is not getting good results. Some help would be appreciated.

Thanks

[Blake Tallos]

Originally Posted by willyd57

I am struggling with correctly positioning 4 elements inside a div using CSS. The solution may include slight changes to the markup, so consider the following example XHTML

<div id="enter_exit_buttons">
<p id="enter_button"><a href="mainpage.html"><img src="images/enterbutton.jpg"
alt="enterbutton.jpg" /></a></p>
<p id="exit_button"><a href="http://www.gottago.com"><img src="images/exit.jpg"
alt="exit_button" /></a></p>
<p>Website Template By: some name you can't see</p>

<p>Copyright © 2007 awebpage.com.com || All Rights Reserved.</p>
</div>

At present, there are no existing rules in the CSS file for #enter_exit_buttons or it's contents. The div above the enter_exit_buttons div has a padding-bottom: 30px; rule in place so I have some room "over my head" so to speak.

What I need is for the first two elements (enter_button, and exit_button) to be centered on one line seperated by 30 or so px. The last two elements also need to be centered, each on it's own line.

One XHTML book, and next to zero experience with CSS is not getting good results. Some help would be appreciated.

Thanks

Clean up your code up a little bit!!

<div id="enter_exit_buttons">
            <a href=""><img src="" alt="" /></a>
            <p>
 
                Example text
            </p><a href=""><img src="" alt="#########" /></a>
            <p>
                Website Template By: some name you can't see
            </p>
            <p>
                Copyright © 2007 awebpage.com.com || All Rights
                Reserved.
            </p>
        </div>

#enter_exit_button {
    
    //styles
}
 
#enter_exit_button p {
    //styles
 
}
 
 
#enter_exit_button a, img {
    //styles
 
}

[willyd57]

I have made some progress here, and as such, can narrow down the amount of help I need. I have centered div="enter_exit_buttons" inside its parent div (and thus, it is centered in the page). I also changed the markup slightly by getting rid of the two "p" elements that were encapsulating the two "a" elements. I am certain they are unnecessary. I also added an id property to each "a" element to ad in positioning their associated images (which are enter and exit buttons). see the resulting markup below:

</div>
<div id="enter_exit_buttons">
<a id="enter" href="mainpage.html"><img
src="images/enterbutton.jpg"
alt="enterbutton.jpg" /></a>
<a id="exit" href="http://www.yahoo.com"><img
src="images/exit.jpg"
alt="exit_button" /></a>
<p>Website Template By: DesignsbyLovies</p>

<p>Copyright © 2007 raynesrealm.com.com || All Rights Reserved.</p>
</div>

and now take a look at the CSS that positions div id=enter_exit_buttons in the center of the page:

#enter_exit_buttons {
width: 500px;
margin-left: 125px;
margin-bottom: 25px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
}

now my "only" problem is to center the two "buttons" at the top center of their div (with 20 or so px between them), and have the two paragraph elements below them, and also centered.

I tried the following CSS rule to move the buttons over to the left a bit but it is not working out as I thought it would.

#enter {
margin-left: 100px;
}


any suggestions?

[Blake Tallos]

Originally Posted by willyd57

I have made some progress here, and as such, can narrow down the amount of help I need. I have centered div="enter_exit_buttons" inside its parent div (and thus, it is centered in the page). I also changed the markup slightly by getting rid of the two "p" elements that were encapsulating the two "a" elements. I am certain they are unnecessary. I also added an id property to each "a" element to ad in positioning their associated images (which are enter and exit buttons). see the resulting markup below:

</div>
<div id="enter_exit_buttons">
<a id="enter" href="mainpage.html"><img
src="images/enterbutton.jpg"
alt="enterbutton.jpg" /></a>
<a id="exit" href="http://www.yahoo.com"><img
src="images/exit.jpg"
alt="exit_button" /></a>
<p>Website Template By: DesignsbyLovies</p>

<p>Copyright © 2007 raynesrealm.com.com || All Rights Reserved.</p>
</div>

and now take a look at the CSS that positions div id=enter_exit_buttons in the center of the page:

#enter_exit_buttons {
width: 500px;
margin-left: 125px;
margin-bottom: 25px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
}

now my "only" problem is to center the two "buttons" at the top center of their div (with 20 or so px between them), and have the two paragraph elements below them, and also centered.

I tried the following CSS rule to move the buttons over to the left a bit but it is not working out as I thought it would.

#enter {
margin-left: 100px;
}


any suggestions?

Are you trying to center your container?


I'm not quite sure what your trying to do. But I gave it a shot here -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <style type="text/css" media="screen">'
* {
    margin:o;
    padding:0;
}
#enter_exit_buttons  {
    width: 800px;
    margin:0px auto;
    border:1px solid #ff0000;
}
p {text-align:center;}
a  {
    margin-left:210px
}
    </style>
</head>
<body>
<div id="enter_exit_buttons">
            <a id="enter" href="mainpage.html" name=
            "enter"><img src="images/enterbutton.jpg" alt=
            "enterbutton.jpg" /></a> <a id="exit" href=
            "http://www.yahoo.com" name="exit"><img src=
            "images/exit.jpg" alt="exit_button" /></a>
            <p>
 
                Website Template By: DesignsbyLovies
            </p>
            <p>
                Copyright © 2007 raynesrealm.com.com || All Rights
                Reserved.
            </p>
        </div>
</body>
</html>

[willyd57]

Thanks for the help Blake. Let me try to clarify my problem / goal for you.

The container defined as div id="enter_exit_buttons" is already centered on my page. I have also managed to center the two buttons (called enter and exit) using a CSS rule as seen below.

#enter {
margin-left: 75px;
}

I am now having trouble making the two <p> elements below the buttons behave. I expected them to sort of fall right in to place when I got the buttons centered, but that is not the case. The text in them is sort of pushed up against the right border of the container until if flows over onto the next two lines.

[willyd57]

I have changed the content of the two p elements I need to move and grabbed a screen shot seen below. I need that text to lie nicely below the two buttons.

[IMG]/home/willyd/Screenshot.png[/IMG]

[willyd57]

Oooops, That didn't work as planned

[willyd57]

I changed the content of the two p elements that are giving me grief and took a screen shot. What I need is a rule that will place the two lines of text centered below the buttons.

[willyd57]

I knew it would be simple once I saw the problem.

I kept trying to force the p element text down and in the center by writing rules for it. The solution was to add a right margin rule to the exit button. That forced the text down to the next line.

Thanks for the help all