The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Spoiler out of place

View previous topic View next topic 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:



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

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

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?



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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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?
avatar
IdaTR
Forumember

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

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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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?
avatar
IdaTR
Forumember

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

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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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:



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

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

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?


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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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:
avatar
IdaTR
Forumember

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

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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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.
avatar
IdaTR
Forumember

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

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

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://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
avatar
IdaTR
Forumember

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

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40523
Reputation : 2733
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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