Мой первый сайт

ZHANNA · November 10, 2012

Привет.

Оцените мой сайт пожалуйста!

http://www.toy-prezent.ru

Это мой первый сайт.

Очень прошу указать на недостатки.

Обучалась самостоятельно по сайту htmlbook.ru.

Вся проблема в том что я не вижу ошибок

Я понимаю что они есть но не знаю где

Может кто то хотя бы укажит на явные

В самостоятельном обучении много минусов, не кому указать на ошибки и не понимание темы.

Шаблон нарисовала моя подруга может он примитивен но так как я новичок решила учиться на нем.

Очень хочу научиться делать качественные сайты.

Очень надеюсь на Вашу помощь

Вот код моего сайта

Код:

body {
    font: 10pt Myriad Pro, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #E5B882; /* Цвет фона */
    margin: 0;
    padding:0;
   }
   H1 {
  color: #C0555A;
  font-size: 16pt;      Заголовок размером 15 пункта
  text-align: left;
   }
   h2 {
    font-size: 13pt; /* Размер шрифта */
    color: #800040; /* Цвет текста */
    margin-top: 5; /* Отступ сверху */
    text-align: center; /* Выравнивание по центру */
   }
 #container {position:absolute;top:10px;left:110px;
    width: 1024px; /* Ширина слоя */
    margin: 0 auto; /* Выравнивание по центру */
    background: #f0f0f0; /* Цвет фона левой колонки */
  }
#header {
   background: #E5B882; /* Цвет фона шапки */
    padding: 5px; /* Отступы вокруг текста */
}
   #text {position:absolute;top:55px;left:170px;z-index:100; 
          font-family: Myriad Pro;
}  

 #text-shapka {position:absolute;top:152px;left:25px;z-index:100;
   font-family: Myriad Pro, Helvetica, sans-serif; 
        text-align: left; /* Выравнивание по левому краю */
   line-height: 2.2; /* Межстрочный интервал */
   }  

#sidebar {
    margin-top: 0px;/* Отступ сверху */
    padding: 7px; /* Отступы вокруг текста */
    width: 414px;
    float: left; /* Обтекание по правому краю */
 }

 #knopki {position:absolute;top:290px;left:30px;z-index:100; 
          text-align: left; /* Выравнивание по левому краю */
 }  

#text-knopka {position:absolute;top:272px;left:155px;z-index:100;
   font-family: Myriad Pro, Helvetica, sans-serif; 
        text-align: left; /* Выравнивание по левому краю */
   line-height: 1.42; /* Межстрочный интервал */
       font-size: 15pt;
}  

#content {
    margin-left: 414px; /* Отступ слева */
    padding: 10px; /* Поля вокруг текста */
    background: #fff; /* Цвет фона правой колонки */
    width: 600px;
  }

#tekst {
font-size: 12pt;
margin-left: 45px; /* Отступ слева */
}

.photo {

    border: 1px solid #FFFFFF;   
    height: 155px;
    width: 155px;
    border: 2px solid #A5C739; /* Рамка вокруг фотографии зеленая*/   
    padding: 10px 10px; /* Поля сверху и снизу */
    padding-left: 0px;
    padding-right: 0px;
   display: inline-block; /* Строчно-блочный элемент */
    background: #A5C739; /* Цвет фона зеленая*/       
    margin-bottom: 15px; /* Отступ снизу */
    margin-left: 25px; /* Отступ слева */
   -moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
    text-align: center; /* Выравнивание текста по центру *
   }
  .photo img {
    border: 2px solid #8b8e4b; /* Параметры рамки хаки*/   
   }
   .photo p {
    margin: 0; /* Убираем отступы вокруг абзаца */
   padding-top: 0px; /* Расстояние от рисунка до текста */
 font-size: 10pt; /* Размер шрифта */
 color: #000000; /* Цвет текста */
   }

