Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV alignment

Status
Not open for further replies.
rocky14547

rocky14547

Programmer
Apr 8, 2008
8
How does one...

1-Center a DIV horizontally in a window of any size
2-but give a position:absolute for the vertical from top

I'm trying to get the button centered on any size page but I don't know how to push the button up or down. What tells it what vertical position to take right now? Seems like nothing.


---------
<html>

<head>

<style>
#rule1bkg {background-image: url(header-corner.gif); background-repeat: repeat-x; height:100px;}
</style>


<style>
#rule1txt {position:absolute;left:30px;top:30px; font-size: x-large; color:white;

font-family:helvetica, impact, sans-serif;}
</style>

<style>
#button {text-align:center;}
</style>

</head>

<body>

<div id="rule1bkg"></div>
<div id="rule1txt">Reverse-Phone Directory</div>
<div id="button"><a href="<img src="buttonUP.jpg" height="30"></a></div>

</body>

</html>
-----------
Thanks guys :)
 
Sort by date Sort by votes
Try giving it a relative position, and using the top attribute to set its vertical position:

Code: 
#button{
position:relative;
text-align:center;
top:20px;
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks! That does work.

What if you have three elements that you wish to potentially overlap (position:absolute) AND you want vertical control (top:XXXpx)over each element while they automatically center vertically on a page?

Is this possible?
 
Upvote 0 Downvote
Brains:
Is it possible to center the contents without changing the code below but only by adding extra code.
------
<html>

<head>

<style>
a {text-decoration:none}
</style>

<style>
#headerbkg {position:absolute; top:0px;}
</style>

<style>
#headertxt {position:absolute; top:18px; font-size: x-large; color:white;

font-family:helvetica, impact, sans-serif;}
</style>

<style>
#button{position:absolute; top:230px;}
</style>

</head>

<body>

<div id="headerbkg"><img src="headerbkg short.gif" width="700" height="70";></div>
<div id="headertxt">REVERSE-PHONE DIRECTORY - Find What You Seek! </div>
<div id="button"><a href=" src="buttonUP.jpg" height="30"

border=0></a></div>

</body>

</html>
 
Upvote 0 Downvote
Is it possible to center the contents without changing the code below but only by adding extra code.
Click to expand...
Possibly, but your existing code seems a very clumsy method to achieve your goal (whatever it is).

Can you explain a little more the layout you're trying to get here? You appear to want a heading displayed over an image, together with a (button) image displayed below it. All/some of this is to be centred on the screen.

Tip: If you find you're using absolute positioning on every element in the document, you're probably doing it wrong. The same is true if you're giving every element an id.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Well, I am avoiding tables because I've heard that's not good and to replace tables with CSS. So I did this all in CSS and it's still clumsy? Can't win. lol

I want everything centered on the page for sure. But I do not want the title text as a bitmapped text so it's html floating over a background that repeats (loading is faster with small image that repeats).

I like the idea of placing everything exactly with absolute.

Any ideas appreciated.
What about the question. Could you answer how that could be done?
Thx

 
Upvote 0 Downvote
Using CSS instead of tables is good, but it's possible to go all around the houses when there's easier/better ways to do it.

For example, to put your heading over a background image, all you need is this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <style type="text/css">

    h1 {
    font-size: x-large;
    color:white; 
    font-family:helvetica, impact, sans-serif;
    background: #000 url(headerbkg short.gif) top left repeat-x;
    padding: 18px 18px 0;
    height: 52px;
    width: 664px;
    }

  </style>
</head>
<body>
  <h1>REVERSE-PHONE DIRECTORY - Find What You Seek!</h1>
</body>
</html>
Having one <div> for the background and positioning another <div> on top of it is, well, clumsy. So is using a <div> for that matter.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
So what's the rule as to when to use a DIV and when to do what you did?
R
 
Upvote 0 Downvote
New to this tableless CSS stuff.

How could I place three yellow bars under the "Find the owner..." text?

The bars should follow each other horizontally, one after the other, and fit below the text on one line. There should be a bit of space between the first and second and the second and third.

Should I ideally use a DIV with background color then float the text over the yellow bars?
or
just create one image in photoshop and map it?
or
create a table with padding?

-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

h1 {
font-size:small;
color:black;
font-family:helvetica, impact, sans-serif;
a {text-decoration:none};
}

</style>

</head>

<body>

<center>
<img src="rpl3.jpg">
<br>
<h1>Find the owner of any phone or unlisted number. Results include name, current <br>
address, carrier, and location details when available. Your search is 100% confidential.</h1>
</center>

</body>
</html>
 
Upvote 0 Downvote
In that case I would make an image.

Just because its tableless doesn't mean you can't use images or shouldn't. There are certain things better accomplished with images.

And why would you need to float the text over the bars. The Natural flow would let the bars sit under the text. Unless by under you mean as background to the text.







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
326
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
108
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
80
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
133
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
263
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top