View Full Version : Help With CSS Spacing

05-10-2006, 02:21 AM
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 (http://comiclounge.ath.cx/format.css)(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.

I suppose I should include the site Here (http://comiclounge.ath.cx)

05-10-2006, 02:46 AM
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

h2 {
padding: 0;
margin: 0;

that will eleminate your issue.

Can I suggest though that at the beginning of your css you write

* {
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 ;)

05-10-2006, 03:08 AM
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.


05-10-2006, 03:26 AM
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 (http://search.atomz.com/search/?sp-q=sliding+doors&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All)

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:


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

done like so:

<ul id="nav">
<li class="homelink"><a href="index.html" alt="Home Page">Home Page<span></span></a></li>

#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 ;)

05-10-2006, 03:43 AM
I was going off of this (http://www.vertexwerks.com/tests/sidebox/) for the resizing of text, while keeping the right shape, with rounded corners.