• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Solved: How do I change button locations?

bastion

bastion

just a little guy
Roleplay Availability
Roleplay Type(s)
Edit: Apparently when I actually post it, it's even more f'd up given all the text is outside the box, but it looks fine when I preview it?
unknown.png


I'm editing a code to have 4 tabs instead of 5 and larger buttons for the tabs, but the actual place to click does not line up with the visual. How do I fix this? The place to click seems to be in line with where the buttons were originally.

Boys in Love
  • about
    notice
    ideas
    writing
    about me
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

    Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

    Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

    Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
coded by natasha.


Here's the code:
Code: 
[comment]
[font=Archivo Black]title[/font]
[font=Montserrat]headings[/font]
[font=Karla]body[/font]
[/comment][border=none; padding: 0px;

--accent1: #45211D;
--accent2: #E4B284;
--border: 0px solid #ddd;
--color: #45211D;
--unselected: #ddd;
--credit: #555;

--title: Archivo Black;
--heading: Montserrat;
--body: Karla;

max-width: 700px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; margin: auto; color: var(--color); font-size: 12px; font-family: var(--body);][border=none; padding: 0px; background: var(--accent1); display: flex; flex-direction: row;][border=none; padding: 0px; width: 200px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 33%;][/border][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 66%; margin-top: -15px;][/border][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 99%; margin-top: -15px;][/border][/border][comment]

-----title here----[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent2); letter-spacing: 1px; font-size: 30px; text-transform: uppercase; padding: 20px; text-align: right; flex-grow: 1;]Boys in Love[/border][comment]

------end of title section-----[/comment][/border][comment]


------beginning of tab section-------[/comment][border=none; padding: 0px; background: var(--accent2); position: relative;][border=none; padding: 0px; box-sizing: border-box; border: var(--border); padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

-----left filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; background: white; height: 400px; overflow: hidden; width: 197px; flex-grow: 1;][border=none; padding: 0px; letter-spacing: 700px; line-height: 88px; margin: -28px -40px 0 -25px;][tabs][comment]



--------first tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; width: 197px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: 1px solid var(--accent1); color: var(--accent2); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 5px; width: 440px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]about me[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of first tab-----[/comment][/border][/border][/tab][comment]



--------second tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; width: 197px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: 1px solid var(--accent1); color: var(--accent2); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 5px; width: 440px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]AUs[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of second tab-----[/comment][/border][/border][/tab][comment]



--------third tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; width: 197px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: 1px solid var(--accent1); color: var(--accent2); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 5px; width: 440px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]crossovers[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of third tab-----[/comment][/border][/border][/tab][comment]



--------fourth tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 0px; width: 197px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: 1px solid var(--accent1); color: var(--accent2); margin-left: 125px; margin-top: 30px;]sample[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 5px; width: 440px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]originals[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of fourth tab-----[/comment][/border][/border][/tab][comment]


--------end of tabs-------[/comment][/tabs][/border][/border][comment]

-----right filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; background: white; height: 400px; width: 440px; flex-grow: 1;][/border][comment]

-------end of tab section------[/comment][/border][/border][comment]



------end of code / credit (don't remove!)-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; justify-content: flex-end;][border=none; padding: 0px; font-family: var(--border); color: var(--accent2); background: var(--accent1); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; width: 150px; padding: 2px; text-align: center; border-radius: 15px 0px 0px 15px; font-weight: bold;]coded by natasha.[/border][/border][/border]
 
boys in love
  • about
    notice
    ideas
    writing
    about me
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

    Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

    Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

    Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
coded by natasha.



i've gone ahead and fixed it for you; there were some issues of missing box-sizing:border-box due to some of the changes you made to the buttons that resulted in your code looking off after posting, but i'll explain only the changing locations part, since the other problems are a little less easy to understand! (￣︿￣)

shifting the buttons just requires use of line-height. increasing or decreasing line-height changes the distance between vertical buttons, since they become vertical due to linebreaks. in nat's code, adjusting line-height from 88px to 110px in the second border after ----left filler (ignore)---- made it so the buttons are now aligned!

here's the new code:
Code: 
[comment]
[font=Archivo Black]title[/font]
[font=Montserrat]headings[/font]
[font=Karla]body[/font]
[/comment][border=none; padding: 0px;

--accent1: #45211D;
--accent2: #E4B284;
--border: 0px solid #ddd;
--color: #45211D;
--unselected: #ddd;
--credit: #555;

--title: Archivo Black;
--heading: Montserrat;
--body: Karla;

max-width: 700px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; margin: auto; color: var(--color); font-size: 12px; font-family: var(--body);][border=none; padding: 0px; background: var(--accent1); display: flex; flex-direction: row;][border=none; padding: 0px; width: 200px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 33%;][/border][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 66%; margin-top: -15px;][/border][border=none; padding: 0px; height: 5px; border-radius: 0px 5px 5px 0px; background: var(--accent2); width: 99%; margin-top: -15px;][/border][/border][comment]

-----title here----[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent2); letter-spacing: 1px; font-size: 30px; text-transform: uppercase; padding: 20px; text-align: right; flex-grow: 1;]boys in love[/border][comment]

