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 28th September 2013, 18:54

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

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

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

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 28th September 2013, 20:08

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
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 28th September 2013, 20:46

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
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

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

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 28th September 2013, 21:20

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?

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

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

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 28th September 2013, 22:09

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:

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on 28th September 2013, 22:28

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 28th September 2013, 22:34

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

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

Post by Ange Tuteur on 29th September 2013, 00:12

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler out of place

Post by IdaTR on 7th October 2013, 15:43

works (: solved

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Spoiler out of place

Post by SLGray on 8th October 2013, 06:51

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

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