Spoiler out of place

Go down

Solved Spoiler out of place

Post by IdaTR on September 28th 2013, 12:54 pm

Now i've been trying for a while, 

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

Spoiler out of place Xo1pux

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

CSS Code:
/* Code block------------------------------------------------*/
dl.codebox {
padding: 3px;
background-color: #FFFFFF;
border: 1px solid #C9D2D8;
font-size: 1em;
}
dl.codebox dt {
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
}
blockquote dl.codebox {
margin-left: 0;
}
dl.codebox code {
overflow: auto;
display: block;
height: auto;
max-height: 200px;
white-space: normal;
padding-top: 5px;
font: 0.9em Courier,Courier New,sans-serif;
line-height: 1.3em;
color: #2E8B57;
margin: 2px 0;
}


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

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 1:58 pm

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?

Spoiler out of place Captur33

I did however, try to recreate what you were experiencing:
Spoiler out of place Captur34

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on September 28th 2013, 2:08 pm

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?
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 2:38 pm

This should work:
Code:
dl.codebox dt{
margin-bottom:-10px;
}
Adjust the pixel margin to whatever you wish.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on September 28th 2013, 2:46 pm

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?
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 3:04 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on September 28th 2013, 3:20 pm

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:

Spoiler out of place Udklip12

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

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 3:55 pm

So something like this?
Spoiler out of place Captur36

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on September 28th 2013, 4:09 pm

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: 
Spoiler out of place Nvwsbq
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 4:28 pm

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;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on September 28th 2013, 4:34 pm

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

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on September 28th 2013, 6:12 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on October 7th 2013, 9:43 am

works (: solved
IdaTR
IdaTR
Forumember

Female Posts : 547
Reputation : 1
Language : Danish, english
Location : Denmark

View user profile http://www.vielamort.net

Back to top Go down

Solved Re: Spoiler out of place

Post by SLGray on October 8th 2013, 12:51 am

Topic Solved & Locked


Spoiler out of place Slgray10
Spoiler out of place Ssshfm13

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 48155
Reputation : 3383
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum