Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
adding padding is pushing my height ?
Old 06-01-2010, 05:15 PM adding padding is pushing my height ?
Super Talker

Posts: 142
Name: William
Trades: 0
I am trying to center my text in this "nav list" but when I add padding of "10px" it is pushing the height of the box down (i specified height to be 30 px and I tried changing it to max-height and adding a min-height but it keeps pushing it....)

any idea?

url = http://www.uuilliam.net/rugsale
where it says "text goes here"

css:
.nav {
background:#403f3f no-repeat;
height:30px;
margin:0 auto;
padding:10px 0px 0px 10px;
}

Last edited by UUilliam; 06-01-2010 at 05:21 PM..
UUilliam is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 06-01-2010, 05:19 PM Re: adding padding is pushing my height ?
Super Talker

Posts: 142
Name: William
Trades: 0
edit: I have "sorta" fixed it by removing the padding from bottom and right, however this is a hack? surely adding padding doesnt push height?
it still pushes the height but not as much.

Last edited by UUilliam; 06-01-2010 at 05:20 PM..
UUilliam is offline
Reply With Quote
View Public Profile
 
Old 06-01-2010, 05:34 PM Re: adding padding is pushing my height ?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,376
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
You need to understand the W3c box model.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-01-2010, 05:39 PM Re: adding padding is pushing my height ?
Super Talker

Posts: 142
Name: William
Trades: 0
Margin = outside
border=in the middle (going around edge of box)
padding = inside
content = where the text goes..? :S

I am trying to make the text center both vertically and horizontally

ill try vertical-align and horizontal-align then?

Edit: Fixed using a hack

add line-height and make it the same size as your box i.e. my box was height:30x; so line-height is line-height:30px;

Last edited by UUilliam; 06-01-2010 at 05:51 PM..
UUilliam is offline
Reply With Quote
View Public Profile
 
Old 06-01-2010, 05:59 PM Re: adding padding is pushing my height ?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,376
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
there are a few ways to centre text vertically.

Faking it with images
With line height
With display:table-cell
and vertical-align doesn't work as people think
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-01-2010, 07:36 PM Re: adding padding is pushing my height ?
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Quote:
padding = inside
Nope, padding does NOT go on the inside of the 'box', not reallyl, it's added to the width that you specify for your content.

http://www.guistuff.com/css/css_boxmodel.html

http://dev.opera.com/articles/view/3...-boxes-border/

Here's a 3d version of the box model: http://www.hicksdesign.co.uk/boxmodel/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 06-01-2010 at 07:38 PM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-02-2010, 04:22 AM Re: adding padding is pushing my height ?
Super Talker

Posts: 142
Name: William
Trades: 0
Ohh, I see now xD
so to add 10px padding and get the correct size box my box size would actually be

width: 160px
height: 10px
padding 10px
UUilliam is offline
Reply With Quote
View Public Profile
 
Old 06-02-2010, 02:02 PM Re: adding padding is pushing my height ?
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
If you want your box to be 180px wide and 30px high, then yes.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-02-2010, 05:07 PM Re: adding padding is pushing my height ?
Novice Talker

Posts: 11
Name: Gary
Trades: 0
Padding is on the inside and therefor will add to the height of your box, so say box height is 20px plus padding-top 10px it will display a box of 30px height. On the other hand margin-top 10px wont increase the height of the box instead it will add padding on top of the box.
__________________
This is my php magento promotional website
Please login or register to view this content. Registration is FREE
webchamp is offline
Reply With Quote
View Public Profile
 
Old 06-02-2010, 05:25 PM Re: adding padding is pushing my height ?
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Read the articles I linked to on the box model, padding is NOT technically 'inside' the box at all.

Quote:
The basic rule is that the computed width or height of an element is equal to: margin + border + padding + (width|height)
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-02-2010, 06:24 PM Re: adding padding is pushing my height ?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,376
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Understand that you are thinking as the "box" and the element are NOT the same thing.

With CSS you need to be thinking "out of the box", inside the box and all around the box.

Currently you thinking the "box" dimensions refer to the element, whereas the "box" is the bit in the middle (content area) and every thing "grows" from the "box" outwards to create the overall dimensions of the element.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to adding padding is pushing my height ?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.12755 seconds with 12 queries