Help New Issue: Moving Tabs?

[Kio.exe]

Hello lovely coders!! I have one teeeeensy little problem. I’ve been coding, two seperate codes, and I’ve had the same issue with both of them. I finished the code, but when I post it, under the code there’s a whole big chunk of empty space. Could someone tell me how to fix this?

 [border=transparent; background: transparent; text-align: center; position: relative; left: 230px;][size=8][font=Architects Daughter][color=white] ☽ CHARACTER NAME ☾[/border]

[border=transparent; background: url(https://i.pinimg.com/236x/90/c6/fd/90c6fd8a9a615df07c165b69b4e8b19e.jpg); height: 500px; width: 800px; margin: auto; position: relative; top: -100px; z-index: 1;][/border]

[border=transparent; background: #34084a; height: 300px; width: 700px; margin: auto; position: relative; top: -520px; z-index: 2;][border=transparent; text-align: justify; overflow-y: scroll; overflow-x: hidden; height: 300px; width: 690px;][size=3][font=Cormorant Garamond]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. At erat pellentesque adipiscing commodo elit at imperdiet. Ornare arcu odio ut sem nulla pharetra diam sit. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Id faucibus nisl tincidunt eget nullam non nisi est sit. Viverra adipiscing at in tellus. Ac turpis egestas integer eget aliquet nibh praesent tristique. Aliquam sem et tortor consequat id porta nibh venenatis. Neque gravida in fermentum et sollicitudin. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Est sit amet facilisis magna etiam tempor orci. Sed egestas egestas fringilla phasellus.

Nisi lacus sed viverra tellus in hac habitasse. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Mollis aliquam ut porttitor leo a. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Fermentum iaculis eu non diam phasellus vestibulum lorem. Eros in cursus turpis massa tincidunt dui ut ornare. Neque volutpat ac tincidunt vitae semper. Lorem donec massa sapien faucibus et molestie ac. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Luctus accumsan tortor posuere ac ut. At imperdiet dui accumsan sit amet nulla facilisi morbi. Aliquam eleifend mi in nulla posuere sollicitudin. Amet dictum sit amet justo donec. Enim sed faucibus turpis in. Nunc vel risus commodo viverra. Elementum nibh tellus molestie nunc. Urna et pharetra pharetra massa massa. Et ultrices neque ornare aenean euismod elementum nisi. Feugiat vivamus at augue eget arcu dictum varius.

Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Consectetur adipiscing elit duis tristique sollicitudin nibh. Sed turpis tincidunt id aliquet. Nisi vitae suscipit tellus mauris a diam. Molestie at elementum eu facilisis sed odio morbi. Sodales neque sodales ut etiam sit amet nisl. Lacinia at quis risus sed vulputate odio. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Odio tempor orci dapibus ultrices in iaculis. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Aliquam purus sit amet luctus.

Nulla porttitor massa id neque aliquam vestibulum. Odio aenean sed adipiscing diam. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor pretium viverra suspendisse potenti nullam. Vitae suscipit tellus mauris a diam maecenas sed. Leo a diam sollicitudin tempor id. In est ante in nibh mauris cursus mattis. Egestas sed tempus urna et pharetra. Quis hendrerit dolor magna eget. Ut etiam sit amet nisl purus in mollis.

A pellentesque sit amet porttitor eget dolor morbi non. Cursus sit amet dictum sit amet justo donec enim diam. Arcu cursus vitae congue mauris rhoncus aenean. Lacus vel facilisis volutpat est velit egestas dui. Tempus iaculis urna id volutpat lacus laoreet. Sit amet est placerat in egestas erat imperdiet sed. Ornare arcu odio ut sem. Arcu cursus vitae congue mauris rhoncus aenean. Urna nunc id cursus metus aliquam eleifend mi in. Pellentesque nec nam aliquam sem et. Quisque id diam vel quam elementum pulvinar etiam.[/border]

[border=transparent; background: url(https://i.pinimg.com/originals/ad/35/08/ad35088db804de51c078545572acd299.gif); height: 150px; width: 150px; position: relative; top: -605px; background-size: 100%][border=transparent; text-align: center; height: 120px; width: 150px; overflow-y: scroll; overflow-x: hidden; background: transparent; position: relative; top: 30px;][size=5]




[b]Mood:[/b][i] here[/i]

[/border][border=transparent; background: url(https://i.pinimg.com/originals/30/df/50/30df506853d965a2602f5ae12bfcda6e.gif); height: 150px; width: 150px; position: relative; top: -150px; left: 170px; background-size: 160%][border=transparent; text-align: center; height: 120px; width: 150px; overflow-y: scroll; overflow-x: hidden; background: transparent; position: relative; top: 30px;][size=5]




[b]Location:[/b][i] here[/i]

[/border][/border][border=transparent; background: url(https://i.pinimg.com/originals/5f/ae/a5/5faea51ae8fc77e8ff03f83a4705a692.gif); height: 150px; width: 150px; position: relative; top: -320px; left: 350px; background-size: 160%][border=transparent; text-align: center; height: 120px; width: 150px; overflow-y: scroll; overflow-x: hidden; background: transparent; position: relative; top: 30px;][size=5]




[b]Outfit:[/b][i] here[/i]

[/border][/border][border=transparent; background: url(https://i.pinimg.com/originals/bd/15/b7/bd15b7924ad28a73b2a23ae5d2e73b7a.gif); height: 150px; width: 150px; position: relative; top: -490px; left: 540px; background-size: 140%][border=transparent; text-align: center; height: 120px; width: 150px; overflow-y: scroll; overflow-x: hidden; background: transparent; position: relative; top: 30px;][size=5]




[b]Tags:[/b][i] here[/i]

[/border][/border][/border][/border]

 

[Alteras]

So the problem is due to negative positioning. negative top values with position: relative moves the div, but doesn't affect the space it once took up. I reccommend using negative margin-top instead, and nest your tags, so you don't have to do a lot of calculations.

 

[Arkangel]

In case you haven't figured it out yet despite Alteras' explanation, I'll simplify it in simple terms.

top: -520px

This is primarily the issue. I would usually not recommend [top / bottom / left / right: value] properties with [position: relative], because it does not remove the space it took up prior to the movement of the div. The former property is commonly best for [position: absolute].

For a simple fix, I'd recommend using [margin / margin-top / margin-bottom: value] properties. However, it'd be easier to simply have the entire code under one or two parent div/border to avoid having to rely on margin/padding/other positioning properties, to lessen the problem(s) you may come across in the future.

 

[Kio.exe]

Hey y’all!! I’m back with another question, this time for a new code!! I would like to know how to move and resize tabs, if at all possible!! I have a code where the tab cover is in the middle of the page, but I’m not sure how to move the tab itself so that the banner is clickable, where I want it!!

 

[Chordling]

Hey y’all!! I’m back with another question, this time for a new code!! I would like to know how to move and resize tabs, if at all possible!! I have a code where the tab cover is in the middle of the page, but I’m not sure how to move the tab itself so that the banner is clickable, where I want it!!

Perhaps you are thinking of an accordion? It is similar to a tab where it contains content within a separated section but it requires you to click it “open” instead of changing a tab like you would on an internet browser.

 

[Kio.exe]

Perhaps you are thinking of an accordion? It is similar to a tab where it contains content within a separated section but it requires you to click it “open” instead of changing a tab like you would on an internet browser.

I tried accordians, and they don’t have the same aesthetic appeal!! I mean tabs— take this code by the wonderful uxie, for example

Closed - code machine go 𝙗𝙧𝙧𝙧𝙧 (by uxie)

good morning ----side bar---- uxie's code machine go brrrrr current status: ---open!---- you may ask for a code Respectfully. ---in progress!---- i'm currently working w/...

www.rpnation.com

or

Closed - code machine go 𝙗𝙧𝙧𝙧𝙧 (by uxie)

good morning ----side bar---- uxie's code machine go brrrrr current status: ---open!---- you may ask for a code Respectfully. ---in progress!---- i'm currently working w/...

www.rpnation.com

 

[Uxie]

Hey y’all!! I’m back with another question, this time for a new code!! I would like to know how to move and resize tabs, if at all possible!! I have a code where the tab cover is in the middle of the page, but I’m not sure how to move the tab itself so that the banner is clickable, where I want it!!

would you be able to give a more specific example of what you want? i'm a little confused by your initial request. sending the code you have currently would be helpful as well! ( ´ ω ` )

 

[Kio.exe]

would you be able to give a more specific example of what you want? i'm a little confused by your initial request. sending the code you have currently would be helpful as well! ( ´ ω ` )

yep!! So I’m making an in character/character sheet code, and I want the word “peachy” to be the tab banner, so that when I click it it goes to my text area. Is that at all possible?

 [tabs]
[tab=xx][border=transparent; background: #f0a278; overflow-x: hidden; overflow-y: scroll; height: 500px; width: 500px; margin: auto; text-align: justify; display: flex; z-index: 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut lectus arcu bibendum at varius vel pharetra vel turpis. In cursus turpis massa tincidunt. Dui faucibus in ornare quam viverra orci sagittis eu volutpat. Eu scelerisque felis imperdiet proin fermentum. Cursus sit amet dictum sit. Feugiat nibh sed pulvinar proin gravida hendrerit. Dictum sit amet justo donec enim diam vulputate ut pharetra. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Est velit egestas dui id ornare arcu. Enim diam vulputate ut pharetra. Lacinia quis vel eros donec ac odio tempor orci. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Morbi tristique senectus et netus et malesuada fames ac turpis. Amet venenatis urna cursus eget nunc scelerisque. Cursus sit amet dictum sit amet. Ac ut consequat semper viverra nam. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nunc pulvinar sapien et ligula ullamcorper malesuada.

Sed id semper risus in hendrerit gravida rutrum. Rhoncus mattis rhoncus urna neque. Sem fringilla ut morbi tincidunt augue. Ac turpis egestas maecenas pharetra convallis posuere. Risus quis varius quam quisque id diam vel. Eu sem integer vitae justo eget magna. Nunc mattis enim ut tellus elementum sagittis. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet est placerat in egestas. Lectus magna fringilla urna porttitor rhoncus dolor. Sed elementum tempus egestas sed sed risus. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc.[/code

Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Orci nulla pellentesque dignissim enim sit. Habitant morbi tristique senectus et netus et. Eu turpis egestas pretium aenean pharetra magna ac. Ipsum dolor sit amet consectetur adipiscing elit duis. Vitae tempus quam pellentesque nec nam aliquam. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Est velit egestas dui id ornare arcu. Aliquam purus sit amet luctus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et.

Dui accumsan sit amet nulla facilisi morbi tempus. Turpis cursus in hac habitasse platea. Amet dictum sit amet justo. Consequat id porta nibh venenatis cras sed felis eget velit. Id interdum velit laoreet id donec ultrices. Convallis convallis tellus id interdum velit laoreet id. Nunc eget lorem dolor sed viverra ipsum. Quis enim lobortis scelerisque fermentum. Scelerisque in dictum non consectetur a. Auctor neque vitae tempus quam. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Id velit ut tortor pretium. Ut etiam sit amet nisl purus. Urna neque viverra justo nec ultrices dui.

Sit amet venenatis urna cursus eget. At varius vel pharetra vel. Malesuada bibendum arcu vitae elementum. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Hac habitasse platea dictumst quisque sagittis purus. Urna condimentum mattis pellentesque id nibh. Vitae proin sagittis nisl rhoncus. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Nascetur ridiculus mus mauris vitae ultricies leo integer. Integer enim neque volutpat ac. [/border]

[border=transparent; display: flex; margin: auto; height: 500px; width: 500px; background: #f0a278; margin-top: -600px; z-index: 2;][border=transparent; background: url(https://www.maxpixel.net/static/photo/1x/Orange-Peach-Fruit-5176558.png); background-size: 100%; height: 270px; width: 200px; margin: auto; margin-top: -10px; z-index: 2;][border=transparent; margin: auto; text-align: left; margin-top: 275px; font-size: 70px; width: 300px; margin-left: -30px; z-index: 2; pointer-events: none;][font=Finger Paint][color=#FFE658]peachy[/border][/border][/border]

 

[Uxie]

looking at the code you have currently, would either of these two codes be closer to what you're looking for: here and here let me know if it isn't though, it's just a little hard to figure out what you mean exactly with what's given currently. (ノ_<。)

if yes, the method in which i centered the tabs for these made use of flexboxes and their properties, though you may do the same with margin. i wrap all of my tabs in an overflow:hidden container and add a position:absolute property to my content so that it'll ignore the former (and thus be visible). as a baseline, even without overflow:hidden; any content with position:absolute within the tabs will be able to ignore it's original position (which is underneath the button)

i'll create a mini example for you to see what i mean!

• xxxx

• the actual tab contents

Spoiler: code

[border=transparent; height:220px; width:220px; padding:0; border:1px solid red; 
/*set a boundary for your position:absolute element*/ position:relative; line-height:0;]
   [comment]----tabs container----[/comment]
   [border=transparent; height:25px; width:100px; padding:0;
/*overflow:hidden so only the button is visible. looks cleaner esp if your content won't be under the line*/ overflow:hidden;
/*moving the tab button with margin*/ margin:120px auto 0 auto;][tabs]
      [tab=xxxx][border=transparent; height:80px; width:80px; padding:10px; box-sizing:border-box; background:blue; color:#000; position:absolute; line-height:15px; font-size:15px;
/*you need these to ensure your code looks fine across devices/browsers*/ top:0; left:0; 
/*add a z-index value above your tabs cover so your content won't be covered*/ z-index:2;]the actual tab contents[/border][/tab]
   [/tabs][/border]
[/border]

feel free to mess around with this, and if you have any other questions, let me know!