kashik
-
Posts
8 -
Joined
-
Last visited
kashik's Achievements
Explorer (1/14)
0
Reputation
-
так и оставил три колонки, просто уменьшил боковые фоновые картинки по ширине, добавил <table align="center" и все стало работать так как нужно, единственное осталось background-attachment: fixed; если боковым колонкам задаешь это свойство, то картинки уже обе просто не показываются.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> .nav{ font-family: arial; font-size: 10pt; font-weight: bolder; color: #990134; text-decoration: none; text-shadow: white 1px 1px 2px; text-transform: uppercase; } .nav:hover{ font-family: arial; font-size: 10pt; font-weight: bolder; text-decoration: none; color: #ffffff; text-shadow: none; text-transform: uppercase; } .link { border-left: 1px #990134 dotted; color: #345588; text-align: center; background-color: #FF8280; } .link1 { color: #345588; text-align: center; background-color: #FF8280; } .link:hover { color: #FFFFFF; background-color: #990134; } .link1:hover { color: #FFFFFF; background-color: #990134; } #header { background-color:#ffffff; background-repeat: no-repeat; background-position: center; } #content { background-color:#FDE5EE; } #footer { background-color:#FF8280; } #mtext { font-family: Tahoma; color:#990134; font-size: 10pt; line-height: 1.5; } #cat { font-family: Arial; color:#990134; font-size: 10pt; vertical-align: top; font-weight: bold; line-height: 1.5; border-right: dotted 1px #990134; background-color:; } .cat { font-family: Arial; color:#990134; font-size: 9pt; vertical-align: top; font-weight: bold; line-height: 1.5; } .cat:hover { text-decoration:none; color:#5ABFCE; } .zag { font-family: Arial; color:#610030; font-size: 13pt; font-weight: bold; line-height: 1.5; text-align: center; } .bfon { background-repeat:no-repeat; background-attachment:; background-postion:; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="bfon" style="background-image:url(fon1.jpg);" height="" width="430"></td> <td style="background-color:#990134;" height="" width="15px"></td> <td style="background-color:#FF8280;" height="" width="7px"></td> <td width="730px" valign="top"> <table cellpadding="0" cellspacing="0" style="" border="0"> <tr> <td id="header" height="180px" width="740px" colspan="6"><img src="head.jpg" height="180px" width="740px"></td> </tr> <!--ìåíþ íàâèãàöèè--> <tr> <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td> </tr> <tr> <td class="link1" height="25px" width="72px"><a class="nav" href="">Ãëàâíàÿ</a></td> <td class="link" height="25px" width="72px"><a class="nav" href="">Ïðîäóêöèÿ</a></td> <td class="link" height="25px" width="72px"><a class="nav" href="">Ðàáîòà</a></td> <td class="link" height="25px" width="72px"><a class="nav" href="">Çàÿâêà</a></td> <td class="link" height="25px" width="72px"><a class="nav" href="">Îïëàòà</a></td> <td class="link" height="25px" width="72px"><a class="nav" href="">Êîíòàêòû</a></td> </tr> <tr> <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td> </tr> <!--ÊÎÍÒÅÍÒ--> <tr> <td id="content" height="" colspan="6"> <table cellpadding="10" cellspacing="5" style="" border="0"> <tr> <td id="cat" width="25%"> <span class="zag">Êàòàëîã</span><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ âîëîñ</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ çàãàðà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ëèöà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ íîã</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ðóê</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ òåëà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Àðîìàòû Avon</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äåêîðàòèâíàÿ êîñìåòèêà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Àêñåññóàðû</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ âîëîñ</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ çàãàðà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ëèöà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ íîã</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ðóê</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ òåëà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Àðîìàòû Avon</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Äåêîðàòèâíàÿ êîñìåòèêà</a><br> <img src="home_arrow_1.gif"> <a class="cat" href="">Àêñåññóàðû</a><br> </td> <td id="mtext" width="75%"> <center><img src="avon.jpg" width="80%" height="80%"></center><br> </tr> </table> </td> </tr> <tr> <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td> </tr> <tr> <td id="footer" height="70px" colspan="6"></td> </tr> </table> </td> <td style="background-color:#FF8280;" height="" width="7px"></td> <td style="background-color:#990134;" height="" width="15px"></td> <td class="bfon" style="background-image:url(fon2.jpg);" height="" width="430px"></td> </tr> </table> </body> </html>
-
я так тоже делал, это решает пол проблемы, левая часть скрывается так же под таблицей, но правая часть зато начинается двигаться как нужно. задавать позиции для каждой части не решило проблему, и еще не понятный для меня баг background-attachment:fixed; задавая это свойство для левой и правой части, в правой части пропадает картинка фоновая 0_о сделаю наверное простенький фон)
-
1650 этот монитор дома, а так на этих скринах можно понять.
-
мне нужно что бы фоновая картинка просто сдвигалась конкретно в лево, т.е. уходила за левую границу браузера, тем самым находилась всегда в нужном месте с таблицей, уменьшать ее или увеличивать автоматически не нужно, в общем проблема в том, что фоновое изображение упирается в левую границу браузера. 950-1024 это не вариант т.к. сама таблица 800, там от картинки ничего не останется. кстати да спасибо что напомнили, реально уменьшить разрешение экрана либо просто сдвинуть границу браузера это на самом деле разные вещи, вот я щас скинул разрешение с 1440Х900 на 1280Х768 моя картинка стала нереально огромной, думаю и замарачиваться не стоит уже с этим.
-
ну как бы все эти фишки они нужны, тем более fixed, что бы картинка не прокручивалась с контентом. Я вот нашел какой то скрипт http://mutter.boom.ru/read/018.htm но что то он не работает.
-
вот я щас смотрю с монитора у которого разрешение по ширине 1440 и уже наблюдаю то что картинка смещена, т.к. картинка имеет по ширине 1650 рх, убрал строчку ничего не изменилось.
-
Всем привет. Верстаю сайтик один, в верстке не знаток, верстаю таблицами. Основная таблица с контентом шириной 800рх, отцентрирована. Мой монитор с разрешением 1650х1050 поэтому и фоновую картинку лепил под это размер шириной в 1650, с такими CSS: body { background-image:url(fon.jpg); background-repeat:no-repeat; background-attachment:fixed; background-color:#ff8281; background-postion: center top; } ну и при уменьшении ширины экрана вплоть до 1024 естественно, сама таблица сдвигается, а фоновая картинка остается на месте, становится некрасиво. Посоветуйте, что можно сделать что бы фоновая картинка так же сдвигалась вместе с таблицей, либо может другую технику посоветуете.