.photo A { color: #f00; }
.photo A:hover { color: #A5C739; }

 #footer { width: 1024px; /* Ширина слоя */
    margin: 0 auto; /* Выравнивание по центру */
    background: #C0555A; /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
    clear: left; /* Отменяем действие float */
 }

 a { 
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   } 
 A:link { 
    color: #000; /* Цвет непосещенных ссылок как фон черный*/     
   }
   A:visited { 
    color: #C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/    
   }
   A:hover { 
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши красный*/    
   }
   A:active { 
    color: #ff0; /* Цвет активных ссылок синий*/    
   }
A.tag { 
    color: #fff; /* Цвет ссылок белый*/   
     }

A.tag2 {       /* Ссылка с классом таг */
    color: #f00; /* Цвет текста красный*/      
    padding-left: 35px; /* Смещаем текст вправо */
   } 

A.tag3 { 
    color: #A5C739; /* Цвет ссылок зеленый*/   
   }

  A.tag4 { 
    color: #000; /* Цвет ссылок черный*/  
    padding-left: 45px; /* Смещаем текст вправо */ 
   }



И 


<!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">

<html>

<head>

<title>Букеты из мягких игрушек</title>
<meta name="description" content="Букеты из мягких игрушек">
<meta name="keywords" content="Оригинальные подарки, Необычные подарки.">

<meta http-equiv="content-type" content="text/html; charset=utf-8">


<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>


<body>

<div id="container">

<div id="header"><img src="img/head.jpg"  width="1024" height="248" alt="подарки"/></div>


<div id="text"><h1><a href="http://www.toy-prezent.ru"> Оригинальные букеты<br>из мягких игрушек</a></h1></div> 

<div id="text-shapka">

<a href="8.html"  class="tag">Регистрация/Вход </a>                  
                          

<a href="9.html"  class="tag">КОРЗИНА</a><br>

<a href="8.html"  class="tag2">Имя</a><br>
<a href="8.html"  class="tag2">Пароль</a>

</div> 


<div id="sidebar"><img src="img/fon knopki.jpg"  width="397" height="380" alt="подарки"/> </div>

<div id="knopki">
<img src="img/knopka2.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/><br><br>
<img src="img/knopka.png"  width="300" height="30" alt="подарки"/>

</div> 



<div id="text-knopka">
    <p><a href="index.html" class="tag4">Фотогалерея</a></p>
    <p><a href="2.html" class="tag">Контакты</a></p>
    <p><a href="3.html" class="tag">Доставка</a></p>
    <p><a href="4.html" class="tag">Оплата</a></p>
    <p><a href="5.html" class="tag">Робокасса</a></p>
    <p><a href="6.html" class="tag">О нас</a></p>
    <p><a href="sitemap.html" class="tag">Катра сайта</a></p>
</div>


 <div id="content">
    <h2>Букеты из мягких игрушек</h2>
    <ul>
     <li>Букеты из мягких игрушек - все они несут совершенно разные эмоции. 
Но  какими бы разными они не были, все же у букетов из игрушек есть одно общее свойство – они наши безотказные «улучшатели настроения».
 Как волшебные гномы они дарят чувства уюта и покоя, мир кажется добрым и радостным. А все наши проблемы не такими уж и страшными.</li>
     <li>И, наконец, самое важное - он произведение искусства.</li>
     <li>Так пускай повсюду на земле, словно чудо, появляются букеты из игрушек! </li>
 </ul>

 <br/> 



<div class="photo">
   <p class="caption">Очарование</p>
      <p><a target="_blank" href="1.JPG" class="tag3"><img src="1.JPG" alt="Букет из игрушек" title="Букет из игрушек Очарование" width="145" height="130"></a></p>
      <p class="caption"> d35см - 2 000руб</p></div>

<div class="photo">
   <p class="caption">Королева сердец</p>
     <p><a target="_blank" href="2.jpg" class="tag3"><img src="2.jpg" alt="Букет из мягких игрушек" title="Букет из мягких игрушек Королева сердец" width="145" height="130"></a></p>
   <p class="caption"> d40см - 3 000руб</p></div>

<div class="photo">
   <p class="caption">Ласковая фея</p>
      <p><a target="_blank" href="3.JPG" class="tag3"><img src="3.JPG" alt="Букеты из игрушек" title="Букеты из игрушек Ласковая фея" width="145" height="130"></a></p>
   <p class="caption"> d30см - 1 500руб</p></div>



<div class="photo">
   <p class="caption">Колдунья</p> 
     <p><a target="_blank" href="4.jpg" class="tag3"><img src="4.jpg" alt="Букеты из мягких игрушек" title="Букеты из мягких игрушек Колдунья" width="145" height="130"></a></p>
   <p class="caption"> d30см - 1 500руб</p></div>

<div class="photo">
   <p class="caption">Флоренция</p>  
   <p><a target="_blank" href="5.jpg" class="tag3"><img src="5.jpg" alt="Оригинальный букет из игрушек" title="Оригинальный букет из игрушек Флоренция" width="145" height="130"></a></p>
   <p class="caption"> d25см - 1 200руб</p></div>

<div class="photo">
   <p class="caption">Лунная соната</p>
    <p><a target="_blank" href="6.jpg" class="tag3"><img src="6.jpg" alt="Необычный букет из игрушек" title="Необычный букет из игрушек Лунная соната" width="145" height="130"></a></p>
   <p class="caption"> d30см - 1 200руб</p></div>



</div>


 <div id="footer">© Copyright © http://www.toy-prezent.ru - <a href="http://www.toy-prezent.ru" class="tag">Букеты из мягких игрушек</a>
тел.8 (495) 760 03 08
</div>
  </div> 



 </div> 
   </div> 



 </body>
</html>

Edited November 10, 2012 by alexriz
Достаточно ссылки в данном случае

ShumNo · November 10, 2012

А вы сами заходили на свой? сайт? там же кракозябры))

