Верстка CSS - вопросы по моему сайту

[Eugene-N]

Всем привет! Я скачал, посмотрел и выполнил все (почти все) уроки по html и css - и собрал демо-версию своего сайта, он очень простой - трехколоночный информационный сайт (он будет посвящен компьютерной графике). Я прилагаю его в архиве

http://files.mail.ru/QK7K71

потому что писать здесь код неудобно, он достаточно большой, к тому же в оформлении я использовал картинки. Но у меня возникли трудности.

В архиве находятся две папки - в одной из них сам сайт (папка img с картинками, файлы сайта verstka-div.css и verstka-div.htm, а в другой папке рисунок (Он называется "Вопрос" на котором я показываю области, которые я не могу разместить на сайте.) На местах отмеченных знаком вопроса и место где распологается календарь - там я хочу разместить баннеры 3дмакс, Майя и других графических редакторов - т.к. сайт будет посвящен 3д графике - ну или просто красивые анимационные картники на эту тему. Я не нашел тегов с помощью которых можно поместить область с информацией - в данном случае это картинки или баннеры) поверх области <div class="LeftMenu"> - и выровнять ее размеры (наверное с помощью margin). И как установить календарь я тоже не понял.

Я думал решить эту проблему так - найти сайты где подобное уже сделали, открыть код, разобраться в нем и скопировать нужные элементы (может быть подредактировав их) - но, почти все сайты которые я просмотрел (которые были похожи на то что я хочу) - я вообще не понял как их сделали! Я делал сайт по урокам - в них была четка структура тегов - а в тех что я просмотрел - там либо тег div повторяется 50 раз и кроме него больше почти ничего нет, либо какие то теги которых я вообще нигде больше не видел - как они работают я совершенно не понял. Чтобы окончательно не запутаться, я решил спросить:

1) Допустим есть сайт - стандартный - 3 колонки, и верз/них - графическое оформление. Какиие лучше всего использовать теги для того, чтобы разделить эти 3 колонки на функциональные области в каждой из которых я хочу поместить какую то информацию - например тексты или картинки - вот как разбить рабочее пространоство области на такие модули, в которые можно помещать текст/картинки? Чтобы можно было легко менять верстку страницы - например сначала как в файле "верстка 1", а потом как в файле "верстка 2". И в боковых колонках тоже самое, чтобы я мог добавлять какие то элементы, и убирать их - например календарь, баннер, или еще что-то. Я не хочу использовать различные программы для создания сайтов (хотя сейчас скачал уроки по dreamweaver - но пока не получается) - лучше когда регулируешь сайт вручную это намного точнее, тем более что сайт у меня будет небольшой, там будут просто статьи о 3д-графике и галерея лучших работ.

Насколько я понял это можно сделать с помощью таблиц css, но я читал что таблицы сейчас лучше не использовать, так как все работают со стилями css, и это лучше и удобнее.

Спасибо.

Edited May 10, 2012 by Eugene-N

[Softlink]

Eugene-N, понравилось ваше пояснение Но лучше всего не выкладывать архив, а залить страничку куда-нибудь. Так повысятся шансы в решении вашей проблемы.

[Eugene-N]

А куда? На бесплатный хостинг? У меня есть уроки как это сделать, давайте я так и сделаю. Но это долго. Давайте я лучше выложу сюда код, а картинки из папки img я выложу в интернет, их тогда нужно будет просто сохранить в папку img в папке с сайтом (у меня эта папка находится в localhost в denwer). Сейчас выложу все.

[Softlink]

А куда? На бесплатный хостинг? У меня есть уроки как это сделать, давайте я так и сделаю. Но это долго. Давайте я лучше выложу сюда код, а картинки из папки img я выложу в интернет, их тогда нужно будет просто сохранить в папку img в папке с сайтом (у меня эта папка находится в localhost в denwer). Сейчас выложу все.

Лучше на бесплатный хостинг.

[Eugene-N]

Тогда подскажите пожалуйста где это можно сделать быстро - я сейчас зарегистрировался на бесплатном хостинге http://3eu.ru/ - там написали что "администрация рассмотрит вашу заявку - ждите".

Есть такой хостинг где заявки не рассматриваются, а сразу зарегистрировалсялся и все?

А вообще у меня уже есть мой реальный адрес, я его зарегестрировал и оплатил за год, но я не знаю могу ли я сейчас туда поместить сайт - он будет работать?

Может просто архив скачаете? А то долго все это...

Edited May 10, 2012 by Eugene-N

[Vamp]

юкоз популярен безплатен вроде всего хватает

[Eugene-N]

http://3d-journal.ucoz.ru/

