Каскадный режим | Линейный режим

Kolyan · 10-08-2010 23:52

(10-08-2010 22:44)vl25 писал(а): Спасибо.Уже начал делать таблицу в CSS и с цветами разобрался.Лазил по сайтам искал как делать поля таблицы в CSS, но так и не нашел.В HTML разобрался и красивая обрамка таблицы получается,а вот в CSS как обрамление таблицы делать?
У меня такой вид (как дал Kolyan).А как в этот примерник воткнуть обрамление? Я впихал (там в самом низу где body) таблицу в HTML но она снова влезла с отступом,а не на всю страницу?

Нет ну тогда вам всё таки для начала стоит подучить теги и свойства HTML и CSS хотя бы на htmlbook.ru. Метод тыка конечно рулит, но если подучить мат часть, то должно получится быстрее научиться сайты делать.

vl25 · 11-08-2010 00:53

Уже получается втюхать всю таблицу на всю страницу в HTML, но когда ставлю рамки вот тут то и появляется свободное пространство по краям. В CSS тоже получается поставить рамку на всю страницу но пока не знаю как поставить обрамление?Может тут оно на всю страницу проканает.

maximus035 · 11-08-2010 09:35

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>Жара в&nbsp;столичном регионе пошла на&nbsp;убыль. В среду днем в&nbsp;Москве воздух прогреется до «плюс» 32-34 градусов, по&nbsp;области&nbsp;— до&nbsp;31-36 градусов тепла, сообщили в&nbsp;Росгидромете.

<p>«В регионе ожидается переменная облачность, локальные небольшие кратковременные дожди, местами грозы.Температура ночью в&nbsp;Москве «плюс» 19-21 градуса, по&nbsp;области до16-21 градусов тепла; днем в&nbsp;мегаполисе «плюс» 32-34 градуса, по&nbsp;области&nbsp;— 29-34 градуса выше нуля. Ветер восточный 2-7 метров в&nbsp;секунду при&nbsp;грозе с&nbsp;порывами до&nbsp;15 метров в&nbsp;секунду, сообщает ИТАР-ТАСС.</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]

vl25 · 11-08-2010 15:10

Спасибо за шаблон.Будем пробовать.
Хотя,надеюсь что мне еще и подскажут как же огранку таблицы РАСТЯНУТЬ НА ВЕСЬ ЭКРАН??????
Так как хотелось бы самому склепать сайт,а с краями как то не солидно смотрится.

maximus035 · 11-08-2010 15:40

vl25 это такой самый оптимальный шаблон, только я меню навигации забыл написать!

Kolyan · 11-08-2010 17:09

(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 кода.

vl25 · 11-08-2010 19:46

Ага,спасибо за подсказки.Я,уже понемногу взъезжаю в тему!!!Глядишь,из разряда чайников в разряд самоваров перейду с Вашей помощью.

vl25 · 14-08-2010 21:50

А как сделать иконку для сайта?Вернее как ее впихнуть что бы она отражалась в строке поиска?И какие должны быть размеры иконки???

maximus035 · 15-08-2010 08:47

картинка называется favicon в формате ico её размеры 16х16

Brian · 15-08-2010 10:00

(14-08-2010 21:50)vl25 писал(а): А как сделать иконку для сайта?Вернее как ее впихнуть что бы она отражалась в строке поиска?И какие должны быть размеры иконки???

Сделать можно хотя бы вот на сайте favicon.cc, чтобы установить на свой сайт надо получившийся файл favicon.ico поместить в корень сайта, этого должно быть достаточно что бы иконка отражалась в строке поиска, размеры как уже сказали выше 16х16.

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Насколько важен уникальный дизайн у сайта	MaargarytaBub	2	6,734	17-02-2024 20:36 Посл. сообщение: Brian
	Дизайн сайта, лендинг пейдж	renad86	4	7,609	02-10-2017 15:10 Посл. сообщение: Slardar
	При загрузке сайта на сервер нет картинок	789456123	3	9,019	09-07-2011 01:14 Посл. сообщение: kuvage
	оформление реклама дизайн сайта в 3D	sem	2	7,243	09-06-2011 13:43 Посл. сообщение: sem

Каскадный режим \| Линейный режим Первая страница сайта
Автор	Сообщение