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


Партнерская программа Kredov

Что-то не так с кодом css

#1 ^and1

^and1
  • Пользователь
  • 15 сообщений
  • Репутация: 0
0

Отправлено 15 Январь 2013 - 23:31

Здраствуйте, такая проблема прописал стили заголовка(в заголовке Букингемский дворец) и не отображаются, помогите...
вот html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>
<body>
<div class="main">
<div class="head ">
  <h2>Выбери своё<br />Путешествие</h2>
  <a href="/">YOUR TRAVEL</a>
</div>
<div class="content-main">
<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Автор</a></li>
  <li><a href="#">Контакты</a></li>
  <form class="search-main" action="" method="">
   <input class="search-txt" type="text" name="search" />
   <input class="search-btn" type="image" src="images/search.jpg" />
  </form>
  </ul>
  <br></br><br></br><br></br>
 
  <div class="content">
  <div class="post-main"
  <h1><a href="#">Букингемский дворец</a> <span>(13.01.12)</span></h1>
  <div class="post">
  <img src="images/plaice.jpg" alt="" />
<p>Изначально Букингемский дворец в Англии всемирно назывался как  Бакингем-хаус, который был построен для великого герцога Букингемского. В последующих 75 годах нанятые архитекторы сконструировали ещё несколько подобных здания, взяв за основу этот дворец. Они совмесно образуют квадрат, где посредине находится большой двор. В 1837 году Букингемский дворец в Англии был оффициально объявлён резиденцией монархов британии. Сегодня же резиденция в Англии представлена в лице Елизаветы II.
</p>
<p>Несмотря на то, что дворец был очень раскошным и в нём хранилось множество драгоценностей, некоторым его обитателям не всегода жилось счастливо и спокойно. Букингемский дворец Англии является небольшим скоплением художественных собраний королевы с очень известными авторами.
</p>
<p><a href="#">Читать далее</a></p>
<p>Метки: <a href="#">Англия</a>, <a href="#">Букингемский дворец</a></p>
  </div>
</div> 
</div>
</div>
</div>
</body>
</html>

Вот css:

/* CSS Document */
*{
margin:0; padding:0;
}
body{
background: #edece8 url(images/bg-body.jpg) center top no-repeat
}
.main {
width:970px; margin:0 auto;
}
.head{
height:250px;
}
  .head h2 {
  font: 24px "Sylfaen"; color: #010101; margin-top:10px; float: left;
  }
.head a{
font: 25px "Comic Sans MS"; color:#961e0a; text-decoration:none; float:right; margin: 20px 10px 0 0;
}
  /*блок контекта и категорий*/
.content-main{
background: #f7f7f7; border: 1px solid #ffff; overflow:hidden;  /* обводка 1 пк, сплошная цветом белым, а фон цвет ф7ф7ф7. overflow всегда писать если float*/
border-radius: 15px;
}
.menu{
list-style:none; background: #726867; overflow:hidden;
border-radius: 15px 15px 0 0;

}
.menu li{
float:left; background: url(images/bg-menu.jpg) left center no-repeat; padding:10px 35px;
}
.menu li:first-child{ float-left; padding 10px 35px; background:none;
}
.menu li a{
font:20px "Comic Sans MS"; color:#ffffff; text-decoration:none;
}
.menu li a:hover{
font:20px "Comic Sans MS"; color:#ffffff; text-decoration:underline;
}
.search-main{
float:right;  margin:-7px 25px 0 0;
}
.search-txt{
height:23px; width:230px; background: #f7f7f7; border: 1px solid #fff; margin: 0 10px 0 0;			  /* отступ между поиском и кнопкой*/
border-radius: 2px;
}
.search-btn{
position:relative; top:14px;    /* относительно данной позиции отступ от верха на 14 пкс*/
}
.content{
width: 700px; float:left; margin: 0 0 0 20px;  /*ширина контента и отступ от лев края*/
}

   .post-main{
   background: #f1edee; border:1px solid #eae8e8;
   border-radius: 8px;
   }
    .post-main h1{
    font:normal 24px Verdana; color:#4a4342; background: #ded9da;   /* стили для заголовка статьи цвет шрифт и т.д*/
    padding: 5px 20px 8px 15px; margin:0 0 5px 0;
    }
	 .post-main h1 a{
	 font:normal 24px Verdana; color:#4a4342; text-decoration:none;
	 }