------end of title section-----[/comment][/border][comment]


------beginning of tab section-------[/comment][border=none; padding: 0px; background: var(--accent2); position: relative;][border=none; padding: 0px; box-sizing: border-box; border: var(--border); padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

-----left filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; background: white; height: 400px; overflow: hidden; width: 207px; flex-grow: 1;][border=none; padding: 0px; letter-spacing: 700px; line-height: 110px; margin: -28px -40px 0 -25px;][tabs][comment]



--------first tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; box-sizing:border-box; width: 207px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: 1px solid var(--accent1); color: var(--accent2); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 0px; width: 430px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]about me[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of first tab-----[/comment][/border][/border][/tab][comment]



--------second tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; box-sizing:border-box; width: 207px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--accent2); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 0px; width: 430px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]AUs[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of second tab-----[/comment][/border][/border][/tab][comment]



--------third tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; box-sizing:border-box; width: 207px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--accent2); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 0px; width: 430px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]crossovers[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of third tab-----[/comment][/border][/border][/tab][comment]



--------fourth tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0;  border: var(--border); opacity: 1; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment]


-------tab buttons------[/comment][border=none; padding: 5px; box-sizing:border-box; width: 207px; height: 400px; margin: 10px; background: white; display: flex; justify-content: center; flex-grow: 1;][border=none; padding: 0px;][comment]
-------button one------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 20px;]about[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 70px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(47deg); margin-left: 40px; margin-top: 30px;][/border][comment]
-------button two------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 100px; margin-top: 30px;]notice[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 80px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(-45deg); margin-top: 30px; margin-left: 30px;][/border][comment]
-------button three------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent2); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--unselected); margin-left: 5px; margin-top: 30px;]ideas[/border][comment]
----ignore-------[/comment][border=none; padding: 0px; height: 2px; width: 100px;background: var(--accent1); opacity: 0.5; position: relative; transform: rotate(43deg); margin-top: 27px; margin-left: 35px;][/border][comment]
-------button four------[/comment][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; background: var(--accent1); font-weight: bold; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-family: var(--heading); font-size: 12px; box-sizing: border-box; border: var(--border); color: var(--accent2); margin-left: 125px; margin-top: 30px;]writing[/border][comment]
------end of tab buttons----[/comment][/border][/border][comment]

 
-------main content------[/comment][border=none; padding: 0px; width: 430px; height: 400px; margin: 10px; flex-grow: 1; pointer-events: auto;][comment]

-------tab title-----[/comment][border=none; padding: 0px; height: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; font-size: 20px; font-family: var(--heading); color: var(--accent1); margin-right: 10px;]originals[/border][border=none; padding: 0px; flex-grow: 1; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 2px; background: var(--accent1); opacity: 0.5;][/border][/border][/border][comment]

-----content here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; margin-top: 15px; height: 365px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium aliquam eleifend. Aliquam in tortor bibendum, dapibus orci ac, bibendum lorem. Quisque id erat quis tellus suscipit elementum. Donec auctor rutrum elit et tempus. Sed eu commodo turpis. In vestibulum justo venenatis massa fringilla, id dapibus justo commodo. Phasellus in porta nulla. Vivamus a purus at leo dapibus dignissim et et enim. Aenean blandit ultricies leo ut iaculis. Praesent euismod magna ut ipsum euismod, quis fermentum dui congue.

