X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Что-то не так с кодом css
^and1
^and1
Topic Starter сообщение 16.1.2013, 0:31; Ответить: ^and1
Сообщение #1


Здраствуйте, такая проблема прописал стили заголовка(в заголовке Букингемский дворец) и не отображаются, помогите...
вот 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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 16.1.2013, 0:36; Ответить: matroskin8
Сообщение #2


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

а должно быть:
<div class="post-main">


P.S. А почему не зададите вопрос авторам курса?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
^and1
^and1
Topic Starter сообщение 16.1.2013, 0:42; Ответить: ^and1
Сообщение #3


Спасибо за вашу внимательность)
это займёт побольше времени, чем ваш ответ.... которого я ждал буквально 5 минут).
Спасибо ещё раз)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 16.1.2013, 1:05; Ответить: isvetlichniy
Сообщение #4


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

а кто автор курса?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 16.1.2013, 1:13; Ответить: matroskin8
Сообщение #5


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

Пожалуйста.

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

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

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

Один из авторов - я :) , точнее - автор двух последних уроков. Ну и сам курс - здесь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
^and1
^and1
Topic Starter сообщение 16.1.2013, 1:28; Ответить: ^and1
Сообщение #6


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

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


мой второй сайт пока шаблонный о архитектуре, но вот щас взялся за верстку...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 16.1.2013, 9:15; Ответить: matroskin8
Сообщение #7


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

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


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

Будут вопросы - можно обращаться на форум, этот или авторский.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
^and1
^and1
Topic Starter сообщение 16.1.2013, 11:48; Ответить: ^and1
Сообщение #8


вот таким образом в index.html написать надо?
<div class="read-more"><p><a href="#">Читать далее</a></p> </div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 16.1.2013, 12:41; Ответить: matroskin8
Сообщение #9


Я же вроде как написал, что нужно добавить класс... логично, что нужно добавить класс к элементу, который необходимо стилизировать, в данном случае - к тегу параграфа:
<p class="read-more"><a href="#">Читать далее</a></p>

А лепить еще один div к блочному элементу вроде как здесь необходимости нет никакой.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
^and1
^and1
Topic Starter сообщение 16.1.2013, 13:06; Ответить: ^and1
Сообщение #10


не выходит(

<!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;
  }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Во что сегодня инвестировать?
Делимся своими приносящими прибыль вариантами
69 traveliver 4445 25.3.2024, 6:48
автор: Skyworker
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВо что Вы играете?
399 Vmir 67500 23.3.2024, 12:51
автор: Alexand3r
Открытая тема (нет новых ответов) "Извините, что ожидание затянулось, но не думайте, пожалуйста, что мы про вас забыли. Мы заводим задачи по всем обращениям и контролируем работу над ними самым тщательным образом."
Вопрос
0 kuz999 1188 5.2.2024, 14:06
автор: kuz999
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3328 25.1.2024, 14:36
автор: malamut
Горячая тема (нет новых ответов) Что приведет к краху всего рынка криптовалют
стейблкоины, прогноз
43 GlazAlmaz 5832 13.1.2024, 17:30
автор: Antarez


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:28
Дизайн