Перейти к содержимому

Реферальная программа Мегаплана


Ошибка при создании CSS

#1 Тарасов Роман

Тарасов Роман
  • Пользователь
  • 524 сообщений
  • Репутация: 83
0

Отправлено 23 Декабрь 2015 - 03:18

Здравствуйте! Где-то допустил косяк, не пойму где. Подскажите.

 

Прикрепленные файлы

  • Прикрепленный файл  main.css   1,44К   Количество загрузок: 76

 

body{
  background: url("../images/bg.png") no-repeat;
  background-size: cover;
  font-family: Tahoma, Arial, "Times New Roman";
  font-size: 10pt;
  margin: 0;
  padding: 0;
  }
  
  #clear {
  clear: both;
  }
  
  #container {
  margin: auto;
  width: 913px;
  }
  
  #topmenu {
  margin: 20px 0 10px;
  }
  
  #topmenu a{
  color: #eb9052;
  margin: 0 40px;
  padding:10px 5px;
  text-decoration: none;
  }
  
  #news {
  background-color: #e6e6e6;
  border-color: #ededeb;
  border-style: solid;
  border-width: 1px;
  padding: 10px 20px;
  width: 222px;
  }
  
  #news h2 {
   background: url ("../images/new_icon_18.png") no-repeat;
   color: #f77800;
   margin: 5px 0 0;
   padding-left: 15px;
   }
   
  #news p {
   font-size: 90%;
   margin: 15px;
   } 
   
  #news p date {
  color: #39729c;
  font-weight: bold;
  }
  
  #content {
  margin-top: 5px;
  }
 /*это комментрарий*/
  #left-column{
  float: left;
  margin-right: 100px;
  width: 200px;
  }
  
 
  #content{
margin-top: 20px;
  }
 
  
  #right h1 {
  color:#eb9052;
  font-weight: normal;
  margin: 0 0 10px;
  }
  
  #right p {
  margin:8px 0px;
  }
  /*комментарий лигт*/
 
 #right {
  margin-left: 10px;
  }
  
  
  #footer {
  background-color:#209af2;
  width:100%;
  }
  
  #footer p {
  color:;
  font-size: 80%;
  margin: 0;
  text-align: center;
  }
  вот код вне файла.

 

  • 0

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 23 Декабрь 2015 - 08:26

@Тарасов Роман, а что конкретно искать? в чем косяк выражается? и в чем он проявляется?

 

В коде вне файла у color не стоит значение...

  #footer p {   color:;   font-size: 80%;   margin: 0;   text-align: center;   }

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 Тарасов Роман

Тарасов Роман
    Topic Starter
  • Пользователь
  • 524 сообщений
  • Репутация: 83

Отправлено 23 Декабрь 2015 - 16:50

Проблема в том, что правый блок упорно находится под левым, а не рядом.

Прикрепленные изображения

  • skrin.jpg

Сообщение отредактировал Тарасов Роман: 23 Декабрь 2015 - 16:50

  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 23 Декабрь 2015 - 18:26

правый блок упорно находится под левым, а не рядом
Надо смотреть вёрстку в комплексе с css, по одним стилям не понять. Первое что нужно проверить - свойство display. Судя по скриншоту есть подозрение что блок новостей оформлен в виде <div> со свойством display:block; (по умолчанию), поэтому и занимает "всю ширину экрана" (контейнера).

Хотя причина может быть и в ошибках разметки - проверьте валидность кода: это хороший инструмент для обнаружения ошибок вызванных пропущенными или незакрытыми тегами...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 23 Декабрь 2015 - 22:40

Если будет ссылка на сайт, наверное смогу помочь. 


Если нужно в ряд, можно при помощи float. И не забыть заюзать clearfix. 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#6 Тарасов Роман

Тарасов Роман
    Topic Starter
  • Пользователь
  • 524 сообщений
  • Репутация: 83

Отправлено 24 Декабрь 2015 - 02:28

@ShowPrint, к сожалению не нашел ничего толкового по поводу display:block. Где и как его применять. Только справочная информация.

проверил CSS на валидность.


40

#news h2

Ошибка значения : background url не является значением background-color : url

40

#news h2

Ошибка разбора ("../images/new_icon_18.png") no-repeat;

46

 