последнии 2 кода .post-main h1 вообще не отображаются, а в уроке по которому обучаюсь всё впорядке. Спасибо.

 

 

  • 0

#2 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 15 Январь 2013 - 23:36

Здравствуйте.
Попробуйте закрыть тег div с классом post-main, он у Вас не закрыт:
<div class="post-main"
а должно быть:
<div class="post-main">

P.S. А почему не зададите вопрос авторам курса?
  • 0


#3 ^and1

^and1
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 0

Отправлено 15 Январь 2013 - 23:42

Спасибо за вашу внимательность)
это займёт побольше времени, чем ваш ответ.... которого я ждал буквально 5 минут).
Спасибо ещё раз)
  • 0

#4 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 16 Январь 2013 - 00:05

P.S. А почему не зададите вопрос авторам курса?

а кто автор курса?
  • 0

#5 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 16 Январь 2013 - 00:13

Спасибо за вашу внимательность)

Пожалуйста.

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

Отнюдь не факт, учитывая, что один из авторов курса Вам и ответил )

а кто автор курса?

Один из авторов - я :) , точнее - автор двух последних уроков. Ну и сам курс - здесь.
  • 0


#6 ^and1

^and1
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 0

Отправлено 16 Январь 2013 - 00:28

раз так хотел спросить) ещё насчёт этого кода) как добавить небольшой типо пропуск между контентом и ссылкой Читать далее. если тег <br> многовато... мб через margin??? добавить class для Читать далее и сделать отступ? если так, то у меня не получатеся мб подскажете как

между прочим я этот курс и прорабатываю) можно ваш скайп) будут вопросы буду обращаться..)


мой второй сайт пока шаблонный о архитектуре, но вот щас взялся за верстку...
  • 0

#7 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 16 Январь 2013 - 08:15

как добавить небольшой типо пропуск между контентом и ссылкой Читать далее. если тег
многовато... мб через margin??? добавить class для Читать далее и сделать отступ? если так, то у меня не получатеся мб подскажете как

Добавить класс, к примеру, more и стилевое правило для него:
.more{padding-top: 20px;}

можно ваш скайп) будут вопросы буду обращаться..)

Будут вопросы - можно обращаться на форум, этот или авторский.
  • 0


#8 ^and1

^and1
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 0

Отправлено 16 Январь 2013 - 10:48

вот таким образом в index.html написать надо?
<div class="read-more"><p><a href="#">Читать далее</a></p> </div>

  • 0

#9 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 16 Январь 2013 - 11:41

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

<p class="read-more"><a href="#">Читать далее</a></p>
А лепить еще один div к блочному элементу вроде как здесь необходимости нет никакой.
  • 0


#10 ^and1

^and1
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 0

Отправлено 16 Январь 2013 - 12:06

