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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    34
    Thanks
    2
    Thanked 1 Time in 1 Post

    Help With CSS Spacing

    This is my version of the Sliding Doors Technique, but I'm having problems. How do I get rid of the space between the two text boxes (News Header & Content). The .css file(at the very bottom)Also, don't worry the colors aren't staying that way.

    I'm hoping that I'm being stupid, but I can't figure it out.

    Edit:
    I suppose I should include the site Here

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Alot of elements have default padding and margins applied to them. In this case it's your h2 element. If you put in your css
    Code:
    h2 {
    padding: 0;
    margin: 0;
    }
    that will eleminate your issue.

    Can I suggest though that at the beginning of your css you write
    Code:
    * {
    padding: 0;
    margin: 0;
    }
    that will turn off ALL the padding and margins on everything. then you go in and just tweak to make things right. I tried it and things shifted a little as is but your not too far along to add the * code in and then tweak to make things sit right again.

    and a little side note. I dont see any sliding doors going on in there. As a fan of the technique i was a little dissapointed not to see something moving around
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    34
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thank you so much I never even thought about that, I'm relatively new to css, only about (a very light and off and on) 6 months. Also, its relation to the sliding doors is in the height not width, or did I miss something in the technique? I'm going to look at it again now.

    Thanks!
    Pat

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    np on the spacing issue. it's a liitle quirk that bugs people until they realize you can turn it off and start from scratch. Just searchthrough this forum and you'll see that I too had to be taught about it

    the sliding doors I know is base on: This effect

    basically making image links and when hovering over them they "slide" over to reaveal a new image. Looking at your css I don't see naything that relates but I may have missed it.

    a small example would be the navigation on this site:

    http://home.earthlink.net/~harbingerofthevoid/clovis

    when you roll over the links the background swaps out to reaveal the star.

    done like so:
    Code:
    <ul id="nav">
    <li class="homelink"><a href="index.html" alt="Home Page">Home Page<span></span></a></li>
    </ul>
    Code:
    #nav li a span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    }
    .homelink {
    width: 345px;
    height: 82px;
    }
    .homelink span {
    background: transparent url(homelink.jpg) 0 0 no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    }
    #nav li a:hover span {
    background-position: -346px;
    }
    #nav li a:hover{visibility:visible}
    I think that's all the relevent css involved. It's kinda heavy in there
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    34
    Thanks
    2
    Thanked 1 Time in 1 Post
    I was going off of this for the resizing of text, while keeping the right shape, with rounded corners.


  •  

    Posting Permissions

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