Но там шрифты почему то неправильные - у меня шрифт белый, и меньше, а на ucoz он стал серый и подчеркнутый.

Это те картинки которые были в архиве, с вопросами, то есть вот так я хочу сделать.

Вот, повторяю вопрос - чтобы те искать его в первом сообщении.

Допустим есть сайт - стандартный - 3 колонки, и верх/них - графическое оформление. Какиие лучше всего использовать теги для того, чтобы разделить эти 3 колонки на функциональные области в каждой из которых я хочу поместить какую то информацию - например тексты или картинки - вот как разбить рабочее пространоство области на такие модули, в которые можно помещать текст/картинки? Чтобы можно было легко менять верстку страницы - например сначала как в файле "верстка 1", а потом как в файле "верстка 2". И в боковых колонках тоже самое, чтобы я мог добавлять какие то элементы, и убирать их - например календарь, баннер, или еще что-то.

Давайте я вам код html и css хотя бы сюда напишу? Вдруг на ucoz там дополнительные какие то теги появились, чтобы вы хотя бы посмотрели как я сделал.

Edited May 10, 2012 by Eugene-N

[Eugene-N]

Ребята вы где? Я же даже сайт поместил на хостинг - кстати спасибо за подсказку, на первом хостинге где я зарегистрировался мне до сих пор не ответили.

Мне посоветовали поместить внутри div блоков новые div блоки указать их ширину и высоту и в них уже поместить картинки, текст и баннеры.

Ну так вот - вот например я хочу создать в правом меню дополнительный блок div

html

<div class="RightMenu">

</div class="RightMenu2"></div>

<div>

css

.RightMenu

{

float: right;

overflow: hidden;

background: url(img/left.jpg);

width: 180px; height: 800px;

}

.RightMenu2

{

background: url(img/Peterburg.jpg);

width: 80px; height: 40px;

}

картинка где то появляется (потому что сдвигаются поля - и сдвигаются поля нижнего поля, а не бокового), но ее не видно.

Скажите пожалуйста

1) как задать ширину и высоту div

2) как его выровнять относительно того div в котором он уже находиться

3) как правильно поместить div в div - у меня же два файла - html и css, в html див помещается прямо в див? Как я сделал? Или там нужно какое то дополнительное форматирование - отступ или еще что то? А в css - там же свойства div идут один за другим - там нужно как-то соблюдать иерарархию? У меня сейчас в таком порядке

.MainFrame

.header

.header2

.LeftMenu

.RightMenu

.RightMenu2 (это новый div который я пытаюсь сделать - но пока не работает)

.WorkArea

.footer

.menu

.menu:hover

И еще такой вопрос - как нужно прописывать этот внутренний div - основные див-блоки заданы классами - например <div class="LeftMenu"> - это стандарт, т.е. программа понимает только класс - и для него уже есть свойства - или див это просто условный блок, а класс здесь для удобства верстки, чтобы не забыть - но тогда зачем слово class, можно было бы просто <div "LeftMenu">

Я спрашиваю потому что - может ошибка в названии внутренних блоков - как их правильно прописать?

[Eugene-N]

Я переформулирую вопрос. Если я правильно понимаю, мне нужно просто правильно организовать иерархию div-блоков и правильно указать в них параметры форматирования для текста и картинок. Выглядеть это должно быть так.

<div class="MainFrame"> (и в нем)

<div id=container 1>

<p> текст - параметры форматирования

</div>

<div id=container 2>

<img> - параметры форматирования

</div>

<div id=container 3>

<href> - параметры форматирования

</div>

и css

.MainFrame

{

width: 1024px;

margin: 20px auto 20px; /*сверху, слева/справа, снизу*/

}

.container 1

{

ширина

высота

отступ внешний

отступ внутренний

}

.container 1

{

ширина

высота

отступ внешний

отступ внутренний

}

.container 1

{

ширина

высота

отступ внешний

отступ внутренний

}

Как то так?

Не подскажете где подробно описано как настраиваются div блоки с содержимым текст и картинки? Потому что параметров может быть много, например

выравнивание

размер шрифта

тип шрифта

размер картинки - подгоняется под размер блока или вставляется в блок как есть

и еще я прочитал

"Продолжим по отступам, не достаточно использовать * {margin:0; padding:0;} лучше перечислять все, пример:

body, td, th, input, select, textarea (в случае, если используется), тем самым мы добьемся одинакового отображения во всех браузерах."

То есть тут два десятка параметров может быть, все надо указывать.

У меня сайт очень простой, там только текст, картинки и пара баннеров - главное правильно сверстать. А на форумах в основном обсуждают темы например "как сделать выпадающее анимированное меню в css", а вот основ почему то мало..