Spoiler out of place

Now i've been trying for a while, 

But how do i move the; "Spoiler"
to the section where the border box is:



As you can see the "spoiler" is out of its border. How do i move it up?

CSS Code:

Edit: version: phpbb3, www.vie-la-mort.forum-motion.com

I checked your forum and the spoiler appeared fine for me. Can you give an example, or location of where this happened on your forum?



I did however, try to recreate what you were experiencing:


Forced Error:

Code:

dl.codebox dt {
position:relative;
top:30px;
}

Adjust the pixels of top until its positioned correctly for you. 0px should be its correct positioning, if not try around -10px.

The fact that I haven't experienced it during viewing makes me think something else may be causing this.

Hmm i see well the code works (:
Thx!

Another thing which involves the spoiler, can i change the height of the Spoiler when its small?

This should work:

Code:

dl.codebox dt{
margin-bottom:-10px;
}

Adjust the pixel margin to whatever you wish.

Howabout the width for the header text?

Ex:

Flowers are red:

The "Flowers are red"

If i want that section to have a larger width, so it stands on one line and two what do i do then?

You could do this:

Code:

dl.codebox dt/*Increases header width*/{
width:550px;
}
dl.codebox/*Increases overall spoiler/code width*/{
width:600px;
}

However, the only issue is that the words would then run off the side of the spoiler and disappear. To negate that you will have to increase the size of codebox, and so will that run off the side of your postrows and disappear, or "cut off" the content.

Its best to choose low values so the above doesn't occur. You could also make the font size smaller so the words take up less space as well.

Its fine (:
But yea i see the issues.. is it possible to automatic place the text under the line, but still be a bit in side the spoiler like here:



Here have i just moved the text a line down, but can i do it automatically in the css?

So something like this?

Code:

dl.codebox dt/*Header text*/{
right:150px;
}
dl.codebox/*Content*/{
position:relative;
left:140px;
}

Increasing the values above moves the header text, and content further from each other.

yes! exactly like that! 

Although the text should be a little closer to the header (:

Edit: When i tried the code, the text goes out of the line: 

So you want the text vertically close to the head correct? Then you should modify the bottom margin of it by..probably 15px to make it:(This will make the content below it closer, you can also do the opposite by using a positive value)

Code:

dl.codebox dt{
margin-bottom:-30px;
}

As for the content moving off the forum try modifying the positioning of this:(I already modified it slightly reducing it by 40px, reduce it more until its pefect)

Code:

dl.codebox/*Content*/{
position:relative;
left:100px;
}

Makes the background dissapear.
edit got it to work, but the text goes into the header.

I see, modify margin-bottom until the text is a considerable distance from the header. 30 may have been too much so give 10 or 15 a try.

works (: solved