в разметке <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">

а на деле utf-8

Если вы хотите отделить один абзац текста от другого, то для этого используют <p> а не li

какая-то ерунда выше доктайпа

в коде конечно же хватает всякого ненужного, но все поправимо

ZHANNA · November 10, 2012

utf-8 да спасибо поправила на всех станицах правильно а на главной почему то было windows-1251 уже исправила

заходила и видела что там кракозябры сижу читаю голова пухнит вроде все делаю как написано

и не поняла

какая-то ерунда выше доктайпа

вроде там ничего нет

а можно пожалуйста подробнее что не нужное

Спасибо

logicface · November 10, 2012

Лучше пока что вместо id использовать class для всех элементов. Все картинки которые не относятся к контенту ( например кот в корзине ) не должны быть картинками, а должны быть bg-img.

Там где у вас написано - Регистрация/вход, корзина, поле для заполнения логина там, какие то непонятные ссылки что то делают.

К ссылкам <a> лучше добавлять атрибут :hover.

Неправильно сделано меню там где контакты, доставка и так далее, оно должно быть сделано с помощью списка <ul>.

Вообще я бы посоветовал, так как я сам новичек, попробывать сделать этот же сайт вам, но не использовать ни 1 тега <p>. Вы его используете везде где только надо и где нет.=)

В html документе лучше не задавать значений картинкам (height, width) для это есть css. Можно использовать style="Имя" для всех картинок с одинаковыми параметрами.

По расположению дивов ничем подссказать не могу, так как сам еще в процессе обучения и не могу ясно видеть картину.=DDDD

FEL · November 11, 2012

Все картинки которые не относятся к контенту ( например кот в корзине ) не должны быть картинками, а должны быть bg-img.

Интересно, почему?

logicface · November 11, 2012

Было написано что это для роботов хорошо, мол левым элементам не надо прописывать alt, что бы как можно меньше захламлять контент.=)

Tsybin · November 14, 2012

А чего, весьма мило :blush: Чувствуется женская рука!

pismenny · November 14, 2012

Для полного счастья, я рекомендую найти в интернете два курса от "Специалиста" по HTML и CSS. Курсы, которые выложены в сети, ведёт очень хороший преподаватель - Евгений Петров. Они, конечно, немного устарели из-за того, что уже активно используется HTML5,а там HTML 4.01, но это не существенно. Основу Евгений Петров даёт очень хорошую. Плюс во втором курсе затрагиваются такие вопросы, как: основы юзабилити, использование Fireworks и т.д. И в конце второго курса они верстают макет сайта, наглядно можно видеть весь процесс.

Потому что, на самом деле, ошибки хотя и поправимы, но они есть и их много. А для того чтобы поправить эти ошибки, нужно структурировать свои знания и понять основы "дзен-вёрстки".

P.S.

Конечно я бы мог описать все ваши недочёты, но это будет слишком обширная работа, а времени и сил жалко.

Если глобально:

- Задавать такую сплошную картинку в "шапке" неправильно, да и вообще "шапка" неправильная - телефон изменился или почта изменилась, и что делать? Хочешь отправить почту, а ссылки-то нет, нужно вручную всё набирать.

- Формы входа/регистрации тоже так не нужно делать, для этого есть специальные теги.

- Меню и подложку так не нужно делать, меню желательно запихнуть в <ul>, а не в отдельные параграфы.

- Вот так тоже делать бессмысленно.


HTML:
<div id="footer">
© Copyright © www.toy-prezent.ru -
<a class="tag" href="http://www.toy-prezent.ru">Букеты из мягких игрушек</a>
тел.8 (495) 760 03 08
</div>

CSS:
A.tag {
    color: #FFFFFF;
}

Вместо этого лучше сделать так:


HTML:
<div id="footer">
© Copyright © www.toy-prezent.ru -
<a href="http://www.toy-prezent.ru">Букеты из мягких игрушек</a>
тел.8 (495) 760 03 08
</div>

CSS:
#footer a {
    color: #FFFFFF;
}

И добавить - text-decoration: underline;

Хотя я не совсем понял зачем вообще там ссылка.

Поэтому ищите в интернете курсы, о которых я упомянул выше, читайте больше хороший статей (например на htmlbook, habrahabr, web-standards), а потом приходите сюда снова, только уже с переосмысленными взглядами на вёрстку.

ZHANNA · November 17, 2012

спасибо за подробный ответ

Переверстала уже 3 раза сайт все время какая то ерунда то одно то другое

скачала по вашему совету 2 курсу вот уезжаю в командировку беру с собой для изучения

Надеюсь что пойму все свои ошибки и выложу уже приличный сайт за который не будет стыдно

pismenny · November 17, 2012

Главное проверьте чтобы видео воспроизводилось, там обычно g2m кодек к этим курсам нужен.

А про перевёрстывания - это не страшно и постыдного в этом ничего нет. Главное чтобы в конечном итоге вы были довольны собой, остальных не особо волнует.

Николя223 · November 20, 2012

очень мило. верстку не буду судить..

Напишу только, что ссылки в меню лучше расстянуть по <li>, чтобы ссылка срабатывала при наведении на весь участок...

Оё ёй (глянул код) - не надо так делать )))

Меню лучше прописывать так:


<ul>
   <li><a>ссылка</a></li>
   <li><a>ссылка</a></li>
   <li><a>ссылка</a></li>
   <li><a>ссылка</a></li>
</ul>

И да - лучше всего в данном случае картинку в меню делать фоном.

или на крайней случай, если всё таки решите их оставить:


<ul>
   <li><a  href=''><img src='' alt=''></a></li>
   <li><a  href=''><img src='' alt=''></a></li>
   <li><a  href=''><img src='' alt=''></a></li>
   <li><a  href=''><img src='' alt=''></a></li>
</ul>

их бы ещё javascriptom украсить на событии onmousedown="" (при нажатии на картинку) она менялась на чуть потемнее (как будто нажатие кнопки) и смещалась немного вниз и вправо, на событии onmouseup="" возращалась назад (ну это на будующее)))

ну hover задать.. или (не знаю почему, но я с картинками больше люблю onmousehover)

потом что ещё в глаза бросается - абсолютное позиционирование. (на мониторах с разным разрешением браузеры будут либо обрезать часть сайта, либо отображать в левом углу) не красиво ))))) лучше для большинства элементов использовать relative, тогда и сайт можно будет резиновым делать

знаете, мне оочень понравился элемент - чекбокс супер)

зделайте две картинки с чекбоксом с галочкой анимированной галочкой(gif анимация, как будто при клике она рисуется) и без (если вы реально будете этот сайт делать, а не написали и забыли)))

там по идее должна быть форма (ну вы потом уже до этого дойдете), и в ней я предлагаю сделать ещё чекбокс, который будет скрыт.

Фишка в чём, при нажатии на картинку с псевдо чекбоксом, его параметры будут передаваться настоящему чекбоксу будет просто класс))

учитесь )) на самом деле оочень много ошибок, но для первого раза нормально.

ну если у вас с версткой вообще никак не получиться - у вас все шансы быть дизайнером. Очень хорошо цветовую гамму чувствуете))

Edited November 20, 2012 by Николя223

krasnyi · November 28, 2012

1. Не понравилось, что текст меню выровнен по центру, но та старница, на которой находимся - текст пункта меню выровнен в правую сторону

2. слишком аляповато - почитайте о сочетаемости цветов

3. уменьшите шрифты

Понравился котик

ZHANNA · December 14, 2012

Прослушала первый курс по вашему совету HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C Специалист

Очень понравилось все очень доходчиво

Сейчас начну второй

Сайт переверстала

Оцените стало лучше

Конечно я пока много не умею и оставила некоторые вещи на потом но хочется услышать критику специалистов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Букеты из мягких игрушек</title>

