Stylesheets - Text On Top of Photo

Author

Text On Top of Photo

fleemo17@comcast.net

2005-05-26, 11:21 pm

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.

Jim Moe

2005-05-27, 4:31 am

fleemo17@comcast.net wrote:
> 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?
>
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.

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

Roy Reed

2005-05-27, 7:33 pm

<fleemo17@comcast.net> wrote in message
news:1117155792.365500.125280@z14g2000cwz.googlegroups.com...
> 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?

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.

--
Must fly

Roy

www.reeddesign.co.uk

fleemo17@comcast.net

2005-05-27, 7:33 pm

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>

Jim Moe

2005-05-27, 11:22 pm

fleemo17@comcast.net wrote:
>
> 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;".

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

fleemo17@comcast.net

2005-05-27, 11:22 pm

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

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

-F

Darin McGrew

2005-05-28, 4:25 am

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

<fleemo17@comcast.net> wrote:[color=darkred]
> 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;
}
--
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."

fleemo17@comcast.net

2005-05-28, 4:25 am

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>

Darin McGrew

2005-05-28, 4:25 am

<fleemo17@comcast.net> wrote:
> 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

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.
--
Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/

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

Jim Moe

2005-05-28, 7:27 pm

fleemo17@comcast.net wrote:
>
> 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.

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

Jim Moe

2005-05-30, 7:56 am

Jim Moe

2005-05-30, 7:56 am