OT? a CSS question

Discussion in 'HTML' started by Tabasco1, Sep 28, 2004.

  1. Tabasco1

    Tabasco1 Guest

    I am working on learning CSS to position "stuff" and ditch tables when
    possible. But I am having trouble with a couple of things.

    1. I am placing my websites logo in the top box but I want the box to have a
    colored background. So it that when the box is larger than the image it will
    look okay.

    2. I would like the boarders to be completely filled out and have no breaks.


    I have been googleing for the answer but to no avail. Here a page that shows
    my issues.

    thanks

    Charles
    Torrance, California
    http://www.tcpslashipdomains.com Now accepting PayPal!
    http://www.tcpslaship.com under construction
     
    Tabasco1, Sep 28, 2004
    #1
    1. Advertising

  2. Tabasco1

    Tabasco1 Guest


    >I am working on learning CSS to position "stuff" and ditch tables when
    > possible. But I am having trouble with a couple of things.
    >
    > 1. I am placing my websites logo in the top box but I want the box to have
    > a colored background. So it that when the box is larger than the image it
    > will look okay.
    >
    > 2. I would like the boarders to be completely filled out and have no
    > breaks.
    >
    >
    > I have been googleing for the answer but to no avail. Here a page that
    > shows my issues.


    Opps here is the link http://tinyurl.com/6jsg7
     
    Tabasco1, Sep 28, 2004
    #2
    1. Advertising

  3. Tabasco1

    Peter Guest

    Tabasco1 schreef:

    >>I am working on learning CSS to position "stuff" and ditch tables when
    >>possible. But I am having trouble with a couple of things.
    >>
    >>1. I am placing my websites logo in the top box but I want the box to have
    >>a colored background. So it that when the box is larger than the image it
    >>will look okay.
    >>
    >>2. I would like the boarders to be completely filled out and have no
    >>breaks.
    >>
    >>
    >>I have been googleing for the answer but to no avail. Here a page that
    >>shows my issues.
    >>
    >>

    >
    >Opps here is the link http://tinyurl.com/6jsg7
    >
    >
    >
    >

    I don´t see or don´t understand the problem.Looks OK to me
    Peter
     
    Peter, Sep 29, 2004
    #3
  4. Tabasco1

    Tabasco1 Guest

    "Peter" <> wrote in message
    news:415ab6dc$0$45957$...
    > Tabasco1 schreef:
    >
    >>>I am working on learning CSS to position "stuff" and ditch tables when
    >>>possible. But I am having trouble with a couple of things.
    >>>
    >>>1. I am placing my websites logo in the top box but I want the box to
    >>>have a colored background. So it that when the box is larger than the
    >>>image it will look okay.
    >>>
    >>>2. I would like the boarders to be completely filled out and have no
    >>>breaks.
    >>>
    >>>
    >>>I have been googleing for the answer but to no avail. Here a page that
    >>>shows my issues.
    >>>

    >>
    >>Opps here is the link http://tinyurl.com/6jsg7
    >>
    >>

    > I don´t see or don´t understand the problem.Looks OK to me
    > Peter


    Thanks for looking.

    1. If you look at the top you will see my logo at the top left. If your
    browser is maximized you will see empty box at the top right. I would like
    to fill that in with a dark green. But I can not seem to get it to fill in.

    2. The left hand column should be separated by a line all the way up but it
    stops before it reaches my logo.

    While I suppose it isn't the end of the world I believe that details are
    very important.


    Thanks again;

    Charles
    Torrance, California
    http://www.tcpslashipdomains.com Now accepting PayPal!
    http://www.tcpslaship.com under construction
     
    Tabasco1, Sep 30, 2004
    #4
  5. Tabasco1

    bulge Guest

    On Thu, 30 Sep 2004 05:33:13 GMT, "Tabasco1" <>
    wrote:

    >Thanks for looking.
    >
    >1. If you look at the top you will see my logo at the top left. If your
    >browser is maximized you will see empty box at the top right. I would like
    >to fill that in with a dark green. But I can not seem to get it to fill in.
    >
    >2. The left hand column should be separated by a line all the way up but it
    >stops before it reaches my logo.
    >



    1. The background colour doesn't go to the right side 'cause you
    limited the #top width to 780px. I changed it to 100%. U had a closing
    } there as a typo, too.

    Adding a border around #top while working in the CSS (always a cool
    trick when trying to visualise layouts) revealed #top's width limits
    clearly.

    2. Is this what you want?

    I added the following:
    body {margin: 0; padding: 0;}
    So everything lines up without white gaps at the top.


    Then:

    #top
    {
    padding: 0;
    border-bottom: 1px solid gray;
    HEIGHT: 80px;
    WIDTH: 100%;
    background: url(http://www.tcpslaship.com/images/banner2.jpg)
    no-repeat;
    background-color: #006633;
    }

    Here I fixed the typo, added 100% instead of 780px and added no-repeat
    for the graphic so it wouldn't repeat as the box stretches to 100%.



    Then:

    #leftnav
    {
    float: left;
    width: 120px;
    margin: 0;
    background-color: #ffffff;
    padding: .5em;
    }

    I think I left that the same.



    Then:

    #content
    {
    float: left;
    border-left: 1px solid gray;
    background-color: #ffffff;
    padding: 1em;
    max-width: 36em;
    }

    I got rid of the 130px margin and floated it to the left, so it sits
    up against #leftnav. Left border seems to go straight to the top now.
    Hopefully it's what you were looking for?
     
    bulge, Oct 1, 2004
    #5
  6. Tabasco1

    Tabasco1 Guest

    Tabasco1, Oct 1, 2004
    #6
  7. Tabasco1

    Tabasco1 Guest

    > #top
    > {
    > padding: 0;
    > border-bottom: 1px solid gray;
    > HEIGHT: 80px;
    > WIDTH: 100%;
    > background: url(http://www.tcpslaship.com/images/banner2.jpg)
    > no-repeat;
    > background-color: #006633;
    > }


    The line "no-repeat" is the key that fixed the puzzle for me. With out it
    would repeat and fill out the rest of the box and with the width setup it
    was impossible to fill in with the back ground color.

    Thanks Again;

    Charles
    Torrance, California
    http://www.tcpslashipdomains.com Now accepting PayPal!
    http://www.tcpslaship.com under construction
     
    Tabasco1, Oct 1, 2004
    #7
  8. Tabasco1

    bulge Guest

    On Fri, 01 Oct 2004 16:37:22 GMT, "Tabasco1" <>
    wrote:

    >The line "no-repeat" is the key that fixed the puzzle for me. With out it
    >would repeat and fill out the rest of the box and with the width setup it
    >was impossible to fill in with the back ground color.
    >
    >Thanks Again;
    >
    >Charles
    >Torrance, California
    >http://www.tcpslashipdomains.com Now accepting PayPal!
    >http://www.tcpslaship.com under construction



    glad it worked out for you :)
     
    bulge, Oct 6, 2004
    #8
    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. Eric
    Replies:
    4
    Views:
    757
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    486
    Jukka K. Korpela
    Sep 9, 2003
  3. Replies:
    6
    Views:
    575
    Jonathan N. Little
    Mar 18, 2006
  4. AF
    Replies:
    17
    Views:
    623
    Nije Nego
    Aug 9, 2006
  5. richard
    Replies:
    12
    Views:
    781
    dorayme
    Mar 9, 2010
Loading...

Share This Page