css positioning question

Discussion in 'HTML' started by Leslie, Oct 11, 2003.

  1. Leslie

    Leslie Guest

    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
     
    Leslie, Oct 11, 2003
    #1
    1. Advertising

  2. Leslie

    Steve Pugh Guest

    Leslie <> wrote:

    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Oct 11, 2003
    #2
    1. Advertising

  3. Leslie

    Richard Guest

    Steve wrote:

    > Leslie <> wrote:


    >>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



    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, Oct 11, 2003
    #3
  4. Leslie

    Leslie Guest

    On Sat, 11 Oct 2003 19:45:20 +0100, Steve Pugh <> wrote:

    >Leslie <> wrote:
    >
    >>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...


    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'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.


    >
    >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
     
    Leslie, Oct 11, 2003
    #4
  5. Leslie

    DU Guest

    Leslie wrote:

    > 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
     
    DU, Oct 11, 2003
    #5
  6. Leslie

    Leslie Guest

    On Sat, 11 Oct 2003 14:43:44 -0500, "Richard" <anom@anom> wrote:

    > Steve wrote:
    >
    > > Leslie <> wrote:


    >>>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.


    >> 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

    >
    >
    >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
     
    Leslie, Oct 11, 2003
    #6
  7. Leslie

    Richard Guest

    Leslie wrote:

    > 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


    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.
     
    Richard, Oct 11, 2003
    #7
  8. Leslie

    brucie Guest

    In post <>
    Leslie said...

    > (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.

    --
    brucie.
    12/October/2003 06:45:49 am
     
    brucie, Oct 11, 2003
    #8
  9. Leslie

    Richard Guest

    Leslie wrote:

    > On Sat, 11 Oct 2003 19:45:20 +0100, Steve Pugh <> wrote:


    >>Leslie <> wrote:


    >>>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...


    > 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'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.



    >>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


    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.
     
    Richard, Oct 11, 2003
    #9
  10. Leslie

    Leslie Guest

    On Sun, 12 Oct 2003 06:48:42 +1000, brucie <>
    wrote:

    >In post <>
    >Leslie said...
    >
    >> (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.


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

    Leslie
     
    Leslie, Oct 11, 2003
    #10
  11. Leslie

    brucie Guest

    In post <>
    Leslie said...

    >>> (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.


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


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


    --
    brucie.
    12/October/2003 06:57:28 am
     
    brucie, Oct 11, 2003
    #11
  12. Leslie

    Leslie Guest

    On Sat, 11 Oct 2003 16:28:08 -0400, DU
    <> wrote:

    >Leslie wrote:


    >> 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.


    >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
     
    Leslie, Oct 11, 2003
    #12
  13. Leslie

    brucie Guest

    In post <>
    Leslie said...

    > Hmmm... does anyone view at a resolution wider than 1500?


    3,584px

    --
    brucie.
    12/October/2003 07:03:15 am
     
    brucie, Oct 11, 2003
    #13
  14. Leslie

    Leslie Guest

    On Sat, 11 Oct 2003 15:46:07 -0500, "Richard" <anom@anom> wrote:

    > Leslie wrote:
    >
    >> 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

    >
    >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
     
    Leslie, Oct 11, 2003
    #14
  15. Leslie

    Leslie Guest

    On Sun, 12 Oct 2003 06:59:47 +1000, brucie <>
    wrote:

    >In post <>
    >Leslie said...
    >
    >>>> (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.

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

    >
    >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
     
    Leslie, Oct 11, 2003
    #15
  16. Leslie

    brucie Guest

    In post <>
    Leslie said...

    >>>>> (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.


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


    >>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/


    http://usenet.alt-html.org/background-thingy.html



    --
    brucie.
    12/October/2003 07:54:15 am
     
    brucie, Oct 11, 2003
    #16
  17. Leslie

    brucie Guest

    brucie, Oct 11, 2003
    #17
  18. Richard wrote:
    > ...
    > Tables will get shelved entirely and you'll never use another one.


    hmmm: tables & shelves? whatever next? the comfy chair perhaps

    --
    William Tasso - http://WilliamTasso.com
     
    William Tasso, Oct 11, 2003
    #18
  19. Leslie

    Leslie Guest

    On Sun, 12 Oct 2003 07:54:57 +1000, brucie <>
    wrote:

    >In post <>
    >Leslie said...
    >
    >>>>>> (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.

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

    >
    >>>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/

    >
    >http://usenet.alt-html.org/background-thingy.html


    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
     
    Leslie, Oct 11, 2003
    #19
  20. Leslie

    brucie Guest

    In post <>
    Leslie said...

    >>http://usenet.alt-html.org/background-thingy.html


    > 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/>

    --
    brucie.
    12/October/2003 09:16:23 am
     
    brucie, Oct 12, 2003
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Beckwith

    Absolute Positioning (CSS Question)

    Matt Beckwith, Jul 18, 2003, in forum: HTML
    Replies:
    4
    Views:
    1,841
  2. Pat Traynor
    Replies:
    3
    Views:
    665
    Sid Ismail
    Sep 24, 2003
  3. Leslie
    Replies:
    4
    Views:
    446
    Leslie
    Nov 2, 2003
  4. Spartanicus

    Basic CSS positioning Question??

    Spartanicus, Sep 5, 2004, in forum: HTML
    Replies:
    11
    Views:
    568
  5. Spartanicus
    Replies:
    0
    Views:
    413
    Spartanicus
    Jan 25, 2005
Loading...

Share This Page