cjy8s Posted August 13, 2009 Share Posted August 13, 2009 Alright i have three problems: I am creating a website in which i have a total of four images, one is the center images that is the length of the page and always stays in the center. The other three are buttons, which i plan to have sit on top of the center image at a certain point, even when the width of the browser is changed. however, due to my extreme lack of knowledge of CSS javascript or HTML, my buttons are stuck on the top left corner of the page. So my webpage is like this: I have one line of text at the top-left most part of the page. this text is pushing my three horizontally aligned buttons, and these buttons are pushing my center image down even further. So here's problem one: How can i get these images to overlap and stay positioned?Here's problem two: How can i get my text and images out of the top left corner? I just don't get why they aren't moving... and i blame my own ignorance of the languages. Finally the third problem: i want these images to be replace by similar images when the mouse rolls over them, and for that second images to stay when the link provided by the buttons is active. I fully expect to be several issues with it, but here is my CSS coding: /* this is the background image*/body { background: transparent url('background.png');background-repeat:repeat-x; margin: 0 auto;padding: 0 auto; }/*this is the paragraph margins*/#p { font-family: sans-serif; display: inline; margin-left: 170px; margin-right: 100px; text-align: center; padding: 0px; margin-right: 0px; }/*this is the center image*/#image { position:absolute; width: 100%; text-align: center; }/*these are the buttons*/div#img{ width: 37px; height: 95px; position: absolute; left: 200px; top: 200px; } div.img{ display: inline; width: 37px; height: 95px; background-position: left 20 top 20; text-align: left; text-indent: -9000px; } and here is my HTML: <body><!-- the rest of the coding will begin from here --><p>this is paragraph one</p><!-- buttons --><div id="buttons"><b><a href="familyfinder.com/getting_started"><img src="ugetting started.png" alt="Getting Started" class="img"></a><b><a href="familyfinder.com"><img src="uhome.png" alt="Home" class="img"></a><b><a href="familyfinder.com/our_mission"><img src="uour mission.png" alt="Our Mission" class="img"></a></div><!-- center image --><div id="image"><img src="center image.png" alt="" /></div></body> I've only included the body. please let me know if you need more. I've looked on the internet for things that will help, but like i said, i'm not experienced enough to decipher small bits of code. Would someone please show me what to do? I'm doing this as my senior project. I would be doing something else, and its a long story why i'm not, but this is the only way for me to go now. Also, would CSS or javascript work better for this? I am using external documents for both. Link to comment Share on other sites More sharing options...
chibineku Posted August 13, 2009 Share Posted August 13, 2009 In order to position elements absolutely (which is what you want to do), they need to be inside an element that has position: relative.So, if you have some kind of wrapper div, which will define the area of the page you want everything else to sit in, if you give that position relative, you can give the buttons position absolute. Even assigning the body with position: relative should do it. The images will overlap now, and if you want to make sure that certain ones are on top, give them higher x-indices (give the image on the top the highest z-index,then the one it is meant to overlap...). Link to comment Share on other sites More sharing options...
cjy8s Posted August 14, 2009 Author Share Posted August 14, 2009 Okay, I tried chibineku's advice; and since I am sure that i messed this up, I really need help. I just don't understand this very well. I tried positioning the body as 'relative' with this:body { position:relative;background: transparent url('background.png');background-repeat:repeat-x; margin: 0 auto;padding: 0 auto; }And nothing changed. School doesn't start 'til September, and i can't wait that long. What should I do with this? what's wrong with my coding? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2009 Share Posted August 15, 2009 you can't use: position: (how u going position body when it fills the whole screen? you position elements within the body) background-position: is probably what you meant to use, this is used for background images only, not for images using the <img /> tagmargin: 0 auto;(margin: npx; where n equals value equal to 0 or above, using auto does nothing)#p using this, will assign the styling to an id with the name of 'p' id="p" not to a paragraph, to set it to a paragraph tag remove the hash.again! there is no div#img (no div with id="img"), there is no div.img (div with class="img").but there is a img.img (img tag with class="img") this could have been referenced on its own by tag only, 'img' but would affect all images, the best option would be to reference the img within the div buttons, like so #buttons img{ }.see below: (Note: don't know exactly what you require, but what i read in description this is what you are possibly looking for)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">/* this is the background image*/*{padding:0; margin:0;}html, body { height: 100%;}body {/*background: url(body_sidestripes.png) repeat-y center top;*/background: url(background.png) repeat-y center top;}/*this is the paragraph margins*/p {font-family: sans-serif;margin-top: 0.5em;text-align: center;margin-left: 170px;margin-right: 100px;}/*this is the center image*/#image {position:absolute;top: 50%;width: 100%;text-align: center;/*background:url(tabbuttonR.png) repeat-y;*/background:url(center image.png) repeat-y;height: 400px;vertical-align:middle;margin-top: -200px;}/*these are the buttons*/#buttons img{width: 37px;height: 95px;}#buttons {position:absolute;top: 50%;margin-top: -48px;height: 100%;float: left;left: 50%;margin-left: -105px;;}</style></head><body><!-- the rest of the coding will begin from here --><p>this is paragraph one</p><div id="image"><!-- center image --><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <div id="buttons"><!-- buttons --><a href="familyfinder.com/getting_started"><img src="ugetting started.png" alt="Getting Started" /></a><a href="familyfinder.com"><img src="uhome.png" alt="Home" /></a><a href="familyfinder.com/our_mission"><img src="uour mission.png" alt="Our Mission" /></a></div><!-- end buttons --></div><!-- end center image --><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Link to comment Share on other sites More sharing options...
cjy8s Posted August 17, 2009 Author Share Posted August 17, 2009 Thank you so much dsonesuk! The images are mostly working now. But now I have a new problem. The images are aligned vertiacally in stead of horazontally, and I still don't know how to replace images with a rollover. If you wouldn't mind, is there a way to replace the images with CSS? I know you could just attach button two onto the bottom of button one and have it move the image up on rollover. But is there a way to avoid this method? (I hope i made that clear enough) Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2009 Share Posted August 17, 2009 will have to use background images to use css rollover effect, and you don't have to use joined images either.typical setup#buttons a {display: block; float: left; width: nnnpx; height: nnpx; line-height: nnpx; text-decoration: none; background:url(normalimagename.png) no-repeat; color: #fff;}/*where nnn, and nn equals size of images*/#buttons a:hover { background-image:url(hoverimagename.png); color: #000;} /*this is all that is required because you are changing the image only, and maybe the text, all the declaration are taken from the above selector and its declarations.*/ Link to comment Share on other sites More sharing options...
cjy8s Posted August 18, 2009 Author Share Posted August 18, 2009 Well thank you Very much! I'm very glad that you could help me! This has been a giant headache remover. this is what my CSS coding pertaining to the buttons looks like now: /*these are the buttons*/#buttons { width: 37px; height: 95px; position:absolute; top: 120px; margin-top: -41px; height: 100%; float: right; left: 50%; margin-left: -105px; } #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background:url(uhome.png) no-repeat; color: #fff; } #buttons a:hover { background-image:url(ahome.png); color: #000; } Is this ok?Now, what do i do about the images being aligned vertically instead of horizontally? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 18, 2009 Share Posted August 18, 2009 this usually happens when the container box width is not greater than the buttons total width + any padding & margins. in this case, you have set the container #buttons to the same width as the buttons? so they will drop down under each other. increase this width to accommodate the buttons total width. (3 x 95). Link to comment Share on other sites More sharing options...
cjy8s Posted August 18, 2009 Author Share Posted August 18, 2009 Excellent! it works great! but i have'nt got the rollover to work. would you mind looking at that again? #buttons { width: 287px; height: 37px; position:absolute; top: 120px; margin-top: -41px; height: 100%; float: right; left: 50%; margin-left: -105px; } #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background:url(uhome.png) no-repeat; color: #fff; } #buttons a:hover { background-image:url(ahome.png); color: #000; } thanks again, you've been a monumental help Link to comment Share on other sites More sharing options...
dsonesuk Posted August 18, 2009 Share Posted August 18, 2009 i've justed tested this in all browsers, and it works fine. check the images are in the same location as your html webpage, and the spelling is correct, and matches the file name exactly (lowercase, uppercase, mixed). Link to comment Share on other sites More sharing options...
cjy8s Posted August 21, 2009 Author Share Posted August 21, 2009 yeah i cannot get it to work. the images are in the same folder and everything. in firefox i get this thing that resembles a border that changes from white to black on rollover; but no image change. this coding doesn't seem to be working in chrome either, sorry. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 that sounds like you still have the image tag there, as in <a href="#"><img src="blah blah" /></a> as well, this is not needed as both images are background images only, assigned to the anchor tag <a>, which is controlled by #buttons a and #buttons a:hover. it should just be:<div id="buttons"><a href="#">button no1</a><a href="#">button no2</a><a href="#">button no3</a></div>where button no1, etc will be the text over the top of the background image, which will change from color:fff; (white) to color: #000; (black);You also need text-align: center; see below#buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background:url(uhome.png) no-repeat; color: #fff;text-align:center; } Link to comment Share on other sites More sharing options...
cjy8s Posted August 22, 2009 Author Share Posted August 22, 2009 that sounds like you still have the image tag there, as in <a href="#"><img src="blah blah" /></a> as well, this is not needed as both images are background images only, assigned to the anchor tag <a>, which is controlled by #buttons a and #buttons a:hover. it should just be:<div id="buttons"><a href="#">button no1</a><a href="#">button no2</a><a href="#">button no3</a></div>where button no1, etc will be the text over the top of the background image, which will change from color:fff; (white) to color: #000; (black);...Just a question, and i'm sure this is just my misunderstanding; but i need the entire images to be changed, not just the text. especially since the text on my buttons is part of the image (sorry i know i should have mentioned that earlier). can this code change the images, not just the text? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 yes, that is what it should do in the first place, the text within the anchor can just be removed to show background image only. Link to comment Share on other sites More sharing options...
cjy8s Posted August 22, 2009 Author Share Posted August 22, 2009 Awesome, thank you! the hover is working Great!But now all my buttons have the 'home' image on them, hover or not.what should i do with my CSS to help fix this?Here is what it looks like now: #buttons { width: 287px; height: 37px; position:absolute; top: 110px; margin-top: -31px; height: 100%; float: right; left: 50%; margin-left:-100px; } #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background:url(uhome.png) no-repeat; color: #fff; } #buttons a:hover { background-image:url(ahome.png); color: #000; } and here is the newly edited HMTL: <!-- buttons --><div id="buttons"><a href="Getting Started.html"></a><a href="Home.html"></a><a href="Our Mission.html"></a></div> Thanks a ton again, dsonesuk. You've been more help for my headache than any amount of advil. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 if the buttons have different images for each button, you have give a different class or id to each anchorexamplecss coding#buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; color: #fff;background-repeat: no-repeat; }#buttons a.getstart:link {background:url(image1.png);}#buttons a.home:link { background:url(image2.png);} #buttons a.mission:link { background:url(image3.png);} #buttons a.getstart:hover { background-image:url(image1_hover.png);} #buttons a.home:hover { background-image:url(image2_hover.png);} #buttons a.mission:hover { background-image:url(image3_hover.png);}html :<div id="buttons"><a class="getstart" href="Getting Started.html"></a><a class="home" href="Home.html"></a><a class="mission" href="Our Mission.html"></a></div> Link to comment Share on other sites More sharing options...
cjy8s Posted August 24, 2009 Author Share Posted August 24, 2009 Ok, I know my limitless problems must be getting annoying, but now my three images do not appear. The link is still there when the cursor goes over it, even though the image is not showing up. Could this be because they are being used as background images and a z-index is needed? If so, which part would I put it on? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 24, 2009 Share Posted August 24, 2009 #buttons a {display: block;float: left;width: 95px;height: 37px;line-height: 37px;text-decoration: none;color: #fff;background-repeat: no-repeat;position: relative; /* position is required for z-index*/z-index: 999;} Link to comment Share on other sites More sharing options...
cjy8s Posted August 24, 2009 Author Share Posted August 24, 2009 i'm sorry, but I can't seem to get it to work. My CSS seems to be correct, but i cannot get the images to show. #image{ position:absolute; width:100%; text-align:center; z-index:-999; }#buttons { width: 290px; height: 37px; position:absolute; top: 110px; margin-top: -31px; height: 100%; float: right; left: 50%; margin-left:-100px; } #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background-repeat: no-repeat; position: relative; z-index: 999; } #buttons a.getstart:link { background-image:url(ugettingstarted.png); }#buttons a.home:link { background-image:url(uhome.png); }#buttons a.mission:link { background-image:url(uourmission.png); } #buttons a:getstart:hover { background-image:url(agettingstarted.png); } #buttons a:home:hover { background-image:url(ahome.png); } #buttons a:mission:hover { background-image:url(aourmission.png); } i'm not sure if it was totally necessary, but i put a z-index on the center image in hopes that it would reveal the buttons and so my text would show. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 24, 2009 Share Posted August 24, 2009 sorry my mistake, change hover to below, and remove all z-index#buttons a.getstart:hover { background-image:url(agettingstarted.png); } #buttons a.home:hover { background-image:url(ahome.png); } #buttons a.mission:hover { background-image:url(aourmission.png); }working example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">/* this is the background image*/*{padding:0; margin:0;}html, body { height: 100%;}body {/*background: url(body_sidestripes.png) repeat-y center top;*/background: url(background.png) repeat-y center top;}/*this is the paragraph margins*/p {font-family: sans-serif;margin-top: 0.5em;text-align: center;margin-left: 170px;margin-right: 100px;}/*this is the center image*/#image{ position:absolute; width:100%; text-align:center; }#buttons { width: 290px; height: 37px; position:absolute; top: 110px; margin-top: -31px; height: 100%; float: right; left: 50%; margin-left:-100px; } #buttons a { display: block; float: left; width: 95px; height: 37px; line-height: 37px; text-decoration: none; background-repeat: no-repeat; text-align:center; color: #fff; } #buttons a.getstart:link { background-image:url(u_norm.png); }#buttons a.home:link { background-image:url(u_norm.png); }#buttons a.mission:link { background-image:url(u_norm.png); } #buttons a.getstart:hover { background-image:url(u_hover.png); } #buttons a.home:hover { background-image:url(u_hover.png); } #buttons a.mission:hover { background-image:url(u_hover.png); }</style></head><body><!-- the rest of the coding will begin from here --><p>this is paragraph one</p><div id="image"><!-- center image --><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <div id="buttons"><!-- buttons --><a class="getstart" href="familyfinder.com/getting_started">a</a><a class="home" href="familyfinder.com">b</a><a class="mission" href="familyfinder.com/our_mission">c</a></div><!-- end buttons --></div><!-- end center image --><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Link to comment Share on other sites More sharing options...
cjy8s Posted August 25, 2009 Author Share Posted August 25, 2009 Haha ok so now the hover works great. but only two of the images appear normally and they disappear on click and do not return if i go back to the previous page or hit refresh. the HTML's are still very similar at this point, so they all have the same compatibility with the CSS. Thanks again by the way, but do you have any ideas?Is there a limit as to how many background-images i can have? and could that be related to why they disappear as i click on them? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2009 Share Posted August 25, 2009 OK! add visited pseudo to below #buttons a.getstart:link, #buttons a.getstart:visited { background-image:url(ugettingstarted.png); }#buttons a.home:link, #buttons a.home:visited { background-image:url(uhome.png); }#buttons a.mission:link, #buttons a.mission:visited { background-image:url(uourmission.png); } Link to comment Share on other sites More sharing options...
cjy8s Posted August 25, 2009 Author Share Posted August 25, 2009 YES! haha it works perfectly now! dsonesuk deserves a raise for sure! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.