...

View Full Version : padding top+bottom



vexen
07-01-2007, 12:10 AM
hi, i've being searching W3/A List Apart/Google for more than 2 hours since i really wanted to find a way to do it! (i'm still learning!)

here it is:
i'd like to add a top and bottom padding top a div, let's say both 10 px, both different images

you're going to say, simply use a background image for your div? i can't, my div is fluid, depending on the browsers text size, with a hacked min-height of 168px

i would not mind using all padding margin and border attributes in an inside div because my images are simply '3 lined color', even if it would mess up my hack a little bit - it already uses the padding settings :



#header {
margin: 0;
padding: 0;
}

*>#header {padding-top: 168px; min-height: 1px;}
*>#header p {margin-top: -168px;}
* html #header {
/* IE5Mac filter \*/
height: 168px;
/* end filter */
}


check my full code here http://en.pastebin.ca/597944

koyama
07-01-2007, 12:38 AM
you're going to say, simply use a background image for your div? i can't, my div is fluid, depending on the browsers text size, with a hacked min-height of 168px
For the lower background image why not use a background image positioned at the bottom in that fluid div of variable height? The upper background image can be put in the first nested block-level element. Wouldn't that be the p element?

vexen
07-01-2007, 12:41 AM
thanks for the idea and the fast reply, i'll give it a try

vexen
07-01-2007, 08:49 AM
alright, i've got the top and bottom paddings set up

but i am farther away now, i dont understand how i could get this result i commented in my image : http://img171.imageshack.us/img171/1649/jps10exzp0.gif

as i think more about it, the height percentages (wich i tried in index5.htm (http://veksen.net/vexen/temp/index5.htm)) don't make sense anymore, since anyway, it would automaticly scales to the proper size.

my main problem is with my UL menu, being inside my menucontainer, but with the round corners being outside it, i just don't know where to start!

as for the rest, i am fine, however if you think my code could be simplified (i know it can!) let me know!

also don't give me full codes sample, give me the mentality over it so i understand :)

ALSO, since i use a left padding on the left of my FULL div, i get an horizontal scrollbar, wich i don't want, any fix?

you'll see i don't use an external css yet, and some elements use a style right there, it is just faster like this right now for me

heres my two test pages so far (both validated)

index4.htm (http://veksen.net/vexen/temp/index4.htm)
index5.htm (http://veksen.net/vexen/temp/index5.htm)

koyama
07-01-2007, 04:11 PM
Alright you have many questions. I think I'll just come with a couple of pointers and then see how your code evolves.

if you think my code could be simplified (i know it can!) let me know!
I'm not sure where you got that min-height hack. It looks overly complicated.


/* min height hack */
*>#header {padding-top: 168px; min-height: 1px;}
*>#header div {margin-top: -168px;}
* html #header {
/* IE5Mac filter \*/
height: 168px;
/* end filter */
}

Why not just use sothething like this? Perhaps I have overlooked something.


#header {
min-height: 168px;
_height: 168px; /* for IE6- */
}


ALSO, since i use a left padding on the left of my FULL div, i get an horizontal scrollbar, wich i don't want, any fix?
Here is what you have (index5.htm):


<div id="full" style="
border-left:32px solid #fff;
margin:0;
background:#c1c1c1;
width:100%;
height:400px
">
The “effective width” is the sum of the borders, paddings, and width. Obviously, 100% + 32px adds up to more than 100% which is why you get the horizontal scrollbar. You don't need to specify the width (i.e. just use width: auto). The div will automatically expand in width to occupy the available width.

vexen
07-02-2007, 07:48 AM
hey thanks! its getting better and better, if you want to see where i am right now: here it is :

http://veksen.net/vexen/temp/index8.htm

my FR EN and STYLESELECT don't want to stick to the right, i tried float:right, position:absolute;right:0, text-align: right, nothing really worked, or only IE or FF was displaying it right

thanks again for your time!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum