Welcome to Gaia! ::

Hi-
I'd like to use hexcodes to color the text in the panel headers, which means I have to add it from the CSS editing section. Is there a code like
#id_about .h2{content: About Me}

Like content, text, etc.?

Also, I need help positioning. I have an image that takes up about half the screen, and I would like for the panels to all be on the other half. The About taking up around 1/4 (the top right), and Comments and Details each taking up about 1/8, directly below the about.
The About panel is currently where I want it to be, the comments is in the right place but cut off, and I want the details next to the comments.

Link to my profile here.

I copy and pasted some code from a couple guides, but it just made my panels collapse. Since now of them really explained how positioning works, I couldn't adapt the code.
#column_1{width: 260px;} /*Column 1 width*/
#column_2{width: 500px;} /*Column 2 width*/
#column_3{width: 200px;} /*Column 3 width*/
#id_about{height: 160px; width: 400px;} /*Sizing about*/
#id_details{height: 160px; width: 160px;} /*Sizing details*/
#id_comments{height: 160px; width: 160px;} /*Sizing comments*/
#id_about{position: absolute; top: 0px; right: 70px;} /*Placing about*/
#id_comments{position: absolute; top: 200px; right: 70px;} /*Placing comments*/

As you can see in the link, the comments get cut off.
Adding:
/*#id_details{position: absolute; top: 200px; right: 250px;} *Placing details*/

Makes everything except the very top portion of the About vanish.

I have Firefox 10.0 (I think. Firefox something, anyway), Windows XP, and a v2 profile.
Knight Yoshi's avatar
  • 300
  • 200
Skye Reisato
Hi-
I'd like to use hexcodes to color the text in the panel headers, which means I have to add it from the CSS editing section. Is there a code like
#id_about .h2{content: About Me}

Like content, text, etc.?

Also, I need help positioning. I have an image that takes up about half the screen, and I would like for the panels to all be on the other half. The About taking up around 1/4 (the top right), and Comments and Details each taking up about 1/8, directly below the about.
The About panel is currently where I want it to be, the comments is in the right place but cut off, and I want the details next to the comments.

Link to my profile here.

I copy and pasted some code from a couple guides, but it just made my panels collapse. Since now of them really explained how positioning works, I couldn't adapt the code.
#column_1{width: 260px;} /*Column 1 width*/
#column_2{width: 500px;} /*Column 2 width*/
#column_3{width: 200px;} /*Column 3 width*/
#id_about{height: 160px; width: 400px;} /*Sizing about*/
#id_details{height: 160px; width: 160px;} /*Sizing details*/
#id_comments{height: 160px; width: 160px;} /*Sizing comments*/
#id_about{position: absolute; top: 0px; right: 70px;} /*Placing about*/
#id_comments{position: absolute; top: 200px; right: 70px;} /*Placing comments*/

As you can see in the link, the comments get cut off.
Adding:
/*#id_details{position: absolute; top: 200px; right: 250px;} *Placing details*/

Makes everything except the very top portion of the About vanish.

I have Firefox 10.0 (I think. Firefox something, anyway), Windows XP, and a v2 profile.


The content is being "cut off" because you're doing something bad. As I tell everyone, unless you really know what you're doing, avoid using "position: absolute". Its being cut off because the column its in has an overflow and you're trying to move it absolute beyond the dimensions of the column.
Start by removing the positioning.

Secondly, you're using #id_about .h2{content: About Me} this is highly unnecessary and will not work. Unnecessary because you have a Current profile template, you can edit the header directly in the profile. It won't work because the "content" property only works with the ":before" and ":after" pseudo.

I won't fix your code for you, just help guide you to fixing it.

If you want more about CSS properties, view my thread via the image in my signature.
Knight Yoshi

The content is being "cut off" because you're doing something bad. As I tell everyone, unless you really know what you're doing, avoid using "position: absolute". Its being cut off because the column its in has an overflow and you're trying to move it absolute beyond the dimensions of the column.
Start by removing the positioning.

Secondly, you're using #id_about .h2{content: About Me} this is highly unnecessary and will not work. Unnecessary because you have a Current profile template, you can edit the header directly in the profile. It won't work because the "content" property only works with the ":before" and ":after" pseudo.

I won't fix your code for you, just help guide you to fixing it.

If you want more about CSS properties, view my thread via the image in my signature.

I just made up the 'content,' is that actually the tag? Editing the header directly in the profile doesn't recognize hexcodes, which is what I explained I was trying to do.

I have visited your guide, and I wasn't able to find a coherent explanation of positioning. Only a list of the tags to use, not how to use them.
Knight Yoshi's avatar
  • 300
  • 200
Skye Reisato
Knight Yoshi

The content is being "cut off" because you're doing something bad. As I tell everyone, unless you really know what you're doing, avoid using "position: absolute". Its being cut off because the column its in has an overflow and you're trying to move it absolute beyond the dimensions of the column.
Start by removing the positioning.

Secondly, you're using #id_about .h2{content: About Me} this is highly unnecessary and will not work. Unnecessary because you have a Current profile template, you can edit the header directly in the profile. It won't work because the "content" property only works with the ":before" and ":after" pseudo.

I won't fix your code for you, just help guide you to fixing it.

If you want more about CSS properties, view my thread via the image in my signature.

I just made up the 'content,' is that actually the tag? Editing the header directly in the profile doesn't recognize hexcodes, which is what I explained I was trying to do.

I have visited your guide, and I wasn't able to find a coherent explanation of positioning. Only a list of the tags to use, not how to use them.


It explains in the description of absolute of how it works. Positioning an element absolute removes it from the flow of the document. Unless you know how to properly manipulate a page you should avoid this.

Quick Reply

Submit
Manage Your Items
Other Stuff
Get Items
Get Gaia Cash
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff