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

vl25 · 09-08-2010 01:26

Делаю первую страницу сайта.Почему то при просмотре ее на Опере и на IE страница заливает не целый экран (как нормальный сайт), а имеются зазоры с боков и с верху.Вернее сказать не страница, а созданные таблицы не доходят до краев.Цвет,который я вставил, заливает всю страницу,а вот таблица с зазорами.ЧТО делать начинающему чайнику в такой ситуации?ПОДСКАЖИТЕ.

Kolyan · 09-08-2010 08:46

(09-08-2010 01:26)vl25 писал(а): Делаю первую страницу сайта.Почему то при просмотре ее на Опере и на IE страница заливает не целый экран (как нормальный сайт), а имеются зазоры с боков и с верху.Вернее сказать не страница, а созданные таблицы не доходят до краев.Цвет,который я вставил, заливает всю страницу,а вот таблица с зазорами.ЧТО делать начинающему чайнику в такой ситуации?ПОДСКАЖИТЕ.

Это наверное в стилях надо прописать:

* {
margin: 0;
padding: 0;
}

или

html {
margin: 0;
padding: 0;
}

или

body {
margin: 0;
padding: 0;
}

вот что-то из этого должно помочь.

vl25 · 09-08-2010 22:46

(09-08-2010 08:46)Kolyan писал(а):
(09-08-2010 01:26)vl25 писал(а): Делаю первую страницу сайта.Почему то при просмотре ее на Опере и на IE страница заливает не целый экран (как нормальный сайт), а имеются зазоры с боков и с верху.Вернее сказать не страница, а созданные таблицы не доходят до краев.Цвет,который я вставил, заливает всю страницу,а вот таблица с зазорами.ЧТО делать начинающему чайнику в такой ситуации?ПОДСКАЖИТЕ.

Это наверное в стилях надо прописать:

* {
margin: 0;
padding: 0;
}

или

html {
margin: 0;
padding: 0;
}

или

body {
margin: 0;
padding: 0;
}

вот что-то из этого должно помочь.

Дело в том что пишу в HTML (таблицы тоже),а это теги CSS. Но я на всякий случай пробовал но эффект-НУЛЕВОЙ.Все равно СПАСИБО .Может еще какой метод есть?????

maximus035 · 10-08-2010 06:15

Этот кот вроде в IE работать не будет

vl25 · 10-08-2010 11:28

Если таблицу убрать и создать ее в формате css ?Или тогда все надо будет на css переводить?

Kolyan · 10-08-2010 13:47

(09-08-2010 22:46)vl25 писал(а): Дело в том что пишу в HTML (таблицы тоже),а это теги CSS. Но я на всякий случай пробовал но эффект-НУЛЕВОЙ.Все равно СПАСИБО .Может еще какой метод есть?????

Стили CSS прописываются в HTML файле внутри тегов <style></style>, вот пример трехколоночного макета HTML страницы вместе с CSS стилями:

Код:

<!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=utf-8" />

<title>3-column layout via CSS</title>

</head>

<style>

body {

margin:0;

}

#header {

background:blue;

}

#main {

background:yellow;

}

#left {

float:left;

width:17%;

background:green;

}

#right {

float:right;

width:17%;

background:red;

}

#middle {

margin:0 20%;

}

#footer {

clear:both;

background:grey;

}

#header, #left, #right, #middle, #footer {

padding:0.7em 1em;

}

</style>

<body>

<div id="header">header text</div>

<div id="main">

<div id="left">left text</div>

<div id="right">right text</div>

<div id="middle">middle text<br />middle text</div>

<div id="footer">footer text</div>

</div>

</body>

</html>

а вот тоже, только раздельно, файл стилей style.css:

Код:

body {

margin:0;

}

#header {

background:blue;

}

#main {

background:yellow;

}

#left {

float:left;

width:17%;

background:green;

}

#right {

float:right;

width:17%;

background:red;

}

#middle {

margin:0 20%;

}

#footer {

clear:both;

background:grey;

}

#header, #left, #right, #middle, #footer {

padding:0.7em 1em;

}

и HTML файл index.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=utf-8" />

<title>3-column layout via CSS</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="header">header text</div>

<div id="main">

<div id="left">left text</div>

<div id="right">right text</div>

<div id="middle">middle text<br />middle text</div>

<div id="footer">footer text</div>

</div>

</body>

</html>

правда это макет сделан на div'ах потому что это считается лучше чем на таблицах делать, но то же самое можно и на таблицах сделать.

vl25 · 10-08-2010 18:49

KOLYAN, огромное СПАСИБО.Посмотрел,один из вариантов, вроде то что надо сейчас буду пробовать переделывать таблицу.
Для css цветовая таблица от html подойдет или надо цвета прописывать типа yellow?

maximus035 · 10-08-2010 19:00

vl25 , цвета можно прописывать разметкой пример белый: #ffffff или чёрный: #aaaaaa

Kolyan · 10-08-2010 19:07

(10-08-2010 19:00)maximus035 писал(а): vl25 , цвета можно прописывать разметкой пример белый: #ffffff или чёрный: #aaaaaa

Да конечно цвета прописываются например: color: #ffffff; и так далее, только черный #000000, а #aaaaaa это серый Smile

vl25 · 10-08-2010 22:44

Спасибо.Уже начал делать таблицу в CSS и с цветами разобрался.Лазил по сайтам искал как делать поля таблицы в CSS, но так и не нашел.В HTML разобрался и красивая обрамка таблицы получается,а вот в CSS как обрамление таблицы делать?
У меня такой вид (как дал Kolyan).А как в этот примерник воткнуть обрамление? Я впихал (там в самом низу где body) таблицу в 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=utf-8" />

<title>3-column layout via CSS</title>

</head>

<style>

body {

margin:0;

}

#header {

background:blue;

}

#main {

background:yellow;

}

#left {

float:left;

width:17%;

background:green;

}

#right {

float:right;

width:17%;

background:red;

}

#middle {

margin:0 20%;

}

#footer {

clear:both;

background:grey;

}

#header, #left, #right, #middle, #footer {

padding:0.7em 1em;

}

</style>

<body>

<div id="header">header text</div>

<div id="main">

<div id="left">left text</div>

<div id="right">right text</div>

<div id="middle">middle text<br />middle text</div>

<div id="footer">footer text</div>

</div>

</body>

</html>

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

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