So how do I overlay two div boxes? As in, same size, one in front, slightly offset from the other? I know it uses the z-index, but if someone could sort of walk me through it so I understand how to use that, it'd be super helpful!
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
Use position: absolute for the two div boxes, but make sure they are both inside a div that's position:relative.So how do I overlay two div boxes? As in, same size, one in front, slightly offset from the other? I know it uses the z-index, but if someone could sort of walk me through it so I understand how to use that, it'd be super helpful!
Use position: absolute for the two div boxes, but make sure they are both inside a div that's position:relative.
[div=position: relative; border: 1px solid black][div=position: absolute; z-index: 1; height: 325px; width: 250px; border: 2px solid black; background-color: white][/div][div=position: relative; z-index: -1; height: 325px; width: 250px; background-image: url(https://www.rpnation.com/media/cemetery.32146/full); border: 2px solid black][/div][/div]
The first div is being displayed on top of the second since it has a higher z-index than the second one. Also, to make it so that the divs don't clip out of the message box, you will have to define a height in your outer div, so something like height: 329px.Might you be able to tell me where I'm going wrong here?
Code:[div=position: relative; border: 1px solid black][div=position: absolute; z-index: 1; height: 325px; width: 250px; border: 2px solid black; background-color: white][/div][div=position: relative; z-index: -1; height: 325px; width: 250px; background-image: url(https://www.rpnation.com/media/cemetery.32146/full); border: 2px solid black][/div][/div]
It's turning out like this:
Edit: If I change that second div to absolute, it gets stuck in front of all the things I need to type on to change things and it's really annoying so I inserted it like this.
[centerblock=50][div=position: relative; height: 350px; width: 254px][div=position: absolute; z-index: 1; right: 20px; top: 20px; height: 325px; width: 250px; background-color: #708090; opacity: 0.5; overflow: hidden][div=height: 340px; width: 265px; overflow: scroll; opacity: 1; z-index: 3]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et vehicula purus. Mauris auctor, dui ut lobortis posuere, eros sem convallis purus, sit amet consequat nisi nisi ornare justo. Vestibulum dapibus porta nulla vitae vulputate. Praesent sapien metus, lobortis sit amet consectetur a, tincidunt in diam. Proin bibendum sagittis ullamcorper. Mauris in sagittis lorem. Curabitur at ultrices odio. Nunc eu est vel ipsum dapibus venenatis.
Donec eget semper leo. Aliquam tincidunt ex sem, in commodo felis finibus semper. Nulla consequat id nisl vitae egestas. Aenean arcu velit, aliquet viverra suscipit nec, sollicitudin eu tellus. Duis turpis purus, cursus ac lobortis ac, suscipit sit amet est. Praesent venenatis finibus venenatis. Suspendisse vel leo nisl.
Aenean blandit augue quis enim ullamcorper malesuada. Maecenas varius hendrerit aliquam. Quisque eget ante sapien. Sed ultrices leo ac consectetur feugiat. Quisque faucibus, erat a iaculis congue, urna leo varius sem, et elementum arcu purus ullamcorper justo. In consectetur leo sit amet augue volutpat dapibus. Nulla vitae vestibulum metus. Mauris ac tortor fermentum, commodo dolor quis, congue orci. Aliquam mattis vehicula felis, et iaculis ipsum. Nulla erat sapien, aliquam id enim sit amet, dignissim volutpat odio. Proin tincidunt tempor neque eget posuere.[/div]
[/div][div=position: absolute; height: 325px; width: 250px; background-image: url(https://www.rpnation.com/media/cemetery.32146/full); border: 2px solid black][/div][/div][/centerblock]
If you're able to, don't use opacity. Use rgba() instead of hex#. if you use rgba() for your colors, you can make a fourth argument that defines color opacity from 0 to 1.0. so the rgba() conversion of #708090 with opacity 0.5 would be rgba(112, 128, 144, 0.5)Thank you so much! I'm slowly figuring it out.
Here is how it looks now:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et vehicula purus. Mauris auctor, dui ut lobortis posuere, eros sem convallis purus, sit amet consequat nisi nisi ornare justo. Vestibulum dapibus porta nulla vitae vulputate. Praesent sapien metus, lobortis sit amet consectetur a, tincidunt in diam. Proin bibendum sagittis ullamcorper. Mauris in sagittis lorem. Curabitur at ultrices odio. Nunc eu est vel ipsum dapibus venenatis.
Donec eget semper leo. Aliquam tincidunt ex sem, in commodo felis finibus semper. Nulla consequat id nisl vitae egestas. Aenean arcu velit, aliquet viverra suscipit nec, sollicitudin eu tellus. Duis turpis purus, cursus ac lobortis ac, suscipit sit amet est. Praesent venenatis finibus venenatis. Suspendisse vel leo nisl.
Aenean blandit augue quis enim ullamcorper malesuada. Maecenas varius hendrerit aliquam. Quisque eget ante sapien. Sed ultrices leo ac consectetur feugiat. Quisque faucibus, erat a iaculis congue, urna leo varius sem, et elementum arcu purus ullamcorper justo. In consectetur leo sit amet augue volutpat dapibus. Nulla vitae vestibulum metus. Mauris ac tortor fermentum, commodo dolor quis, congue orci. Aliquam mattis vehicula felis, et iaculis ipsum. Nulla erat sapien, aliquam id enim sit amet, dignissim volutpat odio. Proin tincidunt tempor neque eget posuere.
Now I just need to get the text to be opaque. I put the text in it's own div box so that I could hide the scroll bar, but I wasn't able to get that opacity to override the outer div box's opacity.
Any ideas? Here is the code.
Code:[centerblock=50][div=position: relative; height: 350px; width: 254px][div=position: absolute; z-index: 1; right: 20px; top: 20px; height: 325px; width: 250px; background-color: #708090; opacity: 0.5; overflow: hidden][div=height: 340px; width: 265px; overflow: scroll; opacity: 1; z-index: 3] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et vehicula purus. Mauris auctor, dui ut lobortis posuere, eros sem convallis purus, sit amet consequat nisi nisi ornare justo. Vestibulum dapibus porta nulla vitae vulputate. Praesent sapien metus, lobortis sit amet consectetur a, tincidunt in diam. Proin bibendum sagittis ullamcorper. Mauris in sagittis lorem. Curabitur at ultrices odio. Nunc eu est vel ipsum dapibus venenatis. Donec eget semper leo. Aliquam tincidunt ex sem, in commodo felis finibus semper. Nulla consequat id nisl vitae egestas. Aenean arcu velit, aliquet viverra suscipit nec, sollicitudin eu tellus. Duis turpis purus, cursus ac lobortis ac, suscipit sit amet est. Praesent venenatis finibus venenatis. Suspendisse vel leo nisl. Aenean blandit augue quis enim ullamcorper malesuada. Maecenas varius hendrerit aliquam. Quisque eget ante sapien. Sed ultrices leo ac consectetur feugiat. Quisque faucibus, erat a iaculis congue, urna leo varius sem, et elementum arcu purus ullamcorper justo. In consectetur leo sit amet augue volutpat dapibus. Nulla vitae vestibulum metus. Mauris ac tortor fermentum, commodo dolor quis, congue orci. Aliquam mattis vehicula felis, et iaculis ipsum. Nulla erat sapien, aliquam id enim sit amet, dignissim volutpat odio. Proin tincidunt tempor neque eget posuere.[/div] [/div][div=position: absolute; height: 325px; width: 250px; background-image: url(https://www.rpnation.com/media/cemetery.32146/full); border: 2px solid black][/div][/div][/centerblock]
[div=display: block; background: url(https://www.rpnation.com/media/space-wallpaper-5.32652/full?d=1512750935) no-repeat; width: 775px; height: 484px; max-width: 775px; max-height: 484px; min-width: 300px, min-height: 484px;]
[div=display: block; width: 500px; height: 250px; margin: 170px auto 500px auto;][div=overflow: hidden; width: 100%; height: 100%;][div=overflow-y: scroll; height: 100%; width: 100%;]Lorem ipsum dolor sit amet, alia evertitur ei mei, nec elitr nominavi ei, ut complectitur voluptatibus his. No autem denique minimum nec, in discere ceteros vim. Feugiat saperet qualisque pro ad, dolorem vivendum adversarium ad qui. Ne ipsum salutandi periculis pro. Choro sensibus pericula et eum, habeo deleniti eu nam, nam sale aperiri moderatius ut.
No eum graecis constituto, ne fuisset concludaturque has, in per sanctus consequat. No sea quod patrioque. Qui ex quod conclusionemque, nam eu recteque mnesarchum. Ne vis dicunt option. Augue laudem an qui, ut minim intellegat eum.
Quot natum cetero eos id. Sea ea temporibus adversarium. Est ea mazim nemore nostrum. Pri ea alienum expetenda definiebas.
Ut nam option apeirian intellegat, idque virtute nec ea, per ignota appetere recteque in. Vix probo fierent at, dico melius copiosae ad eum. At sed patrioque mediocritatem. Ea nec clita persius nominavi, pro cibo mucius ut. Exerci deleniti expetendis cum cu.
Et nec praesent partiendo, latine singulis liberavisse eam ne.
[/div]
[/div]
[/div]
[/div]
Yes. Not only can you use Font-family, you can apply font-variant, font-weight, and other stuff to make it so that it isn’t a bolded all caps header like it always is.a slightly dumb question:
would it be possible to change the default font on the accordion "headers" with a div?
thank you! i was using the wrong name for the font, haha.Yes. Not only can you use Font-family, you can apply font-variant, font-weight, and other stuff to make it so that it isn’t a bolded all caps header like it always is.
[div=width:100px;height:100px;background:url('https://vignette.wikia.nocookie.net/monstax/images/f/ff/Hyungwon-Newton02.jpg/revision/latest?cb=20170730223317');background-size:100%;margin:auto;center;border:0px solid #ddcccc;border-top-right-radius:50px;border-bottom-left-radius:50px; position: relative; margin-left: 360px][/div]
[div=width:300px;height:300px;margin:auto;center;background:white;][tabs][tab=hello][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One][side=right]× name
× age
× gender
× birthday
× horoscope
× sexuality[/side]
× h i s t o r y ×
.
.
.
.
× p e r s o n a ×
.
.
.
.[/font][/div][/div][/div][/tab][div=height:300px;margin:auto;center;][/div][/tabs][div=height:300px;margin:auto;center;][/div][tabs][tab=hello][/tab][/tabs][/div][tabs][tab=hello][/div][/tab][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][tab=h3llo][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]I can see it in your eyes
All the years that passed us by
Just say
You remember all the times
All the memories we hide
Away
So now you're here with me
She's waiting patiently
But what you say
Tell me I'm not crazy
That you feel the same
Oh, don't you walk away
How can I make you stay?
Tell me you've been waiting
That I'm not too late
I never walked away
How can I make you stay?[/font][/div][/div][/div][/tab][tab=hell0][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]Tell me what I gotta do
Show me what I gotta lose
For you
Did I speak too soon?
How can I make you chose?
Your move
So now you're here with me
She's waiting patiently
But what you say
Tell me I'm not crazy
That you feel the same
Oh, don't you walk away
How can I make you stay?
Tell me you've been waiting
That I'm not too late
I never walked away
How can I make you stay?[/font][/div][/div][/div][/tab][/div][/div][/div][/tabs][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][/div][div=height:0px;][div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][font=Cinzel][size=15px][color=black][color=transparent]////\\[/color]one[color=transparent]///\\/[/color]two[color=transparent]////\\/[/color]three[/color][/size][/font][/div][/div][/div][/div][/div]
This is not possible.I'm no coder, but I enjoy using even the simplest of BBCode in my work. But, can I make it better and even simpler at the same time?
The question I have: is it possible to utilize tooltips in BBCode? And if not, will such a possibility ever be added soon?
While sadly it is not phone friendly, I believe it can still be immensely useful in showing less, but still having a lot underneath - which is fantastic for those who are absolute suckers for detail. Just mouse over text or an image and you'll find that extra info!
An approximation of this should be possible soon (as in, I haven't tried to implement it myself, but it should be feasible with the upcoming changes), but an exact tooltip in the sense of an image's alt text is not possible and, as far as I know, there are no plans to add such functionality.The question I have: is it possible to utilize tooltips in BBCode? And if not, will such a possibility ever be added soon?
Code:[div=width:100px;height:100px;background:url('https://vignette.wikia.nocookie.net/monstax/images/f/ff/Hyungwon-Newton02.jpg/revision/latest?cb=20170730223317');background-size:100%;margin:auto;center;border:0px solid #ddcccc;border-top-right-radius:50px;border-bottom-left-radius:50px; position: relative; margin-left: 360px][/div] [div=width:300px;height:300px;margin:auto;center;background:white;][tabs][tab=hello][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One][side=right]× name × age × gender × birthday × horoscope × sexuality[/side] × h i s t o r y × . . . . × p e r s o n a × . . . .[/font][/div][/div][/div][/tab][div=height:300px;margin:auto;center;][/div][/tabs][div=height:300px;margin:auto;center;][/div][tabs][tab=hello][/tab][/tabs][/div][tabs][tab=hello][/div][/tab][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][tab=h3llo][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]I can see it in your eyes All the years that passed us by Just say You remember all the times All the memories we hide Away So now you're here with me She's waiting patiently But what you say Tell me I'm not crazy That you feel the same Oh, don't you walk away How can I make you stay? Tell me you've been waiting That I'm not too late I never walked away How can I make you stay?[/font][/div][/div][/div][/tab][tab=hell0][div=height:300px;margin:auto;center;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]Tell me what I gotta do Show me what I gotta lose For you Did I speak too soon? How can I make you chose? Your move So now you're here with me She's waiting patiently But what you say Tell me I'm not crazy That you feel the same Oh, don't you walk away How can I make you stay? Tell me you've been waiting That I'm not too late I never walked away How can I make you stay?[/font][/div][/div][/div][/tab][/div][/div][/div][/tabs][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][div=height:300px;margin:auto;center;][/div][div=height:0px;][div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][font=Cinzel][size=15px][color=black][color=transparent]////\\[/color]one[color=transparent]///\\/[/color]two[color=transparent]////\\/[/color]three[/color][/size][/font][/div][/div][/div][/div][/div]
so... i messed up a code v badly and i don't know where to start fixing it t b h
it's ninety hours passed my bedtime too oops
[div=width:100px;height:100px;background:url('https://vignette.wikia.nocookie.net/monstax/images/f/ff/Hyungwon-Newton02.jpg/revision/latest?cb=20170730223317');background-size:100%;margin:auto;center;border:0px solid #ddcccc;border-top-right-radius:50px;border-bottom-left-radius:50px; position: relative; margin-left: 360px][/div]
[div=width:300px;height:300px;margin:auto;center;background:white;][tabs][tab=hello][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One][side=right]× name
× age
× gender
× birthday
× horoscope
× sexuality[/side]
× h i s t o r y ×
.
.
.
.
× p e r s o n a ×
.
.
.
.[/font][/div][/div][/tab][tab=h3llo][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]I can see it in your eyes
All the years that passed us by
Just say
You remember all the times
All the memories we hide
Away
So now you're here with me
She's waiting patiently
But what you say
Tell me I'm not crazy
That you feel the same
Oh, don't you walk away
How can I make you stay?
Tell me you've been waiting
That I'm not too late
I never walked away
How can I make you stay?[/font][/div][/div][/tab][tab=hell0][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Poiret One]Tell me what I gotta do
Show me what I gotta lose
For you
Did I speak too soon?
How can I make you chose?
Your move
So now you're here with me
She's waiting patiently
But what you say
Tell me I'm not crazy
That you feel the same
Oh, don't you walk away
How can I make you stay?
Tell me you've been waiting
That I'm not too late
I never walked away
How can I make you stay?[/font][/div][/div][/tab][/tabs][div=height:50px;background:white;position:relative;margin:auto;top:-300px;width:300px;pointer-events:none;][font=Cinzel][size=15px][color=black][color=transparent]////\\[/color]one[color=transparent]///\\/[/color]two[color=transparent]////\\/[/color]three[/color][/size][/font][/div][/div]
[CENTER][SIZE=7][COLOR=#ff99cc][B][U]Draga Senade[/U][/B][/COLOR][/SIZE]
[/CENTER]
[bg= #00bfff]
[border=10px double #000000]
[bg= white]
[COLOR=#00e600][/COLOR]
[CENTER][COLOR=#00e600][ATTACH=full]387688[/ATTACH]
Appearance (Description)
Draga is a pale girl with long blond hair down to her lower back and faint blue eyes. While she is very short for her age, she does have a rather fit body, perhaps the result of all the stunts she pulled to get where she wasn't supposed to be, climbing trees, sneaking through holes, trying to keep up with people jogging who were several times her size... She is a fan of vivid and high-constrast colors, wearing a long green skirt in addition to the buttoned shirt one sees in the picture and hat one sees in the picture. However, she doesn't like letting go of things easily, so she has very rugged shoes and keeps a stuffed animal hidden in her backpack, which she usually carries with her even if she doesn't have classes on that day.
Personality
Draga is a passionate girl with an unexpecteted degree of maturity for her age. While she is outgoing, meddling and generally a shameless extrovert, she is polite and and genuily cautious and with awareness that others have their neeeds as well. However, she can easily slip into a more childish mindset when excited, as she is not just cheerful by nature, but very excitable. Offer a three scoops ice cream to watch taking it from your hand and devouring it without a thought of thank you until she is finished. Of course, with her pride and stubborness she would never admit to these slips, even though she is more than willing to suffer some humiliation in persuit of her goals. In fact, there is very little she wouldn't do for her goals, as she is hard-working, loyal and dedicated, for anything she is passionate about. She has the mental fortitude to back it up too, given her natural curiosity and intelligence. She sometimes uses these in more nefarious manners, being cunning and manipulative, and not afraid to use her childish "charms" to sneak out of responsability or get a favor from someone by putting on an act of cuteness that those who really know her would know it's far from her real self. On the other hand, the same insightfulness that propels her cunning plans can also be used for good, occasionally catching some detail that the more dismissive eyes of an adult might miss.
She may be guillable but she may be far from naive. She trusts others with enough ease to accept what they tell her as truth, unless it irectly contradicts what she came in expecting, but when approaching a problem on her own or leading the charge in some, she is beyond the idea that things will necessarily always go her way. Nonetheless she perceveires in her goals, always seeking out her passions and trying to learn from her mistakes and from the example of those she admires... even if she often learns the completely wrong lesson from said example.
Relationships
[person]- Draga is a not so secret admirer of this person and worked her way into assimilating into their group of friends, despite innitially "stalking" this person
[USER=46068]@Damafaud[/USER] Dinara Senade- Her beloved older sister, who can sometimes be a meanie-head, but Draga wouldn't give up for anything in the world
[/CENTER]
[/COLOR]
[/bg]
[/border]
[/bg][/person][/COLOR][/CENTER]
[/bg][/border][/bg]
Done, it seems like it was fixed, thanks! I had no idea it would do something like that...
Yeah, the person tag is only supposed to be used within the mail tag; Tutorial - RpNation - BBcode GuideDone, it seems like it was fixed, thanks! I had no idea it would do something like that...