</head>

<body>

<div id="text"><h1><a href="http://www.toy-prezent.ru"> Оригинальные букеты<br>из мягких игрушек</a></h1></div>

<a href="8.html">Регистрация/Вход</a>

<a href="9.html">КОРЗИНА</a><br>

<a href="8.html" class="tag">Пароль</a>

</div>

<ul>

<li><a href="index.html" class="tag2">Фотогалерея</a></li>

<li><a href="2.html">Контакты</a></li>

<li><a href="3.html">Доставка</a></li>

<li><a href="4.html">Оплата</a></li>

<li><a href="5.html">Робокасса</a></li>

<li><a href="6.html">О компании</a></li>

<li><a href="sitemap.html">Катра сайта</a></li>

</ul>

</div>

<h2>Букеты из мягких игрушек</h2>

<ul>

<li>Букеты из мягких игрушек - все они несут совершенно разные эмоции.

Но какими бы разными они не были, все же у букетов из игрушек есть одно общее свойство – они наши безотказные «улучшатели настроения».

Как волшебные гномы они дарят чувства уюта и покоя, мир кажется добрым и радостным. А все наши проблемы не такими уж и страшными.</li>

<li>И, наконец, самое важное - он произведение искусства.</li>

<li>Так пускай повсюду на земле, словно чудо, появляются букеты из игрушек! </li>

</ul>

<br>

<p>Очарование</p>

<p>d40см - 2 000руб<br><b><a href="7.html">Купить</a></b></p></div>

<p>Королева сердец</p>

<p> d45см - 3 000руб<br><b><a href="7.html">Купить</a></b></p></div>

<p>Ласковая фея</p>

<p> d30см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div>

<p>Колдунья</p>

<p> d32см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div>

<p>Флоренция</p>

<p> d28см - 1 700руб<br><b><a href="7.html">Купить</a></b></p></div>

<p>Лунная соната</p>

<p> d30см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div>

</div>

тел.8 (495) 760 03 08

</div>

</body>

</html>

и код css

html { background: #E5B882; /* Цвет фона */

}

body {

font: 10pt Myriad Pro, Helvetica, sans-serif; /* Шрифт на веб-странице */

margin: 0; /* внешний отступ */

padding-top: 10px; /* отступ с верху */

}

#container{ width:1024px; /* Ширина слоя */

margin:auto; /* Выравнивание по центру */

position:relative;

}

#header{ background:url(../img/head.jpg) ; /* Цвет фона шапки */

height:249px;

}

#footer{

background: #C0555A; /* Цвет фона подвала */

color: #fff; /* Цвет текста */

margin:0; /* внешний отступ */

padding: 5px 5px; /* внутренний отступ от текста*/

}

#footer a{ color:#fff; /* Цвет посещенных ссылок как фон под кнопками белый*/

}

#footer a:hover{ color:#A5C839; /* Цвет посещенных ссылок зеленый*/

}

h1 {

color: #C0555A; /* Цвет текста */

font-size: 16pt; /*Заголовок размером 15 пункта*/

}

h2 {

font-size: 13pt; /* Размер шрифта */

color: #800040; /* Цвет текста */

text-align: center; /* Выравнивание по центру */

}

#text { position:absolute;

top:40px;left:160px;

font-size: 12pt;

}

#text a{ color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/

}

#text-shapka { position:absolute;

top:145px;left:30px;

text-align: left; /* Выравнивание по левому краю */

line-height: 2.3; /* Межстрочный интервал */

}

#text-shapka a {color:#fff; /* Цвет ссылок белый*/

}

#text-shapka a:hover{ color:#A5C839; /* Цвет посещенных ссылок зеленый*/

}

#text-shapka a.tag{color:#f00; /* Цвет текста красный*/

}

#center{ background: #f0f0f0; /* Цвет фона серый */

margin:10px 0; /*чтобы отодвинуть фон от края*/

}

#left{ float:left; /* Обтекание по правому краю */

width:390px;

background: #C0555A; /* Цвет фона левой колонки коричневый */

margin: 10px 5px; /* внешний отступ */

font-size: 13pt; /*Заголовок размером 15 пункта*/

}

#left a {

background: url("../img/knopka grin.png") no-repeat ;

}

#left ul li a {

padding: 9px 50px 12px 15px; /* Отступ кнопки между собой */

background: url("../img/knopka red.png")no-repeat;

