It's about my profile....

[CraftyViolet]

Been searching through the forums and found some help with CSS on putting an image at the very top of my profile page. Just a couple of problems with it. I guess I'm not entering the code correctly, because when I enter it and go to preview my profile, it just doesn't load. I'm trying to figure out how to put a header picture at the very top. I know what to do now to enter clickable images and what not. That involves html, which isn't that foreign to me. CSS is just leaving me stumped. So....HELP!

 

[Kradek]

Link to your profile?

Are you trying to put an image above everything else on your profile?

 

[CraftyViolet]

A picture above everything else. I've used the code

Add these lines of CSS to your custom CSS:
#header
{
position:absolute;
top: 0;
height: 449px; /*Change this depending on how much height you want at the top*/
width: 1024px; /*Ditto for width*/
left: 0;
right:0;
margin: auto;

}
table{margin-top: 449px;} /*change this to match what you set the height above to.*/
table table {margin-top:0px}

Delete the line "position:relative" from your custom CSS:
.container {
color: #666666;
position:relative;/*remove this line*/
border: px #;
padding: 5px;
height: 100%;
background-color:transparent;
}

Add this code to one of your sub sections (I used About Me, but it shouldn't matter which):

<div id="header">...stuff you want at the top...</div>

Which was in a previous post. But either I'm not entering it right or its just not working.

 

[Kradek]

Well, at least we're on ground I'm familiar with; I wrote those

What exactly is not working? Is your profile coming up at all? Is it the image that is not showing?

I found your profile, it looks like the CSS is the default CSS. When you are editing your profile, you need to click the "Customize" link. That will allow you to modify the profile CSS and add the rules specified in the instructions.

 

[CraftyViolet]

It seems to be somewhat working, its just greatly spaced apart and my background seems to have disappeared. I was using the upload option through MFC for the background, not an html link.

http://profiles.myfreecams.com/CraftyViolet

 

[Kradek]

Yes, I see the problem. Give me a few minutes to take a peek.

 

[CraftyViolet]

I can send you what code I have written. I'm new to CSS, been writing fairly well with certain html for sometime now. Just completely lost with CSS.

 

[Kradek]

OK, worked it out on my profile.

Paste this at the bottom of your custom CSS:

#header {
position:absolute;
width:800px;
margin: auto;
top:0;
left:0;
right:0;
}

table {margin-top:400px;}
table table {margin-top:0px}

body { 
  background-image: url('http://e.mfcimg.com/photos2/135/13599275/646-886-106-511-4943800.jpg');
}

Also, don't forget to remove the "position:relative" rule for the .container style.

The reason you lost the background image is because it looks like MFC is setting it as part of the custom CSS. If you do your own custom CSS, you have to add the rule yourself. I included it above for you.

 

[CraftyViolet]

Holy balls! Thank you so very much!!!!!!! I can't express how frustrating that was. You just helped me and my sister! She wanted me to customize hers too.

 

[Kradek]

You're welcome