Hey guys, Hope you're all well today. I'm sure this is totally simple but it has confused the crap out of me lol Any help from you CSS experts would be awesome My friend has requested I make him a one page splash page which is just an image and he wants two links on the image. The site is http://www.grvms.com (please close your ears..He has made me put a hideous mp3 song on autoplay as soon as you land on the page! ) Basically the code at the moment for the site layout is <style type="text/css"> <!-- BODY { background-image: url(http://grvms.com/images/splash-final2.gif); background-repeat: no-repeat; background-position: center; background-color : #000000; } --> </style> Code (markup): and this layout is fine but to image map, I've used an online tool and the CSS code it has spat out is... <style type="text/css"> dl.image_map {display:block; width:872px; height:457px; background:url(http://grvms.com/images/splash-final2.gif); position:relative; margin:2px auto 2px auto;} a.LINK0 {left:5px; top:402px; background:transparent;} a.LINK0 {display:block; width:288px; height:0; padding-top:52px; overflow:hidden; position:absolute;} a.LINK0:hover {background:transparent; border:1px dashed black; color:black;} a.LINK1 {left:451px; top:402px; background:transparent;} a.LINK1 {display:block; width:418px; height:0; padding-top:52px; overflow:hidden; position:absolute;} a.LINK1:hover {background:transparent; border:1px dashed black; color:black;} </style> <dl class="image_map"> <dd><a class="LINK0" title="" href="http://twitter.com/1000grms"></a></dd> <dd><a class="LINK1" title="" href="http://1000grms.tumblr.com"></a></dd> </dl> Code (markup): I've tried disecting parts of the code and inserting it within my CSS but I absolutely suck..when I do that, the background disapears and turns white..or the image I'm using just goes to the top of the page instead of being centered. Also the links go to weird parts of the page. What is the correct way for me to do this so that the links appear correctly in my current layout for the site? Thanks a million for any help. Really really appreciated Altug
Anybody? Really struggling with this and would appreciate any ideas - Even if to give me an alternative method or tell me it's not possible
Thanks for the help - I think using an old fashioned image map will be better. So switched up to html - Maybe this will be easier to help me. The code is now : <div style="text-align:center; width:872px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_8201211020813586" src="http://grvms.com/images/splash-final2.gif" usemap="#Image-Maps_8201211020813586" border="0" width="872" height="457" alt=""/> <map id="_Image-Maps_8201211020813586" name="Image-Maps_8201211020813586"> <area shape="rect" coords="5,402,291,452" href="http://twitter.com/1000grms" alt="" title="" /> <area shape="rect" coords="451,402,867,452" href="http://1000grms.tumblr.com" alt="" title="" /> </map> </div> Code (markup): Still can't get the thing to center into the middle of the screen. It just goes center-top of the screen. I'm sure it's a simple mod and I'm being stupid.. I tried adding the margin-top code but that doesn't take the image to the absolute center on different screen sizes. How do I achieve this? Thanks a million. Appreciate it a lot.
Sorry if this is not a direct answer, but you might want to restructure the HTML first, give the page a document type, and define its character set (use some of the free examples in w3schools for fast copy & paste). Check the error console of your browser to debug any errors. Then bring that page to W3C validator, see if you can fix further errors/ warnings (just some, not all). And when the page is valid enough as HTML page, you could be more focus in centering the image/div. One method is by giving <body> a height and defining a top margin (in %) to the target <div> or <img>.