• Страница 1 из 1
  • 1
Помогите!Проблема с дизайном...
shumaher1
Дата: Воскресенье, 10.01.2010, 00:03 | Сообщение # 1
Группа: Удаленные
Сверстал сайт, сам по себе выглядит хорошо при любых обстоятельствах: ,
и вот что произошло когда я залил это всё на юкоз:
Вот 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
Дата: Воскресенье, 10.01.2010, 00:18 | Сообщение # 2
шептун
Группа: Проверенные
Пользователь №: 28
Сообщений: 70
Получено оценок: 11
shumaher1, uCoz css в руки и работай с padding'ом картинок.
  
SinuS
Дата: Воскресенье, 10.01.2010, 01:49 | Сообщение # 3
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
shumaher1, нужно заново перевёрстывать. По хорошему сам исходник страницы тоже нужен.

Talk is cheap.
  
SinuS
Дата: Воскресенье, 10.01.2010, 16:08 | Сообщение # 4
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
Люди, помогите человеку ;) У меня сессия сейчас, еще 2 экзамена осталось...

Talk is cheap.
  
shumaher1
Дата: Воскресенье, 10.01.2010, 19:17 | Сообщение # 5
Группа: Удаленные
в dreamwiever пишет что сайт валиден...
  
BeSinLi
Дата: Воскресенье, 10.01.2010, 19:32 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 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
Дата: Воскресенье, 10.01.2010, 20:35 | Сообщение # 7
Группа: Удаленные
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
Дата: Воскресенье, 10.01.2010, 21:07 | Сообщение # 8
Группа: Удаленные
самое главное что когда захожу как админ всё ок!
ползёт походу из-за банера юкоза!
  
BeSinLi
Дата: Воскресенье, 10.01.2010, 21:25 | Сообщение # 9
спикер
Группа: Проверенные
Пользователь №: 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
Дата: Воскресенье, 10.01.2010, 22:08 | Сообщение # 10
Группа: Удаленные
BeSinLi, помоги!
Quote (BeSinLi)
Цитата (shumaher1)
i eto taki nado u4ityvatj pri verstke...
это я "типо" пошутил... так тут кто-нибудь помочь может?
проблема походу в том что с баннером футер ездить начинает, а этого быть не должно т.к. он должен быть прижат к низу страницы и не ездить короче до меня не допирает что делать.


Сообщение отредактировал shumaher1 - Воскресенье, 10.01.2010, 22:12
  
BeSinLi
Дата: Воскресенье, 10.01.2010, 22:17 | Сообщение # 11
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (shumaher1)
короче до меня не допирает что делать.

Если использовать логическое мышление то становится понятно что имеет смысл прижать футер к дну сайта.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
shumaher1
Дата: Воскресенье, 10.01.2010, 22:20 | Сообщение # 12
Группа: Удаленные
ххмм...а до меня это не дошло и я именно поэтому сюда пришол <_< .
BeSinLi как доктор хаус ставит диагноз не смотря в историю болезни, ты ХтМЛ смотрел?


Сообщение отредактировал shumaher1 - Воскресенье, 10.01.2010, 22:21
  
Djekky
Дата: Воскресенье, 10.01.2010, 23:16 | Сообщение # 13
шептун
Группа: Проверенные
Пользователь №: 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
Дата: Воскресенье, 10.01.2010, 23:26 | Сообщение # 14
Группа: Удаленные
копирайт я вставил вместо слова Copyright в списке <ul><li><li>
Я выставил шаблон который в notepad++ собрал, ИМХО тот что я залил на юкоз и добавил $POWERED_BY$ отличается только одним: $POWERED_BY$ вместо Copyright.
  
shumaher1
Дата: Понедельник, 25.01.2010, 21:09 | Сообщение # 15
Группа: Удаленные
<_< админ, удаляй тему...

Сообщение отредактировал shumaher1 - Понедельник, 25.01.2010, 21:10
  
Андрей
Дата: Понедельник, 25.01.2010, 21:35 | Сообщение # 16
шептун
Группа: Проверенные
Пользователь №: 189
Сообщений: 65
Получено оценок: 11
У меня была подобная проблема, при заливке на uCoz в осле весь диз скашивался в лево, #...{margin:0 auto;} отказывался работать.
Заменил DOCTYPE на DTD HTML 4.01 вроде все стало на свои места
  
ROUN-NONKS
Дата: Вторник, 26.01.2010, 07:34 | Сообщение # 17
Группа: Удаленные
Распространенная проблема новичков которые только приступают к верстке (или недавно начали этим заниматься)

footer в наше время прижимать к низу браузера надо обязательно

Область служащая блоком (как я понял) должна быть правильно разрезана. Вы небось в полной картинке и оставили.

  
shumaher1
Дата: Четверг, 28.01.2010, 13:45 | Сообщение # 18
Группа: Удаленные
еще, в 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
Дата: Четверг, 28.01.2010, 17:17 | Сообщение # 19
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
Quote (shumaher1)
в internet explorer сайт прижался влево

Я посмотрел :v сайт не прижимается :) А если Ты по Ие 5.5 то там не реализовано:
Code
margin: 0 auto;

Сам auto. По этому через margin нецентрируешь :( Вот такой осел...


Большие фотостатусы
  
shumaher1
Дата: Четверг, 28.01.2010, 19:59 | Сообщение # 20
Группа: Удаленные
я через IE8 смотрел, всё слева, но это не главное, главная проблема в хроме и сафари (в опере не проверял),ползёт футер((
  
Slimmi
Дата: Пятница, 29.01.2010, 17:53 | Сообщение # 21
говорун
Группа: Модераторы
Пользователь №: 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
Дата: Суббота, 30.01.2010, 23:08 | Сообщение # 22
Группа: Удаленные
Slimmi, спасибо! up тему можно закрыть.
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.