It keeps messing up! | Page 1 | CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints) | Guild Forums

[ alice cullen ]

Offline

Posted: Sat Dec 09, 2006 9:45 pm

My profile is completely messed up... Everything is stretched for no apparent reason and there's a giant white block behind my avatar. The background isn't turning the colour I want it to and my headers aren't positioning!

This is my profile, so you can see how horrible it is: http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=4125826

And this is my coding...

Quote:

#extendedProfileBody #header h1
{
background: url('http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/top.jpg');
no-repeat; height: 340px; width: 720px; border-right: 0px solid; margin-left: 0px;
}

#profile H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.jpg) no-repeat top left;
color: #FFF;
text-indent: 0px;
text-align:center;
width:210px;

}

#profile
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:210px;
}

#details H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.jpg) no-repeat top left;
color: #ffffff;
text-indent: 10px;
width:210px;
}

#details
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:210px;
}

#wishlist H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.jpg) no-repeat top left;
color: #ffffff;
text-indent: 10px;
width:210px;
}

#wishlist
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:210px;
}

#about H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
width:480px;
}

#about
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:480px;
}

#friends H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
width:480px;
}

#friends
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:480px;
}

#journal H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
width:480px;
}

#journal
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:480px;
}

#signature H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
text-indent: 10px;
width:480px;
}

#signature
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:480px;
}

#comments H2{
background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
text-indent: 10px;
width:480px;
}

#comments
{
background: #FF9F09
border: 0px solid #000000;
margin-bottom: 10px;
width:480px;
}

#content #main
{
border-left: 0;
border-right: 0;
padding-left: 0px;
}

#content
{
background: #FACA58
url('http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/bg1.jpg') repeat-y;
border: none;
}

#site
{
margin-left: auto; margin-right: auto;
}

#comments .message {background-image: none; }

#comments .caption:before, #comments .caption:after, #comments .caption2:before, #comments .caption2:after {display: none; }

#extendedProfileBody #header, #content {border-right: 0; }

Any help is greatly appreciated... gonk

Posted: Sun Dec 10, 2006 6:48 pm

It's not horrible; you're just missing a few codes.

To get rid of the white behind the profile use this code:

#profile {background-color: transparent; }

To change the background use this code, replacing the underscores with your hexcode:

body {background-color: #_______; }

Ava R.
Crew

3,500 Points

50
100
200

Offline

[ alice cullen ]

Offline

Posted: Sun Dec 10, 2006 7:50 pm

Thank you!

I have 2 other problems as well though:

- My headers aren't positioning
- There's grey lines beside my friend's avatars

Posted: Tue Dec 12, 2006 5:56 am

What are the headers doing, what should they be doing, and what codes are you using to move them (if any)?

The friends line can be removed with this code:

#friends #friendGroup li {border: 0; }

Ava R.
Crew

3,500 Points

50
100
200

Offline

[ alice cullen ]

Offline

Posted: Tue Dec 12, 2006 6:31 am

That code didn't seem to work, I've still got a grey line there.

As for the headers, they're supposed to be positioned inside my sections, towards the middle I guess, but instead they're cutting off outside my background and the ones for the "About" and "Friends" sections have the second below them overlapping the very bottom of the header.

The code for all my headers in the "About" section (and area) are:

background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.gif) no-repeat top left;
color: #ffffff;
text-indent: 10px;
width:480px;
margin-bottom: 10px;
text-align:center;

And for the "Profile" section:

background: #FF9F09
url(http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/header4.jpg) no-repeat top left;
color: #FFF;
text-indent: 0px;
text-align:center;
width:210px;
margin-bottom: 10px;

Posted: Thu Dec 14, 2006 12:02 am

The only code I'm seeing in your profile is this one:

Quote:

#friends #friendGroup li img
{
background: url('http://i102.photobucket.com/albums/m109/GingerxGeri/Gaia/avback.jpg') no-repeat top right;
border: 0;
}

That's not the right one. It's for the images (the bolded bit), which is not what the lines are on. You'll have to copy and paste the code I gave you at the end of your coding.

As for the headers, there's a bit of transparent image on the left end, so it only looks like your headers are too far over. If you view the image by itself (here) and hit Ctrl + A, it will select the image and you'll see the whole image. You'll need to edit the header image in order to get it positioned correctly.

Quote:

...the ones for the "About" and "Friends" sections have the second below them...

I'm not sure what that means, and all your headers look the same in my browser. Could you take a screenshot so I can see what's going on?

Ava R.
Crew

3,500 Points

50
100
200

Offline

[ alice cullen ]

Offline

Posted: Thu Dec 14, 2006 5:17 pm

Sorry, my bad. I meant The sections underneath.

Here's a screenshot. I put a white box around the problem area.

Also, I got rid of the transparent part of my headers but it's still doing the same thing.

Here is another screenshot.
I forgot to box that one but it's on the far left of each header, it cuts off the background.

Posted: Thu Dec 14, 2006 10:44 pm

Ah, I see what's going on for both problems. The first is happening because you've put a background color into the headers. Delete this line from each of the header codes and it will take care of that:

background: #FF9F09

The second issue is a height issue. The headers aren't as tall as the image, so you'll have to make them be that tall. Add this code and it should take care of that:

.section h2 {height: 40px; }

Ava R.
Crew

3,500 Points

50
100
200

Offline

[ alice cullen ]

Offline

Posted: Fri Dec 15, 2006 6:21 am

Ah, thank you! I've finally got it all fixed. whee

Welcome to Gaia! ::

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Quick Reply

More Information