text-transform: uppercase; /* текст будет большими буквами */

display: block;

}

#left ul li a.tag2 {

background: url("../img/knopka grin.png")no-repeat;

}

#left ul li a:hover {

background: url("../img/knopka grin.png") no-repeat ;

color: #f00; /* Цвет ссылок при наведении на них курсора мыши красный*/

}

li {list-style:none;

}

#right{ margin:0 407px; /*чтобы отодвинуть фон от края*/

background:#fff; /* Цвет фона белый */

width:615px;

padding-top: 10px; /* Расстояние до текста */

}

a {

text-decoration: none; /* Отменяем подчеркивание у ссылки */

}

a:link {

color: #fff; /* Цвет непосещенных ссылок белый*/

}

a:hover {

color: #f00; /* Цвет ссылок при наведении на них курсора мыши красный*/

}

a:visited {

color: #fff; /* Цвет посещенных ссылок белый*/

}

a.tag2 {

color: #000; /* Цвет ссылок черный*/

margin-left: 35px;

text-align: center; /* Выравнивание текста по центру */

}

.photo {

height: 175px;

width: 155px;

border: 0;/* Рамка вокруг фотографии*/

padding: 10px 5px; /* Поля сверху и снизу */

display: inline-block; /* Строчно-блочный элемент */

background: #A5C739; /* Цвет фона зеленая*/

margin-bottom: 15px; /* Отступ снизу */

margin-left: 25px; /* Отступ слева */

-moz-border-radius: 5px; /* Для Firefox 3 */

-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */

border-radius: 5px; /* Для современных браузеров */

text-align: center; /* Выравнивание текста по центру */

}

.photo img {

border: 2px; /* Параметры рамки*/

height: 130px;

width: 145px;

}

.photo p {

margin: 0; /* Убираем отступы вокруг абзаца */

}

#content a {color:#F8EED4; /* Цвет ссылок беж*/

}

#content a:hover{color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/

}

p{ margin-left: 45px; /* Отступ слева */

}

#content a.mail {color:#C0555A; /* Цвет посещенных ссылок бордовый*/

}

#content a.mail:hover {color:#A5C839; /* Цвет посещенных ссылок бордовый*/

}

#karta a { color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/

}

#karta a:hover { color:#A5C839; /* Цвет посещенных ссылок зеленый*/

}

#zakaz { margin-left: 45px; /* Отступ слева */

margin-top: 35px; /* Отступ сверху */

}

FEL · December 15, 2012

2ZHANNA

Лично я даже внимания на ваш код не обратил.

Заливайте страничку на какой нибудь хостинг и предоставляйте только лишь ссылку, а смотреть на код, который даже не в специальном теге, совсем нет желания. Еще и ссылками на картинки которые локально находятся у вас.

Николя223 · December 15, 2012

Жанна, я ту галочку запилил, про которую писал

пример

код

Edited December 15, 2012 by Николя223

ZHANNA · December 15, 2012

Вот ссылка

http://www.toy-prezent.ru

ZHANNA · December 16, 2012

Спасибо за галку просто супер обязательно сделаю

Pawel.rsk · December 22, 2012

Шрифты с двойными азваниями указываються в скобках. Тоесть font: Verdana , но font:"Myriad pro"

IUaD · January 5, 2013

на главной странице ошибка) вместо "карта сайта" написано "катра сайта" ))

ZHANNA · January 13, 2013

спасибо поправила

ZHANNA · January 13, 2013

В Internet Explorer 6 и 7 сайт отображается некорректно я в шоке

Получается я должно освоить еще целую науку что бы подогнать сайт под них

У меня вопрос не лучше все же верстать сайт таблицами что бы хотя бы не плыл каркасас

Вчера решала вопрос с фотографиями и почему то пропал фон кнопок не пойму в чем дела

Цвет кнопок пропал до 8 Explorer включительно

itspider · January 22, 2013

для тестирования под разные версии IE рекомендую IETester

если будете продвигать сайт h1 слишком высоко стоит

Николя223 · January 22, 2013

скорее всего использовали чтото характерное для html 5 )) не получается дивами - верстайте таблицами)) Под IE6-7 можно уже не подстраиваться - работало бы в IE8))

понял - у вас изображения на фотографиях с альфа-каналом. старый IE не поддерживает (хотя IE 8 вроде работал); для них есть фильтры специальные

Edited January 22, 2013 by Николя223

Sign In

Мой первый сайт

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information