css positioning question

L

Leslie

After years of using tables for page layout I'm finally trying to
learn CSS. I'm following various tutorials, viewing source codes and
just trying out stuff. I'm pretty comfortable with the basic stuff,
but am stumped on how to position a specific graphic.

I'm building a page with a background with a 100px left border. (the
background image is 1500px wide to accommodate various browser
resolutions) I've got a 600px wide banner graphic that I want to
place at the top of the page and centered in the area that's to the
right of the page border.

If I use absolute positioning I'm presuming everyone viewing the page
will be viewing it at the same resolution I am. That obviously won't
be the case.

I'm guessing I should be using relative positioning, but how? What's
the code I should use?

This is probably a very basic question, but I can't find the answer to
what I want and I'm getting frustrated!

Thanks for any help!

Leslie

email address is invalid
 
S

Steve Pugh

Leslie said:
I'm building a page with a background with a 100px left border. (the
background image is 1500px wide to accommodate various browser
resolutions)

Well those that lie between 700px an 1500px width at any rate...
I've got a 600px wide banner graphic that I want to
place at the top of the page and centered in the area that's to the
right of the page border.

If I use absolute positioning I'm presuming everyone viewing the page
will be viewing it at the same resolution I am. That obviously won't
be the case.

I'm guessing I should be using relative positioning, but how? What's
the code I should use?

I wouldn't use positioning at all.

..banner {
text-align: center;
margin-left: 100px;
}

<div class="banner"><img src="banner.gif" alt="Banner" width="600"
height="60"></div>

Steve
 
R

Richard

Well those that lie between 700px an 1500px width at any rate...
I wouldn't use positioning at all.
.banner {
text-align: center;
margin-left: 100px;
}
<div class="banner"><img src="banner.gif" alt="Banner" width="600"
height="60"></div>


Here's one possible method you can try, which I did test out and it works:

Notice there is no dot before [body].

body { background-position:center;
background-image: url("image.gif");
background-repeat: no-repeat;
border-color:#0000ff;
border-left-width:100px;
}

..banner { position:absolute;
left:10px; top:10px;
height:130px; width:600px;
background-color:blue; <<< color by name or number. #0000ff or
rgb(0,0,255)
background-image: url("banner.jpg");
background-position:center;
background-repeat:no-repeat;
}

<body>
<div class="banner"> text goes here</div>
</body

In my testing though, I found that "border-left-width" produced a black
portion then gave a distorted coloring of the rest of the field.
If that happens to you, just create a a division the width desired and color
it as desired.

www.stonware.dk get the page builder as it has a library of tags and
attributes for html, javascript and even css.
and it's free.
 
L

Leslie

Well those that lie between 700px an 1500px width at any rate...

Hmmm... does anyone view at a resolution wider than 1500? I just hate
the thought of someone having my left border repeat at the right of
the screen. Tacky.....
I wouldn't use positioning at all.

.banner {
text-align: center;
margin-left: 100px;
}

<div class="banner"><img src="banner.gif" alt="Banner" width="600"
height="60"></div>

Works perfectly, Steve. Thank you!

This NG has been a godsend, and I thank everyone (OK, most everyone)
for being so generous with help and info. I'm sure I'll be back with
more questions as I delve deeper into CSS

Leslie
 
D

DU

Leslie said:
After years of using tables for page layout I'm finally trying to
learn CSS. I'm following various tutorials, viewing source codes and
just trying out stuff. I'm pretty comfortable with the basic stuff,
but am stumped on how to position a specific graphic.

I'm building a page with a background with a 100px left border. (the
background image is 1500px wide to accommodate various browser
resolutions) I've got a 600px wide banner graphic that I want to
place at the top of the page and centered in the area that's to the
right of the page border.

If I use absolute positioning I'm presuming everyone viewing the page
will be viewing it at the same resolution I am. That obviously won't
be the case.

I'm guessing I should be using relative positioning, but how? What's
the code I should use?

This is probably a very basic question, but I can't find the answer to
what I want and I'm getting frustrated!

Thanks for any help!

Leslie

email address is invalid

Maybe it would be a good idea to provide an url of the page you're
working on. Just a thought. But you should not have to do this if you
feel this can not help your post or your webpage situation.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
L

Leslie

Steve said:
I wouldn't use positioning at all.
.banner {
text-align: center;
margin-left: 100px;
}
<div class="banner"><img src="banner.gif" alt="Banner" width="600"
height="60"></div>


Here's one possible method you can try, which I did test out and it works:

Notice there is no dot before [body].

body { background-position:center;
background-image: url("image.gif");
background-repeat: no-repeat;
border-color:#0000ff;
border-left-width:100px;
}

.banner { position:absolute;
left:10px; top:10px;
height:130px; width:600px;
background-color:blue; <<< color by name or number. #0000ff or
rgb(0,0,255)
background-image: url("banner.jpg");
background-position:center;
background-repeat:no-repeat;
}

<body>
<div class="banner"> text goes here</div>
</body

In my testing though, I found that "border-left-width" produced a black
portion then gave a distorted coloring of the rest of the field.
If that happens to you, just create a a division the width desired and color
it as desired.

www.stonware.dk get the page builder as it has a library of tags and
attributes for html, javascript and even css.
and it's free.

Richard,

Thanks for the help. What Steve posted in an earlier post works so
I'm going to use it for now. I'm saving your example for my next
'new' page. Thank you!

The link you provided for the page builder is invalid. Did you mean
stoneware.dk? If so, I tried that and.... uh.... it's in Danish. ??

Leslie
 
R

Richard

Leslie said:
Thanks for the help. What Steve posted in an earlier post works so
I'm going to use it for now. I'm saving your example for my next
'new' page. Thank you!
The link you provided for the page builder is invalid. Did you mean
stoneware.dk? If so, I tried that and.... uh.... it's in Danish. ??

No comprende engle signoir?
Little item on the right side of the page has "english" written on it.
Click there and you'll understand better.
sorry about the typo.
 
B

brucie

(the background image is 1500px wide to accommodate various browser
resolutions)

if its a repeating image just cut the image down and use "repeat-y" to
only repeat it vertically.
 
R

Richard

Hmmm... does anyone view at a resolution wider than 1500? I just hate
the thought of someone having my left border repeat at the right of
the screen. Tacky.....
Works perfectly, Steve. Thank you!
This NG has been a godsend, and I thank everyone (OK, most everyone)
for being so generous with help and info. I'm sure I'll be back with
more questions as I delve deeper into CSS

Once you get used to the coding of css, you'll wonder how you managed
without it.
Tables will get shelved entirely and you'll never use another one.
 
L

Leslie

if its a repeating image just cut the image down and use "repeat-y" to
only repeat it vertically.

What would happen then if viewed at a resolution wider than 1500?

Leslie
 
L

Leslie

Leslie wrote:
Maybe it would be a good idea to provide an url of the page you're
working on. Just a thought. But you should not have to do this if you
feel this can not help your post or your webpage situation.

Then I'd have to give you access to my HD! :)

My work in progress is nowhere near ready for publication. All I've
got so far is a background image, a banner graphic, some nav buttons
and some garbage text I've thrown in to learn how to position text.
All very simple stuff, but I'm at the very beginning of the CSS
learning process. When I learn more and feel the page is ready for
critique I'll bury it somewhere on my website.

I hand code HTML, but at this point I'm using 'cut and paste' to add
different CSS styles to my 'work in progress.' I fiddle with the code
to see how it affects the page and learn from what works and what
doesn't work.

I've got a lot more to learn, but at least I'm trying! As my husband
loves to say, "Yes, you're very trying." :)

Leslie
 
L

Leslie

No comprende engle signoir?
Little item on the right side of the page has "english" written on it.
Click there and you'll understand better.

Well, duh! Thanks.
sorry about the typo.

Not a problem. I just d/l the program and will be checking it out
shortly.

Thanks again!

Leslie
 
L

Leslie

don't know. it would help a lot to see the image/page in question.

Oh, hell! I said in an earlier post that the page isn't ready for
publication, but I'll just throw myself to the wolves now instead of
later. It's at: http://www.bessiebee.com/Trivia/Trivia2004/

The graphics aren't necessarily what will end up on the page, this is
just a learning experience for me. And, as I've said, I'm very early
in the CSS learning process.

Thanks for all your help!

Leslie
 
L

Leslie


Wow, thanks Brucie!! I'll be studying the source code of this page
(I've saved it). I knew the code I'm using could be condensed, but
I haven't gotten that far yet. Your examples will go a long way to
shortening my learning process.

At the beginning of every year I post 3 new audio trivia pages -
trivia page, answers page and hall of fame. My goal is to have all
three of these pages completed on time using only CSS and to make sure
the HTML and CSS validate.

As I've said, I've got a long way to go, but I'm sure having fun!

Leslie
 
B

brucie

Wow, thanks Brucie!! I'll be studying the source code of this page
(I've saved it). I knew the code I'm using could be condensed, but
I haven't gotten that far yet. Your examples will go a long way to
shortening my learning process.

<warm fuzzies/>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top