Ethan Mick Ethan Mick - 1 month ago 17
CSS Question

Reverse padding with CSS

I'm working on a website, and I'm trying some new stuff with CSS. More for "flair" than anything, but I want the site to look good. :)

alt text

In the picture above, I want the line to actually be "in" the white box saying "Welcome to Moria" so it looks as though the white line comes /out/ of the box and stretches across. Basically, I want the white line down a few pixels. (or everything else up a few pixels.)

This is the HTML of the section:

<div class = "paragraphSection">
<span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
Moria is a Minecraft server, which we have evolved into fun place to
build, talk, and fight. Everyone is welcome to join us play! Of course, you should probably
read this page to understand what is happening, because it's a little more then
just Minecraft.</span>
</div>


And this is the CSS I'm trying to use:

.paragraphSection {
border-top-style:solid;
border-top-width:1px;
border-color:white;
padding-top:0px;

}

.textHeading {
font-size:2em;
padding-left:3px;
padding-right:3px;
background-color:white;
padding:-10px;

-moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}


What I tried to do was simply making the padding element negative, so it would go "up" instead of down. However, that didn't work at all. I thought you could do that, but apparently not. So I'm not sure how to make the border of the paragraphSection move down.

Answer

Try this:

.textHeading{
  position:relative;
  top:-5px; //Adjust it according to what looks good to you.
  .
  .
}