Replies

Feb 21, 2016 10 years ago
fluent
is crossing their fingers
User Avatar
Taasiam

hello!! so i've known a bit of html/css for a while – mainly just enough to tweak premade layouts etc. but, since there's not a lot of premade subeta layouts that i like, i decided to bite the bullet and figure out how to make one from scratch-ish. since i am super new to this and only started reading through guides on this forum last night, there's a lot i don't really know how to figure out on my own + i'm not sure if i'm putting things in the right place, so if i could get a little advice with this it'd be great.

what i've been TRYING to do on my profile is have my user info/blurb visible in the main text area, and when you click the "pet" link on the bottom, the main text area switches to a list of my pets. i was using the example in the "advanced – anchor links" section on hongske's subeta css compendium to try and accomplish this, and first assumed that the column1 id would just function as like the container div and i'd only have to stick the divs for the info and pet sections in a blank section. but i was struggling to get that to work, so i ended up making a new id for the container and added it to the blank section. that at least made it possible for me to switch between the info and pet sections like i wanted, but it made the scrolling all wonky + messed up the width and i'm not sure how to fix it, whether it's just a matter of resizing some stuff or what. i'm not even sure if i'm putting things in the right place or if there's a better way to achieve this??

here's what my code looks like right now:

Profile (CSS) <style>

  • {margin: 0; padding: 0;} {display: none;} ,.comment_table,.header,.block,.info_block,.column {background: transparent; border: none; padding: 0px;} body {background-repeat:no-repeat;}

html { background-color: ;}

body { background-color: transparent;}

body,html,div,table,td,tr,a { font-size: 10px; color: ;}

a { color: !important;}

a:hover { font-style: italic;}

.column { border: 1px solid ;}

.textbox { font-size: 10px; color: ; text-align: left; background-color: transparent; border: 1px solid ; width: 260px!important;}

.forminput { font-size: 9px; font-style: italic; text-transform: lowercase; color: ; background-color: transparent; border: 1px solid ; width:262px!important; padding: 3px;}

{ position: absolute; left: 440px; top: 120px; width: 250px; height: 313px; overflow: auto;}

{ width: 250px; height: 313px; overflow: hidden;}

, { display: block; text-align: justify; width: 250px; height: 313px; padding: 0px 5px 5px 5px; overflow-y: auto;}

{ position:absolute; left: 420px; top: 425px; width: 270px; height: 160px; padding-left: 14px; border:none;}

{ display: none;}

::-webkit-scrollbar { width: 3px;}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: ; } </style>

Blank Section (HTML)



username: cymru
name: katie
gender:
last seen: around


i've been playing subeta for a little over nine years now, but only recently returned after a long hiatus. i'm planning on re-doing most of my pets and adding a few more. i'm an avid collector and have a gallery for minions and books (until i decide on a pet to read them too) in addition to the typical collections.

pixel art by pretty-transparents

homepetsminionswishlist
list of pets

back

also, idk if there's some sort of reference list somewhere, but what are some of the selectors for the subeta content? like i knew to use .textbox and .forminput to edit the comment box because it was used in an example on the guide, and the columns too, but i'm not sure about the rest of the content (not that i use a lot of the subeta content stuff but it might be good to know??)

thanks in advance!!

looking for a pet born june 13th (2013 preferred!) buying:

Feb 21, 2016 10 years ago
Dotty
User Avatar
Pippa

Can't help so much with the anchor links, but if you use chrome you can hover over something and right click 'inspect element'. It's a useful way to find out what stuff is called :o

click for user profiles

Feb 22, 2016 10 years ago
fluent
is crossing their fingers
User Avatar
Taasiam

ahh thank you!! i'd completely forgotten about using inspect element. ^_^;

i just spent some time messing around with the device mode thing in inspect too, since it's easier using that to tweak the code than editing and submitting over and over again in edit profile. i wasn't able to come up with a solution to the anchor link issue with it, but it's definitely helpful!

looking for a pet born june 13th (2013 preferred!) buying:

Feb 27, 2016 10 years ago
Silverfish
is a survivor
User Avatar
Xingese

It appears to work perfectly, you will just have to fiddle a bit with width, padding and positioning?

Okay, so while column 1 you are putting these in is 250px wide, thanks to all the padding you added the content is wider than that and exceeds the limit. Result? Column throws a fit, bam, sideways scrolling. Basically get rid of the padding in pets/info, the column already has its own and you won't need it, make these divs narrower and taller to fit their content annd you should be okay.

{ width: 236px; height: 350px; overflow: hidden;}

, { display: block; text-align: justify; width: 236px; height: 350px; overflow-y: auto;}

Art by p-sebae ❤️
| | -Night Mode- Shengui Guo Custom CSS [v2.0]

Looking to adopt a December 31st, 1969 glitched date pet

Please log in to reply to this topic.