CSS & HTML positioning issue

MrDenix · November 6, 2007

Hello there, It seems like I have a huge problem with my css & html contents. to be more precise, i have used css to position a very simple non-repeating background and that worked great. over that background i have used html (more like xhtml with some mouseover stuff); problem is when i try to resize the browser window the css resizes (or moves) but the html contents remains still. so in full size i'm having a html table in the middle of my browser and when i resize it copies the new position of my browser. i think the problem is at background-position: center top tag in css, but i have no clue how to fix it .i believe such issuse is quite simple, but i haven't been able to figure it out and its giving me quite a headache.for better understading the problem i'm going to post my css & html code . thank you in advance, Mr. DenixCSS body{ background-image: url(blue_background.png); background-repeat:no-repeat; background-position: center top; background-color: #FFFFFF;}a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #217ec0}a:active {color: #FFFFFF}HTML <!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> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="style.css" /></head> <body><center> <table border="0" cellpadding="5" cellspacing="5" width="500" bgcolor="#75c4f9" style="left: 457px; position: absolute; top: 256px;"><tr> <td width="150" onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9'; "> Companii mici si medii </td> <td width="150" onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9';"> Companii mari </td> <td width="150" onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9'; "> Institutii academice </td></tr></table><table border="0" cellpadding="10" cellspacing="10" width="500" bgcolor="#2faafc" style="left: 457px; position: absolute; top: 314px;"><tr> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc';"> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td></tr><tr><td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc';"> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td></tr><tr><td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc';"> Some Text </td> <td onmouseover="this.style.backgroundColor='#75c4f9'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#2faafc'; "> Some Text </td></tr></table><table border="0" cellpadding="5" cellspacing="5" bgcolor="#75c4f9" style="left: 264px; position: absolute; top: 315px; width: 190px;"><tr> <td onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9'; " style="width: 220px"> Plata integrala Licente perpetue </td></tr><tr> <td onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9'; " style="width: 220px"> Plata esalonata Licente perpetue </td></tr><tr><td onmouseover="this.style.backgroundColor='#0099ff'; this.style.cursor='hand';" onmouseout="this.style.backgroundColor='#75c4f9'; " style="width: 220px"> Plata esalonata Licente non- perpetue </td></tr></table></center></body></html>

jlhaslip · November 6, 2007

It would be better for us if you could post a link to your page on the web, if possible. We don't have the image on our hard drive, you see...

MrDenix · November 8, 2007

It would be better for us if you could post a link to your page on the web, if possible. We don't have the image on our hard drive, you see...

I do see mate, which is why i have posted both codes of my project. I have no posibility to host online right now nor free nor paid. The code posted by me can be copy-pasted into a notepad and saved as .css and .html and there you have the image on your hard-drive. Meanwhile I have found a rather unusual way to do it, by widening my background resolution. So like from a 800 x 600 px background picture I have modified it to 1600 x 600 so now however i resize the window the css background stands still and the HTML content moves over it quite nicely.I do consider this is not the best way to do it, which is why I'm open to new ideas you might have. Thank you in advance, Best of all for you Mr. Denix

Synook · November 9, 2007

there you have the image on your hard-drive.

We don't have blue_background.png ...

SpOrTsDuDe.Reese · November 9, 2007

Yea. I pasted the HTML source code into notepad and tried loooking at it but there was a picture there that wouldnt show. And from now on please use code box's. That way we dont have to look at all that code while scrolling alot down the page. Thanks

Sign In

CSS & HTML positioning issue

Recommended Posts

MrDenix

Link to comment

Share on other sites

jlhaslip

Link to comment

Share on other sites

MrDenix

Link to comment

Share on other sites

Synook

Link to comment

Share on other sites

SpOrTsDuDe.Reese

Link to comment

Share on other sites

Archived

Browse

Activity