Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts

    padding top+bottom

    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 :

    Code:
    	#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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by vexen View Post
    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?

  • #3
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    thanks for the idea and the fast reply, i'll give it a try

  • #4
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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 :

    as i think more about it, the height percentages (wich i tried in 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
    index5.htm

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Alright you have many questions. I think I'll just come with a couple of pointers and then see how your code evolves.
    Quote Originally Posted by vexen View Post
    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.
    Code:
    /* 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.
    Code:
    #header {
    	min-height: 168px;
    	_height: 168px; /* for IE6- */
    }
    Quote Originally Posted by vexen View Post
    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):
    Code:
    <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.
    Last edited by koyama; 07-01-2007 at 05:16 PM. Reason: typo

  • #6
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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!
    Last edited by vexen; 07-02-2007 at 08:49 AM. Reason: typooo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •