Сообщение изменено: exception007 (19 марта 2009 - 23:42 )
HTML CSS
Started By exception007, мар 19 2009 23:41
6 ответов в этой теме
#1
Отправлено 19 марта 2009 - 23:41
Проблема такая: сделал 2 столбика слева и справа (в столбах распологается меню) сверху хедер (стоит нижняя граница - линия) и когда сужаю окошко в левую сторону, у меня столбцы сдвигаются влево и вытягиваются вниз и вверх, тем саммы пересекаются и наслаиваются на хедер, не понимаю как поправить..
#5
Отправлено 21 марта 2009 - 23:57
*{ list-style:none; margin:0px; padding:0px; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-width: 1px; position: absolute; float: right; right: 5.5em; margin-top: 17em; } #menu4 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 2em; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 0.7em 0 0 7em; } #menu4 li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 0.7em 0 0 7em; } #menu4 li a:active { color: #fff; background: url(images/menu4.gif) 0 -64px; padding: 0.7em 0 0 7em; }
Сообщение изменено: exception007 (21 марта 2009 - 23:59 )
#6
Отправлено 22 марта 2009 - 11:47
вот весь цсс одной из страниц
раньше у меня, когда сжимал страницу, всё съезжало слево в кашу, теперь же при em всё остаётся на своих местах ничего не съезжает, кроме вот вышепоказанного примера. Хотелось бы сделать так как и у нормальных сайтов. по краям отступы потом меню идёт и когда сжимаешь сайт влевую сторону то сайт сдвигается влево, а отступы пустые сокращаются, и когда они изчезают слева, то сайт остаётся на своём месте и не уезжает за пределы окошка.
раньше у меня, когда сжимал страницу, всё съезжало слево в кашу, теперь же при em всё остаётся на своих местах ничего не съезжает, кроме вот вышепоказанного примера. Хотелось бы сделать так как и у нормальных сайтов. по краям отступы потом меню идёт и когда сжимаешь сайт влевую сторону то сайт сдвигается влево, а отступы пустые сокращаются, и когда они изчезают слева, то сайт остаётся на своём месте и не уезжает за пределы окошка.
<!-- body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4B0082; } body { background: #9ec8ec url("clouds1.jpg") top center no-repeat; } h1 { padding-top: 0.7em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: black; text-align: center; } h2 { margin-top: 2em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: black; text-align: center; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; color: black; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; } .header{ position: absolute; border-bottom: 1px solid #4B0082; left: 2em; top: 2em; width: 100em; height: 7em; } *{ list-style:none; margin:0px; padding:0px; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-width: 1px; position: absolute; float: right; right: 5.5em; margin-top: 17em; } #menu4 li a { height: 32px; height: 2em; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 0.7em 0 0 7em; } #menu4 li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 0.7em 0 0 7em; } #menu4 li a:active { color: #fff; background: url(images/menu4.gif) 0 -64px; padding: 0.7em 0 0 7em; } #centralbox { position: absolute; text-align: center; float: left; right: 25em; left: 25em; width: 55em; margin-top: 10em; height: 290em; color: #000000; border: 2px solid #800000; background-color: #E6E6FA; } .menu { display: block; width: 17em; position: absolute; left: 5.5em; top: 19em; } .menup1 { background-color: #D5C097; text-align: center; vertical-align: middle; display: block; width: 100%; border: 1px solid #4B0082; float: left; position: relative; margin-bottom: 2px; padding: 2px; } .link-list { position: absolute; text-align: center; left: 5em; width: 18.5em; height: 40em; border: 1px solid gray; background: url("images/brandbanner-bg.png") repeat-x; background-color: #FFFFFF; margin-top: 10em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; } .link-list1 { position: absolute; text-align: center; left: 81.5em; width: 18.5em; height: 40em; border: 1px solid gray; background: url("images/brandbanner-bg.png") repeat-x; background-color: #FFFFFF; margin-top: 10em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; } a { color: #6D6D6D; text-decoration:none; } .menup1:hover { background-color: #E4D7BE; } .footer1 { position: absolute; top: 305em; height: 8.5em; width: 100em; left: 2em; border-top: 1px solid #4B0082; bottom: 2em; } img { margin-top: 1em; margin-left: 4em; border: none; } -->