Ошибка разбора [: #f77800; margin: 5px 0 0; padding-left: 15px; } #news p]

93

#footer p

Ошибка значения : color Ошибка разбора :

 

 

вот код страницы HTML

 

<DOCTYPE HTML>
<html>
<head>
 <title>о проекте</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 <meta name="description" content=""/>
 <meta name="keywords" content=""/>
 <link type="text/css" rel="stylesheet" href="styles/main.css"/>
 </head>
<body>
  <div id="container">
    <div id="topmenu">
<table>
 <tr> 
  <td>
   <a href="index.html">Главная</a>
</td>
<td>
<a href="about.html">О проекте</a>
</td>
<td>
<a href="contacts.html">контакты</a>
</td>
<td>
<li class="sub"><a href="staty.html">статьи</a></li>
<ul class="sub">
<li>
<a href = "skiing.html">лыжи</a>
</li>
<li>
<a href="skates.html">коньки</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
   <div id="logo">
 <img src="images/logo_08.png" alt="Лого"/>
  </div>
  <div id="content">
   <div id="left" float="left">
    <div id="news">
<h2>новости</h2>
<div class="new">
<p class="date">03 ноября 2015</p>
<p><b>Много работал.</b><br/>причем эффективно</p>
</div>
<div class="new">
<p class="date">02 ноября 2015</p>
<p><b>Замечательный день</b><br/> просто отличный</p>
</div>
<div class="new">
<p class="date">01 ноября 2015</p>
<p><b>неплохо провел день</b><br/>хорошая погода</p>
</div>
</div>
  <div align="right">
    <div id="article">
<h1>о проекте</h1>
<p>Проект создан блоггером <a href="">Романом Тарасовым.</a> Целей у него несколько.</p>
<p>Основная это популяризация здорового образа жизни. Здесь предложены зимние варианты для занятий спортом. 
Если вы после посещения этого сайта решите <b>научиться кататься на лыжах</b>, то это будет просто замечательно.</p>
<p>Другая цель это рассказ о возможностях зимнего отдыха.
Как известно в нашей стране имеются длительные зимние каникулы.
Которые по традиции проводятся в обильных застольях. 
На самом деле зимой можно прекрасно проводить время на свежем воздухе с пользой для здоровья.</p>
<p>Напоследок автор надеется, что найдутся люди, которые поддержат его в 
развитии спортивного движения в нашей стране.
Для них подробная информация имеется на странице <a href="contacts.html"> контакты.</a></p>
   </div>
</div>
  </div>
  </div>
  <div class="clear"></div>
  </div>
  <div id="footer">
  <p>все права защищены</p>
  </div>
  </body>
</html>
 
Буду рад любым подсказкам.

Сообщение отредактировал Тарасов Роман: 24 Декабрь 2015 - 02:28

  • 0

#7 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 24 Декабрь 2015 - 09:03

@Тарасов Роман, ну так надо начинать исправлять ошибки, может проблемы и уйдут...

 

При "беглом" (не вникая) просмотре кода:

1. CSS, как уже писал:

  #footer p {
  color:;
  font-size: 80%;
  margin: 0;
  text-align: center;
  }

Надо задать значение цвета...

 

2. doctype разве пишется без знака "!", вроде бы должно быть так:

<!DOCTYPE HTML>

Нэ?

 

3. Если верстка на html5, то вроде как (если ничего не путаю) нет необходимости закрытия НЕ парных тегов типа meta, link, img и т.д. в виде "/>", то есть можно (или нужно?) просто писать:

<meta name="keywords" content="">

Ищите и исправляйте ошибки на которые указывает валидатор и смотрите на результат...

По свободе посмотрю код вдумчиво, если не решите проблему сами, или @TimurR сразу не увидит "где собака порылась"...


  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 Тарасов Роман

Тарасов Роман
    Topic Starter
  • Пользователь
  • 524 сообщений
  • Репутация: 83

Отправлено 25 Декабрь 2015 - 20:51

@ShowPrint, Проверил все на валидаторе. Заметил интересную особенность Правый блок совсем не реагирует на изменения цвета, положение меняет только вместе с левы. То есть они смещаются вместе.

 

По Html коду возник вопрос.

 

 ErrorThe align attribute on the div element is obsolete. Use CSS instead.

From line 59, column 3; to line 59, column 21

</div> <div align="right"> <

 

 

Что за ошибка и как устранить?

Заранее спасибо за ответ! 


  • 0

#9 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 25 Декабрь 2015 - 21:00

Что за ошибка и как устранить?
Атрибут align в последнее время не является рекомендуемым к использованию. Его положение на странице предпочтительно устанавливать через css, что собственно и написано.

Чаще всего для этого используется margin, а для выравнивания по краю и обтеканию его другим содержимым - float.

 

Ссылка на ооочень полезный ресурс...


  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 Тарасов Роман

Тарасов Роман
    Topic Starter
  • Пользователь
  • 524 сообщений
  • Репутация: 83

Отправлено 25 Декабрь 2015 - 21:55

@ShowPrint,то есть его можно убрать? 


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru