Помогите!Проблема с дизайном...
shumaher1
Группа: Удаленные
Сверстал сайт, сам по себе выглядит хорошо при любых обстоятельствах: , и вот что произошло когда я залил это всё на юкоз: Вот HTML: Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<IMG SRC="design/head/frames.png" WIDTH=829 HEIGHT=230 BORDER=0 ISMAP USEMAP="#frames.png">
<MAP NAME="frames.png">
<AREA SHAPE="POLYGON" COORDS="37,67,46,186,199,175,190,54" HREF="/" title="На главную" ALT="Главная страница">
<AREA SHAPE="RECT" COORDS="294,38,500,166" HREF="/index/sostavklassa/0-6" title="Состав класса" ALT="Состав класса">
<AREA SHAPE="POLYGON" COORDS="622,51,616,176,794,185,801,59" HREF="/photo" title="Фотоальбом" ALT="Фотоальбом">
</MAP>
</div>
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content">
<div id="tv">
<div id="news">
<iframe src="http://our-class.ru/index/news/0-105" width="416px" height="235px" frameborder="0"></iframe>
</div><!-- #news-->
</div><!-- #tv-->
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar sl">
<IMG SRC="/design/body/books.png" WIDTH=333 HEIGHT=232 BORDER=0 ISMAP USEMAP="#books.png">
<MAP NAME="books.png">
<AREA SHAPE="RECT" COORDS="30,47,50,174" HREF="/forum" ALT="forum">
<AREA SHAPE="RECT" COORDS="54,48,67,174" HREF="/index/0-15" ALT="pravila">
<AREA SHAPE="RECT" COORDS="73,50,90,174" HREF="/load" ALT="shporgalki">
<AREA SHAPE="RECT" COORDS="94,50,106,173" HREF="/stuff" ALT="games">
<AREA SHAPE="RECT" COORDS="110,50,117,168" HREF="/" ALT="top">
<AREA SHAPE="RECT" COORDS="120,58,135,180" HREF="/index/konkursy/0-13" ALT="konkursy">
<AREA SHAPE="RECT" COORDS="140,56,152,180" HREF="/index/razvlechenija/0-54" ALT="razvle4enija">
<AREA SHAPE="RECT" COORDS="156,61,168,180" HREF="/gb" ALT="guestbook">
</MAP>
<div id="profile">
<div id="userinfo">
)))
</div>
</div><!-- #profile -->
</div><!-- .sidebar.sl -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<div id="gor-menu">
<ul>
<li>Copyright
<li><a href="">reclama</a>
<li><a href="">pravila</a>
<li><a href="">qestions and comments:
our-class@our-class.ru </a>
</ul>
</div><!-- #gor-menu -->
</div><!-- #footer -->
</body>
</html>
и CSS: Code
* { margin: 0; padding: 0; } html {height: 100%} body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; height: 100%; background-color:#663000; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p {margin: 0 0 18px} img { border: none; } input {vertical-align: middle} #wrapper { width: 900px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; background-image: url('/design/bg/bg.jpg'); } /* Header -----------------------------------------------------------------------------*/ #header { height: 230px; } /* Middle -----------------------------------------------------------------------------*/ #middle { width: 100%; padding: 0 0 100px; height: 1%; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 0 100px 270px; } /* Sidebar Left -----------------------------------------------------------------------------*/ .sl { float: left; width: 250px; margin-left: -100%; position: relative; } /* Footer -----------------------------------------------------------------------------*/ #footer { width: 900px; margin: -92px auto 0; height: 92px; background-image: url('/design/footer/footer.jpg'); } /*frames -----------------------------------------------------------------------------*/ #logo{ width:290px; height:104px; position: relative; left:35px } /*tv -----------------------------------------------------------------------------*/ #tv{ width:477px; height:323px; background-image: url('/design/body/tv.png'); position: relative; left:100px; top:20px; } /*news -----------------------------------------------------------------------------*/ #news{ width:416px; height:235px; position: relative; left:40px; top:20px; } /*profile -----------------------------------------------------------------------------*/ #profile{ float: left; width:269px; margin-left: 40px; height:375px; position: relative; background-image: url('/design/body/pergament.gif'); } /*userinfo -----------------------------------------------------------------------------*/ #userinfo{ width:210px; height:320px; margin-left: 30px; position: relative; top:30px; } /*gor-menu -----------------------------------------------------------------------------*/ #gor-menu{ width:900px; height:20px; float:left; margin-top:60px; position:relative; left:100px; } /*gor-menu ul -----------------------------------------------------------------------------*/ #gor-menu ul{ margin-op:40px; margin-left:40px; } /*fgor-menu li -----------------------------------------------------------------------------*/ #gor-menu li{ display:inline; margin-right:20px; padding-left:20px; padding-top:20px; } /*fgor-menu a -----------------------------------------------------------------------------*/ #gor-menu a{ color:#999999; }
Сообщение отредактировал shumaher1 - Понедельник, 11.01.2010, 19:24
Djekky
шептун
Группа: Проверенные
Пользователь №: 28
Сообщений: 70
Получено оценок: 11
shumaher1 , uCoz css в руки и работай с padding'ом картинок.
SinuS
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
shumaher1 , нужно заново перевёрстывать. По хорошему сам исходник страницы тоже нужен.Talk is cheap.
SinuS
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
Люди, помогите человеку У меня сессия сейчас, еще 2 экзамена осталось... Talk is cheap.
shumaher1
Группа: Удаленные
в dreamwiever пишет что сайт валиден...
BeSinLi
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (shumaher1 )
в dreamwiever пишет что сайт валиден...
А тут пишет что не валиден - validator.w3.org/check?uri=http://our-class.ru/&charset=(detect+automatically)&doctype=Inline&group=0
——————————-- „ Tempora mutantur, et nos mutamur in illis“ ——————————————— „ Si felix esse vis, este!“ ——————————————————————————————————————————————————————— старая аватарка
Сообщение отредактировал BeSinLi - Воскресенье, 10.01.2010, 19:33
shumaher1
Группа: Удаленные
nu tak pomogi lu46e... tem bolee dawe microsoft.com ne validen http://validator.w3.org/check?uri=http%3A%2F%2Fmicrosoft.com&charset= (detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654 etot va6 validator na6ol na nem 389 Errors, 32 warning(s) !!! kto-nibudj pomogite a ne tyrkajte v validnostj!Validnostj eto horo6o nu tak pogite najti validnoe re6enie etoj problemy! samyj validnyj sajt: Code
<html> <head> <title>Hello World</title> </head> <body> eto body sajta </body> </html>
i to ja dumaju validnostj ne projdet, vedj u 0.0001% poljzovatelej komp e6e kasetnyj i eto taki nado u4ityvatj pri verstke... Сообщение отредактировал shumaher1 - Воскресенье, 10.01.2010, 20:49
shumaher1
Группа: Удаленные
самое главное что когда захожу как админ всё ок! ползёт походу из-за банера юкоза!
BeSinLi
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (shumaher1 )
samyj validnyj sajt:
Представленный вами код не валиден...
Quote (shumaher1 )
i eto taki nado u4ityvatj pri verstke...
Зачем учитывать 0.0001% ? Мы ведь не с адронным коллайдером работаем.——————————-- „ Tempora mutantur, et nos mutamur in illis“ ——————————————— „ Si felix esse vis, este!“ ——————————————————————————————————————————————————————— старая аватарка
shumaher1
Группа: Удаленные
BeSinLi , помоги!Quote (BeSinLi )
Цитата (shumaher1) i eto taki nado u4ityvatj pri verstke...
это я "типо" пошутил... так тут кто-нибудь помочь может? проблема походу в том что с баннером футер ездить начинает, а этого быть не должно т.к. он должен быть прижат к низу страницы и не ездить короче до меня не допирает что делать.Сообщение отредактировал shumaher1 - Воскресенье, 10.01.2010, 22:12
BeSinLi
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (shumaher1 )
короче до меня не допирает что делать.
Если использовать логическое мышление то становится понятно что имеет смысл прижать футер к дну сайта.——————————-- „ Tempora mutantur, et nos mutamur in illis“ ——————————————— „ Si felix esse vis, este!“ ——————————————————————————————————————————————————————— старая аватарка
shumaher1
Группа: Удаленные
ххмм...а до меня это не дошло и я именно поэтому сюда пришол . BeSinLi как доктор хаус ставит диагноз не смотря в историю болезни, ты ХтМЛ смотрел? Сообщение отредактировал shumaher1 - Воскресенье, 10.01.2010, 22:21
Djekky
шептун
Группа: Проверенные
Пользователь №: 28
Сообщений: 70
Получено оценок: 11
shumaher1 ,а где в шаблоне копирайт uCoz? Так, для начала совет: Указывайте величину измерения в px.
Quote
<IMG SRC="design/head/frames.png" WIDTH=829 HEIGHT=230 BORDER=0 ISMAP USEMAP="#frames.png">
Сообщение отредактировал Djekky - Воскресенье, 10.01.2010, 23:17
shumaher1
Группа: Удаленные
копирайт я вставил вместо слова Copyright в списке <ul><li><li> Я выставил шаблон который в notepad++ собрал, ИМХО тот что я залил на юкоз и добавил $POWERED_BY$ отличается только одним: $POWERED_BY$ вместо Copyright.
shumaher1
Группа: Удаленные
админ, удаляй тему...Сообщение отредактировал shumaher1 - Понедельник, 25.01.2010, 21:10
Андрей
шептун
Группа: Проверенные
Пользователь №: 189
Сообщений: 65
Получено оценок: 11
У меня была подобная проблема, при заливке на uCoz в осле весь диз скашивался в лево, #...{margin:0 auto;} отказывался работать. Заменил DOCTYPE на DTD HTML 4.01 вроде все стало на свои места
ROUN-NONKS
Группа: Удаленные
Распространенная проблема новичков которые только приступают к верстке (или недавно начали этим заниматься) footer в наше время прижимать к низу браузера надо обязательно
Область служащая блоком (как я понял) должна быть правильно разрезана. Вы небось в полной картинке и оставили.
shumaher1
Группа: Удаленные
еще, в internet explorer сайт прижался влево. вот такой исходник страницы на юкозе:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>$SITE_NAME$ - $MODULE_NAME$</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="http://our-class.ucoz.lv/_st/my.css" /> </head> <body> $ADMIN_BAR$ <div id="wrapper"> <div id="header"> <div id="logo"> $GLOBAL_AHEADER$ </div><!-- #logo--> </div><!-- #header--> <div id="middle"> <div id="container"> <div id="content"> <div id="tv"> <div id="news"> $CONTENT$ </div><!-- #news--> </div><!-- #tv--> </div><!-- #content--> </div><!-- #container--> <div class="sidebar sl"> <IMG SRC="/design/body/books.png" WIDTH=333 HEIGHT=232 BORDER=0 ISMAP USEMAP="#books.png"> <MAP NAME="books.png"> <AREA SHAPE="RECT" COORDS="30,47,50,174" HREF="/forum" ALT="forum"> <AREA SHAPE="RECT" COORDS="54,48,67,174" HREF="/index/0-15" ALT="pravila"> <AREA SHAPE="RECT" COORDS="73,50,90,174" HREF="/load" ALT="shporgalki"> <AREA SHAPE="RECT" COORDS="94,50,106,173" HREF="/stuff" ALT="games"> <AREA SHAPE="RECT" COORDS="110,50,117,168" HREF="/" ALT="top"> <AREA SHAPE="RECT" COORDS="120,58,135,180" HREF="/index/konkursy/0-13" ALT="konkursy"> <AREA SHAPE="RECT" COORDS="140,56,152,180" HREF="/index/razvlechenija/0-54" ALT="razvle4enija"> <AREA SHAPE="RECT" COORDS="156,61,168,180" HREF="/gb" ALT="guestbook"> </MAP> <div id="profile"> <div id="userinfo"> $GLOBAL_DRIGHTER$ </div><!-- #userinfo --> </div><!-- #profile --> </div><!-- .sidebar.sl --> </div><!-- #middle--> </div><!-- #wrapper --> <div id="footer"> $GLOBAL_BFOOTER$ </div><!-- #footer --> </body> </html>
и CSS
Code
* { margin: 0; padding: 0; } html {height: 100%} body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; min-height: 100%; background-color:#663000; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p {margin: 0 0 18px} img { border: none; } input {vertical-align: middle} #wrapper { width: 900px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; background-image: url('/design/bg/bg.jpg'); } .wrapper { min-height:100%; height:auto !important; height:100%; margin:0 auto -4em; } /* Header -----------------------------------------------------------------------------*/ #header { height: 230px; } /* Middle -----------------------------------------------------------------------------*/ #middle { width: 100%; padding: 0 0 130px; margin: 0 auto; height: 1%; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 0 92px 270px; } /* Sidebar Left -----------------------------------------------------------------------------*/ .sl { float: left; width: 250px; margin-left: -100%; position: relative; } /* Footer -----------------------------------------------------------------------------*/ #footer { width: 900px; margin: -92px auto 0; height: 92px; background-image: url(/design/footer/footer.jpg) } /*frames -----------------------------------------------------------------------------*/ #logo{ width:290px; height:104px; position: relative; left:35px } /*tv -----------------------------------------------------------------------------*/ #tv{ width:477px; height:323px; background-image: url('/design/body/tv.png'); position: relative; left:100px; top:20px; } /*news -----------------------------------------------------------------------------*/ #news{ width:416px; height:235px; position: relative; left:40px; top:20px; overflow: auto; background-color:#ffffcc; } /*profile -----------------------------------------------------------------------------*/ #profile{ float: left; width:269px; margin-left: 40px; height:375px; position: relative; background-image: url('/design/body/pergament.gif'); } /*userinfo -----------------------------------------------------------------------------*/ #userinfo{ width:210px; height:320px; margin-left: 30px; position: relative; top:30px; overflow: auto; }
Сообщение отредактировал shumaher1 - Четверг, 28.01.2010, 14:12
Slimmi
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
Quote (shumaher1 )
в internet explorer сайт прижался влево
Я посмотрел сайт не прижимается А если Ты по Ие 5.5 то там не реализовано: Сам auto. По этому через margin не центрируешь Вот такой осел...Большие фотостатусы
shumaher1
Группа: Удаленные
я через IE8 смотрел, всё слева, но это не главное, главная проблема в хроме и сафари (в опере не проверял),ползёт футер((
Slimmi
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
Quote (shumaher1 )
я через IE8 смотрел
там вообщем юКозовский косяк Стоит реклама а потом доктайп. Сделай так:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>$SITE_NAME$ - $MODULE_NAME$</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="http://our-class.ucoz.lv/_st/my.css" /> </head> <body> <!--ОБЯЗАТЕЛЬ ПОСТАВЬ ЭТОТ КОД! Иначе бан...--><div>$BANNER_H$</div><!--Далее твой код-->
Большие фотостатусы Сообщение отредактировал Slimmi - Пятница, 29.01.2010, 17:53
shumaher1
Группа: Удаленные
Slimmi , спасибо! тему можно закрыть.