I need help again | Page 1 | CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints) | Guild Forums

Bright Angel Chii

Offline

Posted: Sat Oct 21, 2006 7:56 am

I made again a new layout who should be like my old one but there are many problems.

Here is it

Here the problems:

1. There are ugly brown spaces around the profile
2. The background should not end like it does now
3. The sections won't move more up

Here a screen of the errors I mean:

User Image - Blocked by "Display Image" Settings. Click to show.

You can use the code of my profile if you wanna fit it for me. I made it at another profile.

here what it should look like:

#site {margin: 0;}

#header {border: none;}

#profile {background: none;}

#profile h2 {display: none;}

#profile .avatar, #profile .items, #profile .caption {display: none;}

#extendedProfileBody #header #avatar {display: none;}

#extendedProfileBody #header h1 {background: #FFEEEE url(http://img169.imageshack.us/img169/4051/signxx0.jpg) top left no-repeat; height: 600px; width: 1003px; border: none;}

.section {background: none; margin-bottom: 10px; font-size: 10px; color: #C67675; font-family: Arial, Helvetica, sans-serif;}

#about {width: 445px; text-align: left; position: relative;}

#about li {background: #ffffff url(Bullet.gif) no-repeat; background-position: 1px 3px; margin-bottom: 7px; width: 125px; padding-left: 12px; padding-bottom: 2px; padding-top: 1px; padding-right: 2px; border: 1px solid #C67675;}

#about ol {list-style-type: none; position: absolute; left: -205px; top: -18px;}

#about .links li {position: relative; top: -0px; left: 0px; background: transparent url( ) top center no-repeat; border: none; text-align: center;}

#about ul {list-style-type: none; position: absolute; top: -170px; left: 530px;}

#about ul.links {position: relative; top: 0; left: 0; }

#about .links {margin-left: 0px; text-align: center;}

#about, #comments, #signature, #details {height: 1%;}

#about h2 { background: url(About.png) no-repeat top center; font-size: 10px; color:#ffffff; text-indent: -5000px}

#friends {width: 445px; text-align: center; position: relative;}

#friends h2 { background: transparent url(http://img139.imageshack.us/img139/2877/friendsjj4.png) top center no-repeat; text-align: center; font-size: 10px; color:#ffffff; text-indent: -5000px;}

#commonFriends {display: none;}

dl dt {font-weight: normal;}

#journal {width: 445px; text-align: center; position: relative; }

#journal a:hover { color: #fff; background : #C67675; position: relative;}

#journal h2{ background: transparent url(http://img139.imageshack.us/img139/3618/journaluz8.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#multimedia { visibility: hidden; height: 0px; }

#multimedia h2 { visibility: hidden; height: 0px; }

#multimedia embed, #multimedia object {width: 1px; height: 1px; }

#signature {width: 445px; text-align: center; position: relative;}

#signature h2 { background: transparent url(http://img205.imageshack.us/img205/1639/signaturelk0.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#content {background: #FFEEEE url(http://img166.imageshack.us/img166/3838/bgcp1.jpg) top left repeat-y; border: none; height: 1%; padding: 0; width: 1003px; }

#content #main {margin-left: 98px; width: 445px; padding-left: 170px;}

#content #sidebar {width: 0; margin-left: 405px;}

* html #bar {top: -334px;}

#bar {position: relative;left: -5000px;background: none;text-indent: -5000px;}

#bar #addButton a {position: relative;top: 35px; left: 5363px;width: 73px; height: 69px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#bar #msgButton a {position: relative;top: 48px; left: 5345px;width: 70px; height: 72px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#bar #tradeButton a {position: relative;top: 116px; left: 5244px;width: 72px; height: 72px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#bar #ignoreButton a {position: relative;top: -188px; left: 5525px;width: 72px; height: 70px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#bar #offlineButton {position: relative;top: -6px; left: 5332px;width: 69px; height: 74px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#bar #onlineButton {position: relative;top: -6px; left: 5332px;width: 69px; height: 74px;background: url(http://img205.imageshack.us/img205/3264/rosaav9.gif) no-repeat;}

#details {margin-left: 344px; width: 125px; margin-top: -220px;}

#details #stats {float: none; width: 125px; margin-left: 40px; margin-top: -165px; position: absolute;}

* html #details #stats {margin-top: -165px;}

body {background: #C67675;}

#details h2 {display: none;}

#details #stats dd {border: 1px solid #C67675; border-top: none; background: #ffffff; margin-bottom: 7px; padding-left: 12px;}

#details #stats dt {border: 1px solid #C67675; border-bottom: none; background: #ffffff url(Bullet.gif) no-repeat; background-position: 1px 3px; padding-left: 12px;}

* html #details #stats dt {background-position: 2px 3px;}

#details #info {display: none;}

.caption .message {position: relative; font-size: 11px; left: 0; padding: 0 5px 2px 14px; min-height: 30px; margin: 0 0 0 0; background: #ffffff; text-align: left;}

.caption2 .message {position: relative; left: 0; padding: 0 5px 2px 14px; min-height: 30px; margin: 0 0 0 0; font-size: 11px; background: #ffffff; text-align: left;}

.caption {border: 1px solid #C67675; background: url(Bullet.gif) no-repeat; background-position: 3px 3px;}

.caption2 {border: 1px solid #C67675; background: url(Bullet.gif) no-repeat; background-position: 3px 3px;}

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

.section .items li img {width: 30px; height: 30px; border: 1px solid #C67675; padding: 1px; background: #fff;}

a:link, .caption a, .caption2 a, #about a, a:visited, #about a:visited {color: #C67675; text-decoration: none;}

a:hover, .caption a:hover, .caption2 a:hover, #about a:hover {color: #fff; background : #C67675;}

#wishlist {position: relative; width: 150px; top: 145px; left: -352px; text-align: center;}

#wishlist h2 { background: transparent url(http://img157.imageshack.us/img157/7270/wishlistqy1.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}
* html #wishlist {top: 153px;}

#wishlist .questing
{background: #fff url(http://img97.imageshack.us/img97/9630/bulletwishjq2.png) top left no-repeat;}

#wishlist .bought
{background: #fff url(http://img154.imageshack.us/img154/2875/bulletwishot9.png) top left no-repeat;}

#wishlist .donated
{background: #fff url(http://img154.imageshack.us/img154/2875/bulletwishot9.png) top left no-repeat;}

.caption .date, .caption2 .date {margin-bottom: -13px;}

.section .date { font-style: normal;}

#comments {width: 445px; text-align: center; position: relative;}

#comments h2 { background: transparent url(http://img145.imageshack.us/img145/5646/commentsmr3.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#comments dl dt.avatar img {display:none;}
#comments dl dt.avatar2 img {display:none;}
#comments dl dd {margin: 0 10px 0 10px;}
#comments .delete {margin-top: 10px; text-align: right;}

#corp {color: #F02DAE; font-size: 11px; margin-top: -3px;}
#corp A:link, #corp A:visited {color: #C67675;}
#corp a:hover { color: #fff; background : #C67675;}

Posted: Sat Oct 21, 2006 10:51 am

The background image doesn't start at the left, because of this line of code:

#site {margin: 0 auto; }

That code centers the profile. If you remove "auto," it should work fine.

Once you get the background image positioned correctly, I'd suggest zeroing everything out and start moving your pieces one-by-one. It works best if you start at the top and work your way down, because each piece relies on what happens to the piece above it. Also, all of your current numbers are based off an incorrectly positioned background image and it would be easier to start figuring out the numbers from scratch rather than trying to guess what needs to be changed and by how much.

From looking at your coding, I do want to mention two things:

01) Remember to put a measurement on width/height/left/right/etc. CSS won't work without one:

margin-left: 105;

And 02) Don't move your #bar off screen. It complicates the numbers you have to use and the larger the numbers you use, the harder your browser has to work. You won't even notice #bar is there if you remove the background image, so don't worry about doing anything with it.

left: -5000px;

Happy
Halloween!

Ava R.
Crew

3,500 Points

50
100
200

Offline

Bright Angel Chii

Offline

Posted: Sun Oct 22, 2006 6:43 am

I posted now the image of what it is look like at my another pc. The image don't starts where it should even I removed auto and when I change the bars left code everything becomes more horrible than it is now.

Here a screen of what it looks like now with the removed auto:

Posted: Sun Oct 22, 2006 11:15 am

The last little edge of the dark pink there is from the "margin-left: 3px;" you have on #content and #extendedProfileBody #header h1.

Remove that from both lines of code and it will butt up against the side the way you want it to.

Your main column content is so far off, because you didn't add "px" after the "margin-left" value in #content #main. It's still using the default margin-left, which is 230px. It's using the 230px margin plus the 170px padding you specified instead of your 105px margin plus the 170px padding.

margin-left: 105

Add the px in there and it will line that up.

Make those changes and then let me see it again. I have a few ideas about what else might be off, but I need to see how those changes affect everything first.

Happy
Halloween!

Ava R.
Crew

3,500 Points

50
100
200

Offline

Bright Angel Chii

Offline

Posted: Mon Oct 23, 2006 2:05 am

I posted the new code and the new error screen at the first post. The most things got fixed but the bar don't wanna change. When I change it the site becomes large so you have to scroll long time to the right.

Posted: Sun Oct 29, 2006 7:58 pm

Commenting on your image notes:

1) The brown space is the background color and will go away when the horizontal scrolling goes away.

2) The text doesn't want to move up, because that's where your header is. You need to move #content #main up:

#content #main {position: relative; top: -245px; }

3) What I would do to take care of the bar is to alter the code like below. The blue parts are what I've changed. Striked parts are the parts are parts I've removed; underlined parts were added.

relative absolute

35 0

5363 0

relative absolute

48 0

5345 0

relative absolute

116 0

5244 0

relative absolute

-188 0

5525 0

relative absolute

-6 0px

5332 0

relative absolute

-6 0

5332 0

I've zeroed all the top and left values out. Start off with them zeroed out and see where they start at. After you've done that, then change them one at a time to get them positioned where you want them. Don't try to do them all at once, because you won't be able to tell if they are impacting each other, or, if they are, how they are.

Happy
Halloween!

Ava R.
Crew

3,500 Points

50
100
200

Offline

Bright Angel Chii

Offline

Posted: Mon Oct 30, 2006 2:42 am

I removed the bar because it won't fix. I have now just one problem...

#site {margin: 0; padding:0:}

#header {border: none;}

#profile {background: none;}

#profile h2 {display: none;}

#profile .avatar, #profile .items, #profile .caption {display: none;}

#extendedProfileBody #header #avatar {display: none;}

#extendedProfileBody #header h1 {background: #FFEEEE url(http://img169.imageshack.us/img169/4051/signxx0.jpg) top left no-repeat; height: 600px; width: 1003px; border: none;}

.section {background: none; margin-bottom: 10px; font-size: 10px; color: #C67675; font-family: Arial, Helvetica, sans-serif;}

#about {width: 445px; text-align: left; position: relative;}

#about li {background: #ffffff url(Bullet.gif) no-repeat; background-position: 1px 3px; margin-bottom: 7px; width: 125px; padding-left: 12px; padding-bottom: 2px; padding-top: 1px; padding-right: 2px; border: 1px solid #C67675;}

#about ol {list-style-type: none; position: absolute; left: -205px; top: -18px;}

#about .links li {position: relative; top: -0px; left: 0px; background: transparent url( ) top center no-repeat; border: none; text-align: center;}

#about ul {list-style-type: none; position: absolute; top: 200px; left: 529px;}

#about ul.links {position: relative; top: 0; left: 0; }

#about .links {margin-left: 0px; text-align: center;}

#about, #comments, #signature, #details {height: 1%;}

#about h2 { background: url(About.png) no-repeat top center; font-size: 10px; color:#ffffff; text-indent: -5000px}

#friends {width: 445px; text-align: center; position: relative;}

#friends h2 { background: transparent url(http://img139.imageshack.us/img139/2877/friendsjj4.png) top center no-repeat; text-align: center; font-size: 10px; color:#ffffff; text-indent: -5000px;}

#commonFriends {display: none;}

dl dt {font-weight: normal;}

#journal {width: 445px; text-align: center; position: relative; }

#journal a:hover { color: #fff; background : #C67675; position: relative;}

#journal h2{ background: transparent url(http://img139.imageshack.us/img139/3618/journaluz8.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#multimedia { visibility: hidden; height: 0px; }

#multimedia h2 { visibility: hidden; height: 0px; }

#multimedia embed, #multimedia object {width: 1px; height: 1px; }

#signature {width: 445px; text-align: center; position: relative;}

#signature h2 { background: transparent url(http://img205.imageshack.us/img205/1639/signaturelk0.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#content {background: #FFEEEE url(http://img166.imageshack.us/img166/3838/bgcp1.jpg) top left repeat; border: none; height: 1%; padding: 0; marign: 0; width: 1003px; }

#content #main {position: relative; top: -245px; margin-left: 98px; width: 445px; padding-left: 170px;}

#content #sidebar {width: 0; margin-left: 405px;}

* html #bar {top: -334px;}

#bar {display: none;}

#details {margin-left: 344px; width: 125px; margin-top: -220px;}

#details #stats {float: none; width: 125px; margin-left: 40px; margin-top: -50px; position: absolute;}

* html #details #stats {margin-top: -165px;}

body {background: #C67675;}

#details h2 {display: none;}

#details #stats dd {border: 1px solid #C67675; border-top: none; background: #ffffff; margin-bottom: 7px; padding-left: 12px;}

#details #stats dt {border: 1px solid #C67675; border-bottom: none; background: #ffffff url(Bullet.gif) no-repeat; background-position: 1px 3px; padding-left: 12px;}

* html #details #stats dt {background-position: 2px 3px;}

#details #info {display: none;}

.caption .message {position: relative; font-size: 11px; left: 0; padding: 0 5px 2px 14px; min-height: 30px; margin: 0 0 0 0; background: #ffffff; text-align: left;}

.caption2 .message {position: relative; left: 0; padding: 0 5px 2px 14px; min-height: 30px; margin: 0 0 0 0; font-size: 11px; background: #ffffff; text-align: left;}

.caption {border: 1px solid #C67675; background: url(Bullet.gif) no-repeat; background-position: 3px 3px;}

.caption2 {border: 1px solid #C67675; background: url(Bullet.gif) no-repeat; background-position: 3px 3px;}

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

.section .items li img {width: 30px; height: 30px; border: 1px solid #C67675; padding: 1px; background: #fff;}

a:link, .caption a, .caption2 a, #about a, a:visited, #about a:visited {color: #C67675; text-decoration: none;}

a:hover, .caption a:hover, .caption2 a:hover, #about a:hover {color: #fff; background : #C67675;}

#wishlist {position: relative; width: 150px; top: 205px; left: -363px; text-align: center;}

#wishlist h2 { background: transparent url(http://img157.imageshack.us/img157/7270/wishlistqy1.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}
* html #wishlist {top: 153px;}

#wishlist .questing
{background: #fff url(http://img97.imageshack.us/img97/9630/bulletwishjq2.png) top left no-repeat;}

#wishlist .bought
{background: #fff url(http://img154.imageshack.us/img154/2875/bulletwishot9.png) top left no-repeat;}

#wishlist .donated
{background: #fff url(http://img154.imageshack.us/img154/2875/bulletwishot9.png) top left no-repeat;}

.caption .date, .caption2 .date {margin-bottom: -13px;}

.section .date { font-style: normal;}

#comments {width: 445px; text-align: center; position: relative;}

#comments h2 { background: transparent url(http://img145.imageshack.us/img145/5646/commentsmr3.png) top center no-repeat; font-size: 10px; color:#ffffff; text-indent: -5000px}

#comments dl dt.avatar img {display:none;}
#comments dl dt.avatar2 img {display:none;}
#comments dl dd {margin: 0 10px 0 10px;}
#comments .delete {margin-top: 10px; text-align: right;}

#corp {color: #F02DAE; font-size: 11px; margin-top: -3px;}
#corp A:link, #corp A:visited {color: #C67675;}
#corp a:hover { color: #fff; background : #C67675;}

Posted: Sun Nov 05, 2006 8:38 am

Anybody knows how to fix that?

Bright Angel Chii

Offline

Ava R.
Crew

3,500 Points

50
100
200

Offline

Posted: Sun Nov 05, 2006 9:22 pm

The bit of the right is going to be visible if the browser window is wider than the image or if part of the layout is out beyond the image edge. There's not much you can do about the first instance, but in the second instance, you just need to get what's over too far moved.

As for the bottom, three things:

Zero out padding on #site.
Zero out margins on #content.
If you moved anything using relative positioning, check and make sure that it's not what's making the page that much longer. Since the original space taken up by the object you've moved is still there, that could be keeping the page too long.

Other than those things, I'm not sure what else might be causing that.

Posted: Mon Nov 06, 2006 7:11 am

The problem is that it won't repeat even if it should. I used a close coding at another profile theme and it worked...

Bright Angel Chii

Offline

Ava R.
Crew

3,500 Points

50
100
200

Offline

Posted: Mon Nov 06, 2006 10:52 am

It's not repeating, because you have the background set on #content. If you add it to body, it will repeat the way you want.

Posted: Mon Nov 06, 2006 1:33 pm

try another header becasue I kinda took the code and fooled around with it sorry:p

I changed the heading and the colors on the profile
its set as my profile for now so take a look and see if that helps.

http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=4234220

By the way I am interested on how you gt your sections like that you mind teaching me? 3nodding

vahn staffear II

Offline

Welcome to Gaia! ::

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Quick Reply

More Information