Text On Top of Photo

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

fleemo17@comcast.net - 27 May 2005 02:03 GMT

I'm hoping a CSS guru can help me with what seems like a simple enough
goal. What I'm going for is a large photo centered in the browser with
text positioned on top of it. Using the CSS below, when the user
resizes their browser window, the photo centers in the browser fine but
the text box stays locked on the left hand side. Is there a way to
have the text box move in relation to the photo when the browser is
resized?

Here's my CSS:

#photo    {
        text-align: center;
        }

#text    {
        position: relative;
        text-align: left;
        width: 250px;
        height: 250px;
        top: -300px;
        overflow: scroll;
        background-color: #fff;
        padding: 12px;
        border: 3pt solid black;
        }

And here's my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>

<div id="photo">

<img src="bluesquare.jpg" alt="" width="750" height="450">

<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis nunc
eros, scelerisque quis, rutrum a, venenatis sed, felis. Etiam interdum
sem sit amet lorem. Aliquam nec dolor quis neque volutpat fermentum.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur sodales convallis nisl.
</div>

</div>

</body>
</html>

And here's a link to the page:

http://www.sunriveronline.org/misc/css

Can any gurus shed some light on whether what I'm trying to do is
possible? Thanks much.

Reply to this Message

Jim Moe - 27 May 2005 06:46 GMT

> I'm hoping a CSS guru can help me with what seems like a simple enough
> goal. What I'm going for is a large photo centered in the browser with
[quoted text clipped - 3 lines]
> have the text box move in relation to the photo when the browser is
> resized?

I suspect the

> #text {
> text-align: left;
> }

might be a hint why the text stays to the left.
To center a div horizontally try
margin-left: auto;
margin-right: auto;
And if you want the text above the image, put the text above the image
rather than re-positioning the text from below.

Signature

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Roy Reed - 27 May 2005 18:59 GMT

Why not make the image a background image:

background: url(bluesquare.jpg) no-repeat center center;

and size the <div> to the size of the image.

Signature

Must fly

Roy

www.reeddesign.co.uk

Reply to this Message

fleemo17@comcast.net - 27 May 2005 20:54 GMT

I appreciate the responses from both of you, but unfortunately I
couldn't get either suggestion to work.

Jim, I tried the margin auto suggestion, (as well as putting the text
before the graphic) but it didn't make the image center in the browser
window. Here's a link to the revised file (Revision 1):
http://tinyurl.com/7zeqn

And Roy, can you actually center a background image in the browser
window? I couldn't get it to work. Here's a link to that revised page
(Revision 2):
http://tinyurl.com/9eeul

Below is the CSS and HTML for each of the revised files. If you can
spot some place where I went wrong, please do correct me.

Thanks.
______________________________

REVISION 1 (http://tinyurl.com/7zeqn )
#photo    {
        margin-left: auto;
        margin-right: auto;
        }

#text    {
        position: relative;
        width: 250px;
        height: 250px;
        top: 200px;
        overflow: scroll;
        background-color: #fff;
        padding: 12px;
        border: 3pt solid black;
        }

<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles1.css" type="text/css">
</head>

<body>

<div id="photo">

<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

<img src="bluesquare.jpg" alt="" width="750" height="450">

</div>

</body>
</html>

______________________________

REVISION 2 (http://tinyurl.com/9eeul )

#photo    {
        background: url(bluesquare.jpg) no-repeat center center;
        width: 750px;
        height: 450px;
        }

#text    {
        position: relative;
        text-align: left;
        width: 250px;
        height: 250px;
        top: 150px;
        overflow: scroll;
        background-color: #fff;
        padding: 12px;
        border: 3pt solid black;
        }

<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="styles2.css" type="text/css">
</head>

<body>

<div id="photo">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>

</body>
</html>

Reply to this Message

Jim Moe - 28 May 2005 00:45 GMT

> Jim, I tried the margin auto suggestion, (as well as putting the text
> before the graphic) but it didn't make the image center in the browser
> window. Here's a link to the revised file (Revision 1):
> http://tinyurl.com/7zeqn

Change "margin-left: �auto;" to "margin-left: auto;".

Signature

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

fleemo17@comcast.net - 28 May 2005 01:38 GMT

>Change "margin-left: auto;" to "margin-left: auto;".<

Sorry Jim, I'm not seeing the difference between the two.

-F

Reply to this Message

Darin McGrew - 28 May 2005 01:46 GMT

Jim Moe <jmm-list.AXSPAMGN@sohnen-moe.com> wrote:

>> Change "margin-left: auto;" to "margin-left: auto;".<

> Sorry Jim, I'm not seeing the difference between the two.

There's non-ASCII junk in your style sheet. The cat command displays it as
"M-J" here:

$ lynx -dump http://www.sunriveronline.org/misc/css/styles1.css | cat -v
#photo    {
        margin-left: M-Jauto;
        margin-right: auto;
        }

#text    {
        position: relative;
        width: 250px;
        height: 250px;
        top: 200px;
        overflow: scroll;
        background-color: #fff;
        padding: 12px;
        border: 3pt solid black;
        }

Signature

Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

"Warning: Dates in the calendar are closer than they appear."

Reply to this Message

Jim Moe - 28 May 2005 19:51 GMT

>>Change "margin-left: auto;" to "margin-left: auto;".
>
> Sorry Jim, I'm not seeing the difference between the two.

There is a non-ascii character just before the "auto" in the first one.
Apparently your mailer is stripping out such fluff. Set you HTML editor to
display non-printing characters and it will show up.

Signature

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

fleemo17@comcast.net - 28 May 2005 01:47 GMT

After scouring the Internet, I found the answer at
http://www.wpdfd.com/editorial/wpd0103.htm#toptip . It's a beautifully
simple solution. You merely assign an absolute position, then specify
the width and height of your div, a top of 50% and a left of 50%, then
a margin-top and margin-left that is exactly half the height and width
of your div. That centers your div both horizontally and vertically.
Be-a-utiful! Getting the text to overlay the photo is just a simple
matter of positioning the div containing the text using absolute
positioning and experimenting with the top and left values. The
solution can be vewed in action at http://tinyurl.com/ao3jx The CSS
and HTML are shown below. Thanks to those who offered suggestions.

-Fleemo

body    {
        background-color: #000;
        }

.content    {
            position: absolute;
            margin-top: -225px;
            margin-left: -375px;
            top: 50%;
            left: 50%;
            width: 750px;
            height: 450px;
            }

#boxtext    {
            position: absolute;
            top: 180px;
            left: 40px;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: #fff;
            padding: 12px;
            }

<html>
<head>
<title>CSS Centering (Horizontal AND Vertical)</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>

<div class="content">

<img src="bluesquare.jpg" alt="" width="750" height="450">

<div id="boxtext">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis nunc
eros, scelerisque quis, rutrum a, venenatis sed, felis.
</div>

</div>

</body>
</html>

Reply to this Message

Darin McGrew - 28 May 2005 02:09 GMT

> After scouring the Internet, I found the answer at
> http://www.wpdfd.com/editorial/wpd0103.htm#toptip . It's a beautifully
[quoted text clipped - 6 lines]
> positioning and experimenting with the top and left values. The
> solution can be vewed in action at http://tinyurl.com/ao3jx

Of course, if the browser window is narrower than your DIV, then the
content is pushed off the left edge of the browser window with no way to
scroll to view it.

Signature

Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/

"Anyone who has never made a mistake has never tried anything new."
- Albert Einstein

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2005

Text On Top of Photo