Subeta - User profile positioning help

Replies

Feb 12, 2018 8 years ago

is always in the spotlight

On my user profile, I'm struggling to position my comments box. I've tried putting it in it's own column (column3) but then the only positioning I can do is "absolute" which messes up the whole page (it creates extra white space on the bottom and sometimes it makes it so the pet buttons aren't clickable). Right now I have it in column2, which is positioned "relative" and I'd like it to just be in line with the pet links which are also in column2. Any idea how to get it there? Full disclosure, I have no idea what I'm doing so I apologize if the code is a mess!

SPOILER (click to toggle)



Faber

I'm Faber.

I like tattoos and sailing and poetry.

Currently working on:

- Pet Profiles (0/3)

- User Profile (0/1)

- Nightmare Potion for Shadey (11/20m)


Please say hi!







<style>
body, html {
background-color: ;
}

.comment_table,.header,.block,.info_block {background-color:transparent;background-image: none; border:0px;}

 {
color:;
font-size: 15px;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
background-color: ;
background-image: url(https://i.imgur.com/bbf0mEo.jpg);
background-repeat: no-repeat;
background-position: top left;
position: relative;
top: 0px;
left: 0px;
height: 400px;
width: auto;
border: 0px;}

 a{
color:;
}

 {
position: absolute;
left: 0px;
top: 50px;
}

.name {
color:;
font-size: 85px;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -5px;
background-color: transparent;
background-image: none;
border:0px;
}

.about {
position: relative;
padding-left: 15px;
width: 300px;
height: 300px;
font-size: 12px;
color: ;
}

 {
position: relative;
top: 350px;
left: -20px;
display: inline-block;
width: 1250px;
}

 a{
margin-right: 20px;
opacity: 1;
transition: .5s ease;
}

 a:hover {
opacity: 0.5;
}

.textbox {
width: 300px !important;
height: 250px !important;
background: ;
background-image: url(https://i.imgur.com/mLOOvKS.jpg);
color:  !important;
border: 0px;
display:inherit;
}

, input {
width: 300px !important;
height: 50px;
background: ;
font-size: 9px;
color: ;
border: 0px;
}

</style>

* chibi by [user=Recondite ] * visit my profile shop

Feb 13, 2018 8 years ago

is lost in space

Have you tried putting it in the same column as the pet buttons and then positioning it? It's more difficult to position it if it's in a different column altogether. And if I look at your user profile's source code, I see that it's in a different column?

❤ Try out my mobile-friendly Modernised CustomCSS theme ❤

Feb 13, 2018 8 years ago

is always in the spotlight

I thought I had, the buttons I've coded like they're , which is where the comments box seems to be, but I don't know if because the profile section is still in column 1 if that makes everything column1 that's not a preset section? If that makes sense? Like I said, I don't know what I'm doing! But this is what the edit screen looks like with no code in the profile:

SPOILER (click to toggle)

* chibi by [user=Recondite ] * visit my profile shop

Feb 13, 2018 8 years ago

is lost in space

You need to put the comment box in the same column in the profile editor. Using the same name, sadly enough, does not ensure that it works the same way. Also, you should avoid using , or ; because those are ID's and supposed to be unique on the page and because Subeta already uses those. This might cause weird results. To be on the safe side, never use the same ID's or classnames as Subeta does, unless you actually want something to look the same way as the original element does.

(I hope that made sense xD)

But to recap, if you put your comment box in the same column as the rest (in your profile editor) and change the names from column1 etc to something else (like col1), then you should be fine :)

❤ Try out my mobile-friendly Modernised CustomCSS theme ❤

Feb 13, 2018 8 years ago

is always in the spotlight

That makes sense! I went ahead and changed the ID names for the other things I was positioning, and moved the comment box to column1 under the profile editor. I can make the pet links line up horizontally the way I want with display inline-block, and setting a width wide enough for them, but the comment box still stays stubbornly underneath. Any ideas how to get it in line horizontally with the pet links?

SPOILER (click to toggle)


Faber

I'm Faber.

I like tattoos and sailing and poetry.

Currently working on:

- Pet Profiles (0/3)

- User Profile (0/1)

- Nightmare Potion for Shadey (12/20m)


Please say hi!







<style>
body, html {
background-color: ;
}

.comment_table,.header,.block,.info_block {background-color:transparent;background-image: none; border:0px;}

 {
color:;
font-size: 15px;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
background-color: ;
background-image: url(https://i.imgur.com/bbf0mEo.jpg);
background-repeat: no-repeat;
background-position: top left;
position: relative;
top: 0px;
left: 0px;
height: 400px;
width: auto;
border: 0px;}

 a{
color:;
}

 {
position: absolute;
left: 0px;
top: 50px;
}

.name {
color:;
font-size: 85px;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -5px;
background-color: transparent;
background-image: none;
border:0px;
}

.about {
position: relative;
padding-left: 15px;
width: 300px;
height: 300px;
font-size: 12px;
color: ;
}

 {
position: relative;
top: 0px;
left: -20px;
display: inline-block;
width: 1250px;
height: 300px;
}

 a{
margin-right: 20px;
opacity: 1;
transition: .5s ease;
}

 a:hover {
opacity: 0.5;
}

.textbox {
width: 300px !important;
height: 250px !important;
background: ;
background-image: url(https://i.imgur.com/mLOOvKS.jpg);
color:  !important;
border: 0px;
display:inherit;
}

, input {
width: 300px !important;
height: 50px;
background: ;
font-size: 9px;
color: ;
border: 0px;
}

</style>

* chibi by [user=Recondite ] * visit my profile shop

Feb 13, 2018 8 years ago

is lost in space

Try this .div_float:first-child { width: 100%; } .div_float:nth-child(n+2) { display: none; }


 { width: 100%; }
 .block { float: left; margin: 0; }
 .block:nth-child(2):after { content: ''; display: table; clear: both; }

.block:nth-child(1) { margin-left: -20px; } { width: 960px; left: 0; }The divs are each contained within a .div_float container, to make them 33% wide and to float them next to one another. Explanation of my code:

The first block of code is for making your first column's container full-width and for hiding the other two columns' containers.
The second block is for making the actual column full-width as well and to float the different blocks next to one another (the line with the :after part is to clear the floats after your second element, in case you want to add more elements but that don't need to be on the same line)
The last block of code is to reposition a few things. You gave a negative position, probably for spacing, but since the position was set to relative that means that you'll have a wide gap between the pets + comment if you leave it in.

Hope that helps!

❤ Try out my mobile-friendly Modernised CustomCSS theme ❤

Feb 13, 2018 8 years ago

is always in the spotlight

You're amazing! Thank you so much for taking the time to fix it and for your explanation, that helps me understand a lot more! I really am trying to learn; I'm amazed at all you do :)

* chibi by [user=Recondite ] * visit my profile shop

Feb 13, 2018 8 years ago

is lost in space

You're quite welcome and thank you for the nice words :) Just remember that practice makes perfect, I've been at this for more than 10 years now, lol xD

❤ Try out my mobile-friendly Modernised CustomCSS theme ❤

Logged Out

User profile positioning help - solved, thank you!

Replies