[GUIDE] Learn How To Code v2/Current Profiles

[Mizz Faith]

Ok, I figure I've been working too much on my profile as I can't figure out something very simple.

For my avatar image, is there any way to align it to the left and keep everything else as it is centered? I know the control for it is:

#id_details img { }

What do I put in the brackets? I tried align:left but that didn't work (I figured it wouldn't). Help would be greatly appreciated!

[KayleyV2]

Mizz Faith

Ok, I figure I've been working too much on my profile as I can't figure out something very simple.

For my avatar image, is there any way to align it to the left and keep everything else as it is centered? I know the control for it is:

#id_details img { }

What do I put in the brackets? I tried align:left but that didn't work (I figured it wouldn't). Help would be greatly appreciated!

The simplest way would be to use a negative margin, like:
#id_details img{margin-left: -50px;}

You can edit the 50 to a different number, of course.

@ Chiea - Don't worry about it. A lot of us get that way when we code. xd

[Skye River]

*subscribes to thread*

[Mizz Faith]

Thank you so much, that worked ^_^

[DJDJ18]

Kayley I wanted to say thanks again for the help with my profile. I would like to say your guide was really helpful with the selector names and the gaia bar information. As I said before there is a link on my profile to your guide. I would advise this guide to anyone who is looking for the information held within it or needs help making a profile.

[KayleyV2]

DJDJ16

Kayley I wanted to say thanks again for the help with my profile. I would like to say your guide was really helpful with the selector names and the gaia bar information. As I said before there is a link on my profile to your guide. I would advise this guide to anyone who is looking for the information held within it or needs help making a profile.

Thank you for support! whee heart

[RRR3D]

● ● ● ● ● ●

Kayley, fabulous guide, thank you for setting this up.
I have a question, how do I set the panels in my profile to align to the right.

[jacks-the-bunny]

none of this stuff is working

[jacks-the-bunny]

how do you make the picture bigger so when you put it on no repeat it convers the whole page instead of just being that one picture on the page?

[Fashion_Goddess 1]

your post is the best but, im having a problem that i dont know if it can be fixed. i now have 2 columns but i think that they are too close together. is there any way to get them to move them (quite a few spaces)apart more so that i can make the width wider??? neutral right now they look mashed together. these are the codes that i used:
.panel h2{background: #008000;} body{background: url(http://i186.photobucket.com/albums/x112/audy529/Anime-3.jpg);}
html{background: transparent;}
.panel{width: 230px;}
.panel{font-size: 18px;}
.panel{font-family: Bradley Hand ITC;}
.panel{background: black;}
.panel h2{color: 00FFFF;}
.panel{color: white;}
PLEASE HELP

[Scrumptious Styrofoam]

Skye River

*subscribes to thread*

[Skye River]

Scrumptious Styrofoam

Skye River

*subscribes to thread*

I know Eli's too busy to update her profile making guide. This thread has more content which answered some CSS questions I had for a while.

(nobody paid me gold to say that) 3nodding

[KayleyV2]

r o y a l - miint

● ● ● ● ● ●

Kayley, fabulous guide, thank you for setting this up.
I have a question, how do I set the panels in my profile to align to the right.

Thanks!

I'm not entirely sure what you are asking. Do you mean that you want everything in the profile to be aligned to the right? If so, you can use this code:
.panel{text-align: right;}

jacks-the-bunny

how do you make the picture bigger so when you put it on no repeat it convers the whole page instead of just being that one picture on the page?

I'm skipping over your previous post because it seems like you've gotten some of the codes to work.

If you mean that you want the background to repeat and scroll with the page (instead of continuing down the page), delete this in your code:
html,body { background: url(http://th266.photobucket.com/albums/ii252/jonsimpson93/th_halo3-action.jpg) repeat top left; }
.panel h2{background: #000000;}
.panel{background: darkred;)
body{background: url(http://th266.photobucket.com/albums/ii252/jonsimpson93/th_halo3-action.jpg);}
html{background: transparent;}


And add this:
html,body { background: url(http://th266.photobucket.com/albums/ii252/jonsimpson93/th_halo3-action.jpg) repeat top left fixed; }
.panel h2{background: #000000;}
.panel{background: darkred;}

Fashion_Goddess 1

your post is the best but, im having a problem that i dont know if it can be fixed. i now have 2 columns but i think that they are too close together. is there any way to get them to move them (quite a few spaces)apart more so that i can make the width wider??? neutral right now they look mashed together.

Easy solution: Use this...
#column_1{width: 250px;}

Everything below is optional, but I wanted to offer you some explanations.

I looked over your code and you have a few problems. I don't want you to be discouraged; you seem to have a slight grasp on it, and once it's explained to you it will probably make more sense.

I'll break down your code and explain each thing.
_________________________________________

html,body { background: url(comment_panel) repeat top left; }

This doesn't really affect the appearance of your profile, but for the future I wanted to explain this. The part in red should be a URL, like http://photobucket.com/picture.png or something like that. You can get a URL by uploading an image to a site like Photobucket and copying the Direct URL.
_________________________________________

.panel{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: 5px;}

This code supposedly makes the panel scroll once it reaches 5px. Only 5px of the panel would show. It can be hard to know exactly how many pixels to put, so I'll give an example.

This image (sorry for using it as an example Scrumptious, but it was the closest image to me):


It is 79px high. So if you compare 5px to that, the 5px is very short for content.
_________________________________________

.panel{opacity: .10; -moz-opacity: .9; filter:alpha(opacity=85); -khtml-opacity: .8;}

In most cases, all of the numbers should be universal, although the filter wouldn't have the period in front. I.E. instead of .10, .9, 85, .8, you would use .9, .9, 90, .9. The different numbers just set the level of opacity for different internet browsers. That's why they would usually be the same; there are very few instances where you would make them different.
_________________________________________

2columns{width: 60px; margin-left: auto; margin-right: auto; float: none; position: relative; top: 0px;}

2columns is not a proper selector. You would use #columns instead. You might also want to use a width of "760" instead of just "60".
_________________________________________

.panel{height: 30px;}
.panel{width: 230px;}
.panel{font-size: 18px;}
.panel{font-family: Bradley Hand ITC;}
.panel{background: black;}
.panel h2{border: 16px striped gold;}
.panel h2{color: 00FFFF;}
.panel{color: white;}

These codes are right; they will all work properly, so there isn't really a problem here. I would just like to suggest putting them together to save space. It won't change the outcome, but it will make your codes more organized.

Like, instead of the way you wrote them, you could write them like this:

.panel{height: 30px; width: 230px; font-size: 18px; font-family: Bradley Hand ITC; background: black; color: white;}
.panel h2{border: 16px striped gold; color: 00FFFF;}

I would like to point out two things about this code though. The reason why you can't make the panels larger is because you need to set a larger size for the first column. This code should work, and give extra space for more room:
#column_1{width: 250px;}

Also, you have the border set to "striped" on the panel header. This is not an actual border-style, which is why it is not showing up.
_________________________________________

Anyway, I just wanted to point some of that stuff out so that you could tackle it ahead of time. The #column_1{width: 250px;} code should fix the problem you asked about.

I hope you do not take this post as a criticism in anyway; I think it's great that you are attempting to code and I want to be able to help you with it. It will become easier as you practice with it.

[RRR3D]

♥ ★ ♥ ★ ♥ ★

@ kayley : Np.
No, that's not what I meant.
= I want my content box on the right but it has the same width when it's at the center.
Sorry If I bother you : sweat :
-subscribes to thread-

[Aetheric]

biggrin awesome thread!! <3 *subscribes*