Proin suscipit at justo vitae blandit. Mauris nec velit ac metus ullamcorper finibus. Aliquam a fringilla justo, sed convallis elit. Nam suscipit venenatis imperdiet. Nunc finibus at justo rutrum iaculis. Phasellus nec eros egestas, maximus elit in, auctor magna. Ut in convallis erat. Vestibulum posuere, nisl vel molestie tristique, nunc urna auctor enim, iaculis viverra tortor leo at lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras sed tincidunt orci, in dictum dolor. Aliquam porta mi nec sapien sollicitudin, lobortis aliquam lorem convallis. Maecenas nec pretium augue, et condimentum nisl. Donec vitae felis commodo, consequat enim et, aliquam ligula. Pellentesque posuere lectus at mauris lobortis tristique. Fusce sagittis varius pretium. Mauris hendrerit eu nisi sed pretium.

Etiam ullamcorper, quam et congue varius, ipsum dui posuere eros, ut porta risus ipsum id ante. In viverra risus in eleifend volutpat. Sed volutpat maximus massa, sit amet ornare lacus lobortis eget. Nam bibendum euismod orci vitae pellentesque. Nullam sit amet efficitur nisl, faucibus vestibulum metus. Vestibulum cursus, mi a rutrum fringilla, erat nisi porta ex, vitae aliquet ex mauris vitae dui. Nulla condimentum ligula et scelerisque hendrerit.

Donec euismod lacinia ante quis imperdiet. Donec velit ipsum, dignissim eget nisi ac, pellentesque semper est. Etiam tortor magna, ultrices vel nisl a, consequat vulputate turpis. Duis ut tortor arcu. Pellentesque ac egestas orci. Sed in rhoncus velit.
[/border][/border][/border][FONT=Open Sans][/FONT][/border][FONT=Open Sans][comment][/comment][/FONT][comment]


------end of fourth tab-----[/comment][/border][/border][/tab][comment]



--------end of tabs-------[/comment][/tabs][/border][/border][comment]

-----right filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; background: white; height: 400px; width: 430px; flex-grow: 1;][/border][comment]

-------end of tab section------[/comment][/border][/border][comment]



------end of code / credit (don't remove!)-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; justify-content: flex-end;][border=none; padding: 0px; font-family: var(--border); color: var(--accent2); background: var(--accent1); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; width: 150px; padding: 2px; text-align: center; border-radius: 15px 0px 0px 15px; font-weight: bold;]coded by natasha.[/border][/border][/border]

hope this helped! („• ᴗ •„)
 
Uxie said:
i've gone ahead and fixed it for you; there were some issues of missing box-sizing:border-box due to some of the changes you made to the buttons that resulted in your code looking off after posting, but i'll explain only the changing locations part, since the other problems are a little less easy to understand! (￣︿￣)

shifting the buttons just requires use of line-height. increasing or decreasing line-height changes the distance between vertical buttons, since they become vertical due to linebreaks. in nat's code, adjusting line-height from 88px to 110px in the second border after ----left filler (ignore)---- made it so the buttons are now aligned!
Click to expand...

Thank you so much! Was where I put extra padding around the tab content / text area part of the issue? I had originally intended to have empty space, but I see it's not there in the fixed version. I am still very new to using and adjusting code so I struggle to figure out where I went wrong and what causes what issues.
 
bastion said:
Thank you so much! Was where I put extra padding around the tab content / text area part of the issue? I had originally intended to have empty space, but I see it's not there in the fixed version. I am still very new to using and adjusting code so I struggle to figure out where I went wrong and what causes what issues.
Click to expand...

yes it was! i didn't notice that as i didn't do a comprehensive look through your code, only copied your main edits to the buttons onto nat's original code for convenience— if you would like to adjust padding, please add box-sizing:border-box; to the same border that you edit the padding values of as well, as padding adds on extra width, which creates issues with flexboxes, which is what was used in this code ( ´ ▿ ` )
 
Uxie said:
yes it was! i didn't notice that as i didn't do a comprehensive look through your code, only copied your main edits to the buttons onto nat's original code for convenience— if you would like to adjust padding, please add box-sizing:border-box; to the same border that you edit the padding values of as well, as padding adds on extra width, which creates issues with flexboxes, which is what was used in this code ( ´ ▿ ` )
Click to expand...

Thank you so much for all the help!
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

roxybirdie
Closed music player button [resolved]
Replies
2
Views
378
roxybirdie
roxybirdie
mizton
Help quote bubble codes?
Replies
1
Views
133
Uxie
Uxie
silverwhere
Help Easy way to edit the Scroll Bar
Replies
2
Views
170
azariel
azariel
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
60
JCKane
JCKane
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
223
The Dark Wizard
The Dark Wizard
Back
Top