padding-left

Discussion in 'HTML' started by chlori, Jul 5, 2003.

  1. chlori

    chlori Guest

    Hello Newsgroup

    I'm trying to have a div which fills the whole width of the browser window.
    I want to have a link in that div (like "sitemap"). That word should start
    330px from the left side.

    The following code worked, but I get a horizontal scrollbar. The div is
    too wide...

    div.bla
    {
    position : absolute;
    left : 0px;
    top : 72px;
    height : 18px;
    width : 100%;
    padding-left : 330px;
    }

    Can anyone help me get rid of that scrollbar?
    (Tested with Mozilla 1.3, IE6)

    Thanks
    chlori
     
    chlori, Jul 5, 2003
    #1
    1. Advertising

  2. On Sat, 05 Jul 2003 16:00:17 +0200, chlori wrote:

    > div.bla
    > {
    > position : absolute;
    > left : 0px;
    > top : 72px;
    > height : 18px;
    > width : 100%;
    > padding-left : 330px;
    > }
    >
    > Can anyone help me get rid of that scrollbar?


    Try:

    div.bla
    {
    position : absolute;
    left : 0px;
    top : 72px;
    height : 18px;
    width : auto;
    margin-left : 330px;
    }

    Note: it is better to specify sizes in em than px.

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://ben_folds/rockin_the_suburbs/07_losing_lisa.ogg
     
    Toby A Inkster, Jul 5, 2003
    #2
    1. Advertising

  3. In article <be6lls$1o68r$>,
    says...
    > Hello Newsgroup
    >
    > I'm trying to have a div which fills the whole width of the browser window.


    That's the default behaviour.

    > I want to have a link in that div (like "sitemap"). That word should start
    > 330px from the left side.
    >
    > The following code worked, but I get a horizontal scrollbar. The div is
    > too wide...
    >
    > div.bla
    > {
    > position : absolute;
    > left : 0px;
    > top : 72px;
    > height : 18px;
    > width : 100%;
    > padding-left : 330px;
    > }
    >

    Well, width = padding + margins + borders + content so...

    Does it have to be absolutely positioned? If it's taking up 100% of the
    width & it's at the top, why not just put it first in the html & use:

    body {padding: 0; margin: 0;}
    div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}

    I take it your trying to fit the div to a picture & hence the need for
    px?
     
    Jacqui or (maybe) Pete, Jul 5, 2003
    #3
  4. chlori

    chlori Guest

    "Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
    news:...

    > Does it have to be absolutely positioned?


    I don't know, does it?
    What's the exact difference between absolute, relavtive, ..??
    I just used the absolute because it sounded good :)

    > If it's taking up 100% of the
    > width & it's at the top, why not just put it first in the html & use:


    It's not at the top. It's 72px from the top.

    > body {padding: 0; margin: 0;}
    > div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}


    I want this div to be like a horizontal bar across the whole window.
    I took this away, because i thought it wasn't important for my
    question:
    background-color : #ffff66;
    color : #000000;

    > I take it your trying to fit the div to a picture & hence the need for
    > px?


    Yes, the right edge of my picture is 320px from the left.
    The div we're talking about is just on top of that picture and i don't
    want the text to be over the edge of the pic.

    Thanks
    chlori
     
    chlori, Jul 5, 2003
    #4
  5. On Sat, 05 Jul 2003 16:00:42 +0100, Jacqui or Pete wrote:

    > Absolute: Goes where you put it. Other things ignore its presence.
    >
    > Relative: Leave a hole where it would have been & shift the contents as
    > specified. Other non-absolutely positioned things move out of the way of
    > the hole.
    >
    > Static: the normal default.


    And don't forget...

    Fixed: same as absolute, but when the window scrolls, don't move the
    object. (Not supported in IE/Win)

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
     
    Toby A Inkster, Jul 5, 2003
    #5
  6. chlori

    chlori Guest

    "Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
    news:...

    > Absolute: Goes where you put it. Other things ignore its presence.
    >
    > Relative: Leave a hole where it would have been & shift the contents as
    > specified. Other non-absolutely positioned things move out of the way of
    > the hole.
    >
    > Static: the normal default.


    Thank you for the information. I didn't know about that.

    > > > body {padding: 0; margin: 0;}
    > > > div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}

    > >
    > > I want this div to be like a horizontal bar across the whole window.

    >
    > That's what the css I gave does. Try it out.


    I did and it works exactly how I want it to! Thanks...

    chlori
     
    chlori, Jul 6, 2003
    #6
  7. In article <be967d$2hqv4$>,
    says...
    > "Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
    > news:...
    >

    ....
    > > > > body {padding: 0; margin: 0;}
    > > > > div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}
    > > >
    > > > I want this div to be like a horizontal bar across the whole window.

    > >
    > > That's what the css I gave does. Try it out.

    >
    > I did and it works exactly how I want it to! Thanks...
    >

    You're welcome.

    If you've got an absolutely positioned image to the left of the text
    (I'm guessing here) then it may be easier to just stick the image in the
    div. That'll set the height of the div, and the text will automatically
    be to its right:

    <div id="bar"><img src="fred.gif" alt="xxx"> Some text</div>

    If you want a bigger gap between the pic and the text you could use eg:

    #bar img {
    margin-right: 3em;
    }
     
    Jacqui or (maybe) Pete, Jul 6, 2003
    #7
    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. Dave
    Replies:
    7
    Views:
    5,717
    Joe Smith
    Jul 22, 2004
  2. RA
    Replies:
    1
    Views:
    387
  3. Ike

    left-padding ints

    Ike, Sep 7, 2005, in forum: Java
    Replies:
    3
    Views:
    6,091
  4. Steve Pugh
    Replies:
    3
    Views:
    499
    Scott_From_PA
    Feb 11, 2005
  5. Tony M
    Replies:
    5
    Views:
    2,120
    Tony M
    Sep 7, 2005
Loading...

Share This Page