View Full Version : Image Alignment in a header
Mabs22 03-06-2005, 04:26 PM I'm having trouble figuring out how to align my header image. There is nothing else in the header other than this image. Right now it's just dead center, i'd like to move it all the way to the top and over to the right just a bit but i'm not sure what code I need to set it up. Any suggestions? Thanx!!
kittycat 03-06-2005, 07:18 PM You might want to try absolute positioning
http://www.lissaexplains.com/css2.shtml#position
Other than that it would help to see your page/code
Mabs22 03-08-2005, 01:22 AM Thank you so much, that did the trick! I missed that when reading through thanx!!!! :fly2:
now I have a new problem lol of course cuz i'm css/html inept. The header now covers the text in my center section and for some reason I can't get the text to move down.
heres a link to my site, I warn you it's very basic because i'm slow but any help would be much appreciated!
http://www.fakerain.com/spotlight-graphics/
just view source.
:hamster:
Monkey Bizzle 03-08-2005, 01:52 AM in this part of your CSS, just change the top value to a higher one.
#left
{position: absolute;
left: 165px;
top: 350px;
width: 140px;}
also, for future reference, CSS sections with the same name should all be together. You should only have ONE body section like this:
body
{background-color: #E16164;
background-image: url(http://img.photobucket.com/albums/v60/Reject22/Websites/slg1.jpg);
background-repeat-y;
that should actually be background-repeat: repeat-y;
background-position: 50% 0%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
and since all those values are 0, you could use just margin: 0;
padding-left: 0;
padding-right: 0;}
and make sure you get rid of those <!-- --> comment thinggies
Mabs22 03-08-2005, 02:00 AM in this part of your CSS, just change the top value to a higher one.
#left
{position: absolute;
left: 165px;
top: 350px;
width: 140px;}
also, for future reference, CSS sections with the same name should all be together. You should only have ONE body section like this:
body
{background-color: #E16164;
background-image: url(http://img.photobucket.com/albums/v60/Reject22/Websites/slg1.jpg);
background-repeat-y;
that should actually be background-repeat: repeat-y;
background-position: 50% 0%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
and since all those values are 0, you could use just margin: 0;
padding-left: 0;
padding-right: 0;}
and make sure you get rid of those <!-- --> comment thinggies
I fixed the second part, thankyou for the info :)
As for increasing the #'s well thats what i've been trying to do and it doesn't seem to be working. It's like it's stuck in one spot.:0(
kittycat 03-08-2005, 02:57 AM TD, P, BODY{color:#000000;
font-family:tahoma;
font-size:8pt;
line-height:12pt;
text-transform:lowercase;
letter-spacing:0pt;
align:right;
You're missing a closing }
TD, P, BODY{color:#000000;
font-family:tahoma;
font-size:8pt;
line-height:12pt;
text-transform:lowercase;
letter-spacing:0pt;
text-align:right; }
Mabs22 03-08-2005, 03:29 AM Thank you again for helping me with my code, but I'm still having a problem with my center section of my code being stuck under my header and not moving no matter how many times I change the top #'s and I don't know what to do or how to fix it.
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 155px;
top:450px;
width: 150px;
}
#center {
top: 900;
margin-left: 0px;
margin-right: 15px;
}
Monkey Bizzle 03-08-2005, 10:54 AM well, you forgot to specify that you are going to be positioning it. You need to add the parts in bold:
#center
{position: absolute;
top: 900px;
and then you could add left: ##px; after it to position it from the left as well.
margin-left: 0px;
margin-right: 15px;}
also, in your a:hover line:
A:hover
{text-decoration: value;line-through ;
you are supposed to replace the word value with what you actually want it to be. this line should be text-decoration: line-through;
color: #ffffff;}
and lastly...
also, for future reference, CSS sections with the same name should all be together. You should only have ONE body sectioncan you figure out what i'm referring to? i could just tell you but this way you learn something.
Mabs22 03-08-2005, 04:15 PM Yay! That totally worked thanks so much! :)
Sorry i'm such a pain, this is the first time i've coded something all by my lonesome.
Ok so I understand that there really only needs to be one BODY tag for the whole CSS section but i'm not sure how to group things together so they don't go crazy. I tried taking out the extra body tags and then my scroll bar didn't work and my font went all crazy. So how would I go about this?
Monkey Bizzle 03-08-2005, 04:43 PM just add the stuff for the body section into the current body section. you already have
body
{background-color: #E16164;
background-image: url(http://img.photobucket.com/albums/v60/Reject22/Websites/slg2.jpg);
background-repeat: repeat-y;
background-position: 50% 0%;
margin: 0;}
so you would just add to it like this
body
{background-color: #E16164;
background-image: url(http://img.photobucket.com/albums/v60/Reject22/Websites/slg2.jpg);
background-repeat: repeat-y;
background-position: 50% 0%;
margin: 0;
scrollbar-track-color: #E16164;
scrollbar-face-color: #E16164;
scrollbar-shadow-color: #80E480;
scrollbar-highlight-color: #80E480;
scrollbar-3dlight-color: #80E480;
scrollbar-darkshadow-color: #80E480;
scrollbar-arrow-color: #80E480;}
always making sure to add things inside the { } and seperating things with ;
Mabs22 03-08-2005, 05:02 PM ah ok, that makes sence. Thank you again! You've been so helpful! Now i'm kind of at a loss of what to do next lol. I've noticed people have blogs and plug/tag boards and calenders and all that great stuff but I have no idea where to start. I think once I have the main page down I can start working on my image pages and my info pages and such but i'm a bit overwhelmed.
p.s. I check out your site and it's awesome! :bufly:
Monkey Bizzle 03-08-2005, 05:24 PM I checked out your site and it's awesome! :bufly:
thanks =)
a good blogging software is Wordpress (http://wordpress.org). That comes with a calendar.
for a plugboard, go here (http://``````````````).
and for a good tag-board, try here (http://www.venturenine.com/Solutions/files/taggerLE.zip). If you click on that link, it is going to start downloading the file instead of going to a website.
Mabs22 03-08-2005, 07:16 PM thanks =)
a good blogging software is Wordpress (http://wordpress.org). That comes with a calendar.
for a plugboard, go here (http://``````````````).
and for a good tag-board, try here (http://www.venturenine.com/Solutions/files/taggerLE.zip). If you click on that link, it is going to start downloading the file instead of going to a website.
Thanks! I downloaded all 3 and now well I'm confused on how to install/incorperate them into my site. They all want php or iframes and I don't have either...I'm sorry I'm an endless pit of need! But any help would be wonderful!
Monkey Bizzle 03-08-2005, 07:22 PM To install WP, ask Natalie (your host) to help you. I don't know how it works when you are doing it into a subdomain. As far as the tagboard/plugboard, they are very very very easy to install. Just follow the readme files and if you don't understand a step, just ask here. I would recommend starting a new thread tho for those since they aren't related to this thread anymore LOL!
Mabs22 03-08-2005, 07:30 PM To install WP, ask Natalie (your host) to help you. I don't know how it works when you are doing it into a subdomain. As far as the tagboard/plugboard, they are very very very easy to install. Just follow the readme files and if you don't understand a step, just ask here. I would recommend starting a new thread tho for those since they aren't related to this thread anymore LOL!
Ok thanks bunches for everything you've helped me with!!...Now i'm off to attempt the tag/plug boards!:hug:
|