не выходит(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>
<body>
<div class="main">
<div class="head ">
  <h2>Выбери своё<br />Путешествие</h2>
  <a href="/"><i>YOUR TRAVEL</i></a>
</div>
<div class="content-main">
<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Автор</a></li>
  <li><a href="#">Контакты</a></li>
  <form class="search-main" action="" method="">
   <input class="search-txt" type="text" name="search" />
   <input class="search-btn" type="image" src="images/search.jpg" />
  </form>
  </ul>
  <br></br><br></br><br></br>
 
  <div class="content">
  <div class="post-main">
  <h1><a href="#">Букингемский дворец</a> <span>(13.01.12)</span></h1>
  <div class="post">
  <img src="images/plaice.jpg" class="imgstyle" alt="" />
<p>Изначально Букингемский дворец в Англии всемирно назывался как  Бакингем-хаус, который был построен для великого герцога Букингемского. В последующих 75 годах нанятые архитекторы сконструировали ещё несколько подобных здания, взяв за основу этот дворец. Они совмесно образуют квадрат, где посредине находится большой двор. В 1837 году Букингемский дворец в Англии был оффициально объявлён резиденцией монархов Британии. Сегодня же резиденция в Англии представлена в лице Елизаветы II.</p>
<p>Несмотря на то, что дворец был очень раскошным и в нём хранилось множество драгоценностей, некоторым его обитателям не всегода жилось счастливо и спокойно. Букингемский дворец Англии является небольшим скоплением художественных собраний королевы с очень известными авторами.</p>
<p class="read-more"><a href="#">Читать далее</a></p>
<p>Метки: <a href="#">Англия</a>, <a href="#">Букингемский дворец</a></p>
  </div>
</div>
..............


css

/* CSS Document */
*{
margin:0; padding:0;
}
body{
background: #edece8 url(images/bg-body.jpg) center top no-repeat
}
.main {
width:970px; margin:0 auto;
}
.head{
height:250px;
}
  .head h2 {
  font: 24px "Sylfaen"; color: #010101; margin-top:10px; float: left;
  }
.head a{
font: 25px "Comic Sans MS"; color:#961e0a; text-decoration:none; float:right; margin: 20px 10px 0 0;
}
  /*блок контекта и категорий*/
.content-main{
background: #f7f7f7; border: 1px solid #ffff; overflow:hidden;  /* обводка 1 пк, сплошная цветом белым, а фон цвет ф7ф7ф7. overflow всегда писать если float*/
border-radius: 15px;
}
.menu{
list-style:none; background: #726867; overflow:hidden;
border-radius: 15px 15px 0 0;

}
.menu li{
float:left; background: url(images/bg-menu.jpg) left center no-repeat; padding:10px 35px;
}
.menu li:first-child{ float-left; padding 10px 35px; background:none;
}
.menu li a{
font:20px "Comic Sans MS"; color:#ffffff; text-decoration:none;
}
.menu li a:hover{
font:20px "Comic Sans MS"; color:#ffffff; text-decoration:underline;
}
.search-main{
float:right;  margin:-7px 25px 0 0;
}
.search-txt{
height:23px; width:230px; background: #f7f7f7; border: 1px solid #fff; margin: 0 10px 0 0;			  /* отступ между поиском и кнопкой*/
border-radius: 2px;
}
.search-btn{
position:relative; top:14px;    /* относительно данной позиции отступ от верха на 14 пкс*/
}
.content{
width: 700px; float:left; margin: 0 0 0 20px;  /*ширина контента и отступ от лев края*/
}

   .post-main{
   background: #f1edee; border:1px solid #eae8e8; margin: 0 0 20px 0;
   border-radius: 8px;
   }
    .post-main h1{
    font:normal 22px Verdana; color:#4a4342; background: #ded9da;   /* стили для заголовка статьи цвет шрифт и т.д*/
    padding: 5px 20px 8px 15px; margin:0 0 5px 0; border-radius: 8px 8px 0 0;
	    }
	 .post-main h1 a{
	 font:normal 22px Verdana; color:#4a4342; text-decoration:none;
	 }
	 .post-main h1 a:hover{
	 font:normal 22px Verdana; color:#4a4342; text-decoration: underline;
	 }
	 .post-main h1 span{
	 font: normal 12px Verdana; color: #a59997;
	 }
   .imgstyle{					  /* весь текст сместился слева от картинки, был весь снизу, также в index прописать class*/
    float:left; margin: 0 15px 0px 0;
    }
    .read-more{padding-top:20px;}
.post{											  /*непосредственно область всего поста, текст чтобы не прилипал делаем отступ*/
margin: 0  15px 15px 15px;
}
   .post p{					   /*работает с обхацами внутри поста, шрифт и тд*/
  font:13px Verdana; color: #000;
  }
  .post p a{
  color:#3f282f; text-decoration:underline;
  }
  .post p a:hover{
  color:#3f282f; text-decoration:none;
  }

  • 0

robot

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


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