Welcome to Gaia! ::

Profilist Tools

Back to Guilds

Profile dumpage 

Tags: profile, coding, guide, media, free 

Reply [CSS] Guides and Resources
[Mini Guide] Tabbed Layouts Goto Page: [] [<] 1 2

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

AlkalineGhost

Dedicated Lover

5,400 Points
  • Tycoon 200
  • Money Never Sleeps 200
  • Wall Street 200
PostPosted: Fri Mar 20, 2015 10:41 pm


Lady Saxophone
AlkalineGhost
im not sure what you mean XD
does it have to do with the display:block?
or
:disabled
idk im throwing stones here XD
Well, keyword here is "break" = w =
It's something any good coder would never do because it isn't proper syntax...
But what happens when you forget to close your brackets or leave an open note line...?


exactly what is happening now stuff breaks. XD hahaha
I never would have thought of it omg.
PostPosted: Fri Mar 20, 2015 10:44 pm


AlkalineGhost
exactly what is happening now stuff breaks. XD hahaha
I never would have thought of it omg.
Yup 8'D
Just don't become too abusive with your header -- moving it around too much or removing it can still get you in trouble.
(Like I said, I have this reported (#6) so don't be surprised if this eventually doesn't work anymore)


Lady Saxophone

Vice Captain

Saxy Coder


AlkalineGhost

Dedicated Lover

5,400 Points
  • Tycoon 200
  • Money Never Sleeps 200
  • Wall Street 200
PostPosted: Fri Mar 20, 2015 10:49 pm


Lady Saxophone
AlkalineGhost
exactly what is happening now stuff breaks. XD hahaha
I never would have thought of it omg.
Yup 8'D
Just don't become too abusive with your header -- moving it around too much or removing it can still get you in trouble.
(Like I said, I have this reported (#6) so don't be surprised if this eventually doesn't work anymore)

yeah I read all about the limitations when coding the header. I kinda wanted to try the whole splitting it thing to learn.
It would be nice if they fixed it (thus no more weird code! O.o) but allowed us to get the look some other way. :3
thanks a lot! i learn a lot from your guides and staring at your code. All your profiles are so purdy XD.
PostPosted: Thu Apr 23, 2015 7:10 pm


      hi there surprised
      I have a question, so version 4 has fixed headers, but when you hover over them panels slide out and back in when you hover over something else?

Oobster



Lady Saxophone

Vice Captain

Saxy Coder

PostPosted: Thu Apr 23, 2015 7:17 pm


Oobster
      hi there surprised
      I have a question, so version 4 has fixed headers, but when you hover over them panels slide out and back in when you hover over something else?
I guess I need a gif to explain better X'D But no, you still hover over the headers.
Method 3 & 4 are very similar both visually and through coding. 3 can get a bit more complicated though coding-wise if you have borders and other things which need to be repressed in the regular state.
If you want a "live" comparison, this layout uses method #3 on the left side, while this profile uses method #4 on the right side. The difference might be hard to spot, but you can see how the panels expand with method #3, while they just slide out with #4. Chrome also has z-indexing problems so that the panels overlay some of the tabs with method #4.
PostPosted: Thu Apr 23, 2015 7:32 pm


Lady Saxophone
Oobster
      hi there surprised
      I have a question, so version 4 has fixed headers, but when you hover over them panels slide out and back in when you hover over something else?
I guess I need a gif to explain better X'D But no, you still hover over the headers.
Method 3 & 4 are very similar both visually and through coding. 3 can get a bit more complicated though coding-wise if you have borders and other things which need to be repressed in the regular state.
If you want a "live" comparison, this layout uses method #3 on the left side, while this profile uses method #4 on the right side. The difference might be hard to spot, but you can see how the panels expand with method #3, while they just slide out with #4. Chrome also has z-indexing problems so that the panels overlay some of the tabs with method #4.

      ooooohhh i see!
      yeah, method 3 and 4 are very similar :0 it was pretty hard to tell the difference lol
      the profile with method 4 is kind of awkward, because when you hover over biography, the sliding panel kind of blocks the other headers :0, or is it supposed to be like that? o-o

      so, it is possible to have just a panel with headers on top and when you hover over them, them, they expand? oh man, i'm very bad at trying to explain what I'm trying to say @A@
      ARGH SO SORRY FOR CRAPPY DRAWING
      User Image - Blocked by "Display Image" Settings. Click to show.

Oobster



Lady Saxophone

Vice Captain

Saxy Coder

PostPosted: Thu Apr 23, 2015 7:39 pm


Oobster
      ooooohhh i see!
      yeah, method 3 and 4 are very similar :0 it was pretty hard to tell the difference lol
      the profile with method 4 is kind of awkward, because when you hover over biography, the sliding panel kind of blocks the other headers :0, or is it supposed to be like that? o-o

      so, it is possible to have just a panel with headers on top and when you hover over them, them, they expand? oh man, i'm very bad at trying to explain what I'm trying to say @A@
      ARGH SO SORRY FOR CRAPPY DRAWING
      User Image - Blocked by "Display Image" Settings. Click to show.
When you hover over the panel headers, they expand? o3o Or the panels themselves expand?
Both are possible -- if you want the headers to expand, then just adjust the height/width of that upon hovering.
The panels expanding are already explained on the first page XD
PostPosted: Thu Apr 23, 2015 7:47 pm


Lady Saxophone
When you hover over the panel headers, they expand? o3o Or the panels themselves expand?
Both are possible -- if you want the headers to expand, then just adjust the height/width of that upon hovering.
The panels expanding are already explained on the first page XD

      LOL, i meant the panels expand woops
      also yeah I kinda got it, thank you very much for answering my questions!
      I just have to redo my whole code because it's so poopy and messy @_@ and everything is so confusing lol

Oobster



Fredy-san


Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
PostPosted: Fri Jul 24, 2015 6:33 am


Lady Saxophone
Skye Antaeliel
User Image
is it possible to set a tabbed section to stay out while you scroll the window down? i'm thinking something along the lines of setting the section itself to stay open when you hover over it or set the header tab to keep the section open if you click the header?
"Click" effects are not possible with CSS. You can mimic them by abusing spoiler buttons, but I don't really support that so I am not too familiar with how to do that :c You can make the tabs follow you as you scroll down the page though... just set the panel headers to "fixed" positioning and the panels themselves as well. As far as staying open, if you manipulate things right, you might be able to... (like when you are hovering over #main, set your #about height/width to something). Not too sure if that's what you are after?

darn it, you just reminded me that I need to add the finishing touches on this guide

5 months later.... click effect is now possible using CSS only... almost persistent one too
PostPosted: Fri Jul 24, 2015 6:41 am


Fredy-san
5 months later.... click effect is now possible using CSS only... almost persistent one too
lol ikr X'D
Maybe I should look into adding persistent tabs as well...
Bah, I need to update this.


Lady Saxophone

Vice Captain

Saxy Coder


LatinBsnDude

Savvy Cub

PostPosted: Fri Aug 21, 2015 1:43 pm


Lady Saxophone
AlkalineGhost
Hello!
I've been trying to split the header bar like in your profile, but I can't manage to get the right section to align to the right.
Do you have any tips on how to do that?
Ah, that's actually abusing a "glitch" on the profiles = w = ;;
(I have it reported so it might be eventually fixed, but yeah, I'm abusing it myself in the meantime)

You have to disable the header CSS at the bottom of your Theme Override.
So do you know what to do in order to break/disable any lines of code under a certain line...? c;

I totally read this about 2 months ago when I was brand-new-for-the-second-time to CSS. It's funny that I didn't understand it until I needed it yesterday. haha
PostPosted: Sun Feb 23, 2020 7:13 pm


boop


Lady Saxophone

Vice Captain

Saxy Coder



Lady Saxophone

Vice Captain

Saxy Coder

PostPosted: Sun Feb 23, 2020 7:13 pm


wahmbulance
PostPosted: Sun Feb 23, 2020 7:14 pm


emo


Lady Saxophone

Vice Captain

Saxy Coder

Reply
[CSS] Guides and Resources

Goto Page: [] [<] 1 2
 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum