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.cs s" 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. 9  11830  fl******@comcas t.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)
<fl******@comca st.net> wrote in message
news:11******** **************@ z14g2000cwz.goo glegroups.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
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.c ss" 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.c ss" type="text/css">
</head>
<body>
<div id="photo">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
</body>
</html> fl******@comcas t.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)
>Change "margin-left: auto;" to "margin-left: auto;".<
Sorry Jim, I'm not seeing the difference between the two.
-F
Jim Moe <jm************ ***@sohnen-moe.com> wrote: Change "margin-left: auto;" to "margin-left: auto;".<
<fl******@comca st.net> wrote: 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, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/
"Warning: Dates in the calendar are closer than they appear."
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.cs s" 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>
<fl******@comca st.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, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
"Anyone who has never made a mistake has never tried anything new."
- Albert Einstein fl******@comcas t.net wrote: 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.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Jukka K. Korpela |
last post by:
No, I'm not making this up, this is what http://www.w3.org/ says when
accessed with a text browser, or in any decent browser in no-images
mode:
"Tim Berners-Lee smiling 2003-12-31: Buckingham Palace today announced
that Queen Elizabeth II will make Tim Berners-Lee, W3C Director, a
Knight Commander of the Order of the British Empire (KBE)."
Actually, I could see the point of title="Tim Berners-Lee smiling",
since it's not obvious to...
|
by: Ini |
last post by:
Hi,
I have a recordset containing names of photographs and descriptions of these
photo's.
For exempla:
Photo: car01.jpg
Description: Red Corvette
|
by: Eric Lindsay |
last post by:
I would like to do a photo gallery with a liquid layout.
I wanted to center a caption below each photo (or above each photo).
I can do that easily with tables, but then I don't have a liquid layout.
Besides, I wanted to try to do it with CSS. I can do centered captions
with text-align. This works provided the element containing each photo
is floated left. I have found several examples of how to do this.
However I didn't want the...
|
by: lucietee |
last post by:
Hi, hope someone might be able to help.
I have an ASP based portal site with about 15 users - it has a photo gallery section which allows users to submit their own pictures to the gallery. The problem is, the page for submission requires the file to already be online somewhere and asks the user to enter the direct url reference for the picture.
My problem is that i want my users to be able to upload their own photos to our server. So i'm...
|
by: J |
last post by:
I am new to web design and I am looking for some advice on putting
images within paragraphs of text. I have determined that sizing the
height of my images to a given number of lines of text seems to work
well, however:
If for example I align the image to the left, I will then put a border
on the top, bottom, and right edges of my image which matches my
background, in order to provide aesthetically pleasing space between
the image and...
| | |
by: Big George |
last post by:
Hello,
I'm trying to save a jpg file of 300KB as a BLOB field in an Oracle
10g Database.
If I try to call a Stored Procedure, it fails.
If I use CommandText with SQL sentence, it success.
I can't save the jpg file as a BLOB field using this Method (I'm
calling a Stored Procedure):
Private Sub save_BLOB(ByVal Photo As Byte())
|
by: samjam |
last post by:
Below is some coding in a program i am using, i would like to know how i can get the text bigger or bolder on my webpage, This is the section of text i would like bigger or bolder (This is a very rare lacquered tea caddy c1840. The outside of the caddy has wonderful scenes on each side which are really finely painted. The caddy stands on claw feet. Inside there are four tin canister which is very rare to see on such a small caddy. All canisters...
|
by: =?Utf-8?B?SlIx?= |
last post by:
I would like to add text to an image. I have tried to use DrawString and it
works on some images but on others it is very very small. I am pretty sure
it has something to do with the size of the image but I have had varying
results on multiple images.
Is there anyway to make the text a fixed size on the image. Similar to
putting a date on a photograph.
|
by: alice |
last post by:
I'm doing some text swapping with javascript, got it working fine, but
I would like the line to have line breaks and being a beginner, I
don't even know if this is possible.
So I have a line like this
swaptext('Shaun, Greg, Violet, Joel, 1999')";
and I would like 1999 to be on a new line. Is there a simple way to do
this? I'd swear I've seen a way, but now I can't seem to find it.
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
