Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > padding-left

Reply
Thread Tools

padding-left

 
 
chlori
Guest
Posts: n/a
 
      07-05-2003
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


 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      07-05-2003
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 | (E-Mail Removed) | pgp:0x6A2A7D39
aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:(E-Mail Removed)
http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
playing://ben_folds/rockin_the_suburbs/07_losing_lisa.ogg
 
Reply With Quote
 
 
 
 
Jacqui or (maybe) Pete
Guest
Posts: n/a
 
      07-05-2003
In article <be6lls$1o68r$(E-Mail Removed)>, http://www.velocityreviews.com/forums/(E-Mail Removed)
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?
 
Reply With Quote
 
chlori
Guest
Posts: n/a
 
      07-05-2003
"Jacqui or (maybe) Pete" <(E-Mail Removed)> schrieb im Newsbeitrag
news:(E-Mail Removed)...

> 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


 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      07-05-2003
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 | (E-Mail Removed) | pgp:0x6A2A7D39
aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:(E-Mail Removed)
http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
playing://(nothing)
 
Reply With Quote
 
chlori
Guest
Posts: n/a
 
      07-06-2003
"Jacqui or (maybe) Pete" <(E-Mail Removed)> schrieb im Newsbeitrag
news:(E-Mail Removed)...

> 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


 
Reply With Quote
 
Jacqui or (maybe) Pete
Guest
Posts: n/a
 
      07-06-2003
In article <be967d$2hqv4$(E-Mail Removed)>, (E-Mail Removed)
says...
> "Jacqui or (maybe) Pete" <(E-Mail Removed)> schrieb im Newsbeitrag
> news:(E-Mail Removed)...
>

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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments