(10-08-2010 22:44)vl25 писал(а): [ -> ]Спасибо.Уже начал делать таблицу в CSS и с цветами разобрался.Лазил по сайтам искал как делать поля таблицы в CSS, но так и не нашел.В HTML разобрался и красивая обрамка таблицы получается,а вот в CSS как обрамление таблицы делать?
У меня такой вид (как дал Kolyan).А как в этот примерник воткнуть обрамление? Я впихал (там в самом низу где body) таблицу в HTML но она снова влезла с отступом,а не на всю страницу?
Нет ну тогда вам всё таки для начала стоит подучить теги и свойства HTML и CSS хотя бы на htmlbook.ru. Метод тыка конечно рулит, но если подучить мат часть, то должно получится быстрее научиться сайты делать.
Уже получается втюхать всю таблицу на всю страницу в HTML, но когда ставлю рамки вот тут то и появляется свободное пространство по краям. В CSS тоже получается поставить рамку на всю страницу но пока не знаю как поставить обрамление?Может тут оно на всю страницу проканает.
Kolyan, точняк ошибся с чёрным!
vl25, вот попробуй самая простая и красивая главная страница:
Код:
<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Блочная вёрстка." />
<meta name="keywords" content="Сайт, вёрстка, блоки, блочная вёрстка." />
<title>Главная страница</title>
<style>
/*Общие параметры страницы*/
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #ccff00;/*цвет фона*/
color: #333;
font-family: “Comic Sans MS”, Verdana, Arial, Helvetica, sans-serif;
}
/*шапка*/
#header {
background-image: url(http://www.imghost.in/images/jgxup01l7ug9bnbj1j.png);
width: 760px;/*ширина шапки*/
height: 196px;/*высота шапки*/
}
#container {
width: 760px;/*ширина блока*/
margin: 0 auto;
}
#text { /*стиль для блока с текстом*/
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
border : 1px solid #999;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}
#members {
width: 300px;
height: 190px;
float: right;
}
#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 304px;
height: 13px;
float: right;
}
#news { /*блок с новостями*/
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: left;
}
#news h3 { color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.jpg) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}
#footer { /*стиль для подвала*/
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p {
padding : 2px;
text-align : center;
}
.clearfloat {
clear : both;
}
</style>
</head>
<body>
<div id="container"><!--div блок для общих параметров-->
<div id="header"><!--div блок для шапки-->
</div>
<div id="text"><!--div блок для текста-->
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст!<br>
Блок где будет написан текст! И информация<br>
</div>
</div>
<div id="news">
<h3>новости:</h3>
<ul>
<li>Жара в столичном регионе пошла на убыль. В среду днем в Москве воздух прогреется до «плюс» 32-34 градусов, по области — до 31-36 градусов тепла, сообщили в Росгидромете.
<p>«В регионе ожидается переменная облачность, локальные небольшие кратковременные дожди, местами грозы.Температура ночью в Москве «плюс» 19-21 градуса, по области до16-21 градусов тепла; днем в мегаполисе «плюс» 32-34 градуса, по области — 29-34 градуса выше нуля. Ветер восточный 2-7 метров в секунду при грозе с порывами до 15 метров в секунду, сообщает ИТАР-ТАСС.</li>
</ul>
</div>
<div class="clearfloat"></div>
<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">Реклама</a></p>
<p>© new.RU, 2010 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a></p>
</div>
</div>
</body>
</html>
должно получиться как на скрине:
![[Изображение: 2277bd7e4f15.jpg]](http://s45.radikal.ru/i110/1008/9e/2277bd7e4f15.jpg)
Спасибо за шаблон.Будем пробовать.
Хотя,надеюсь что мне еще и подскажут как же огранку таблицы РАСТЯНУТЬ НА ВЕСЬ ЭКРАН??????
Так как хотелось бы самому склепать сайт,а с краями как то не солидно смотрится.
vl25 это такой самый оптимальный шаблон, только я меню навигации забыл написать!
(11-08-2010 00:53)vl25 писал(а): [ -> ]Уже получается втюхать всю таблицу на всю страницу в HTML, но когда ставлю рамки вот тут то и появляется свободное пространство по краям. В CSS тоже получается поставить рамку на всю страницу но пока не знаю как поставить обрамление?Может тут оно на всю страницу проканает.
Я надеюсь вы не думаете что HTML и CSS это какие-то два отдельных языка на которых делаются сайты? Ведь CSS это язык стилей, определяющий отображение HTML-документов, то есть просто дополнение к HTML. Если вы сравните код файлов из
поста #6, то увидите что во втором случае CSS файл подключается в HTML коде в строке:
Код:
<link rel="stylesheet" type="text/css" href="style.css" />
а в первом коде HTML файла, этой строки нет потому что CSS стили идут внутри HTML кода.
Ага,спасибо за подсказки.Я,уже понемногу взъезжаю в тему!!!Глядишь,из разряда чайников в разряд самоваров перейду с Вашей помощью.
А как сделать иконку для сайта?Вернее как ее впихнуть что бы она отражалась в строке поиска?И какие должны быть размеры иконки???
картинка называется favicon в формате ico её размеры 16х16
(14-08-2010 21:50)vl25 писал(а): [ -> ]А как сделать иконку для сайта?Вернее как ее впихнуть что бы она отражалась в строке поиска?И какие должны быть размеры иконки???
Сделать можно хотя бы вот на сайте favicon.cc, чтобы установить на свой сайт надо получившийся файл favicon.ico поместить в корень сайта, этого должно быть достаточно что бы иконка отражалась в строке поиска, размеры как уже сказали выше 16х16.