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



 

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

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

Открыть тему
Тема закрыта
> Верстка CSS - вопросы по моему сайту
Eugene-N
Eugene-N
Topic Starter сообщение 10.5.2012, 20:40; Ответить: Eugene-N
Сообщение #1


Всем привет! Я скачал, посмотрел и выполнил все (почти все) уроки по 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, и это лучше и удобнее.

Спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 10.5.2012, 22:14; Ответить: Muxa_hb
Сообщение #2


<html><body><div id="wrap"><div id="left">Левое меню</div><div id="content">Какой то контент</div><div id="right">Правое меню</div></div></body></html>

[CSS]#wrap
{
width: 800px;
margin: 0 auto;
background-color: #0000FF;
}
#left
{
margin-top: 10px;
float:left;
width:150px;
height: 200px;
background-color: #00FF00;
}
#right
{
margin-top: 10px;
float:right;
width:150px;
height: 200px;
background-color: #FF0000;
}
#content
{
margin: 10px 155px 5px 155px;
width: 500px;
height: 200px;
background-color: #FFFF66;
}[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 10.5.2012, 22:17; Ответить: Muxa_hb
Сообщение #3


примерно так, например.. я их разукрасил разными цветами, чтоб понятнее было
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 10.5.2012, 22:45; Ответить: Bugnet
Сообщение #4


(Eugene-N @ 10.5.2012, 23:40) *
Насколько я понял это можно сделать с помощью таблиц css, но я читал что таблицы сейчас лучше не использовать, так как все работают со стилями css, и это лучше и удобнее.
Это у Вас абсурдная фраза. Правильнее будет приблизительно так:
Раньше верстали на таблицах, а сейчас всё больше блочная вёрстка.
А стили сss - это оформление, и ими оформляются как таблицы так и блоки.
Теперь, что касается Ваших вопросов. Вы ведь сверстали сайт на дивах. Изначально всё представили как чистый прямоугольный лист (наверное, как-то так ) и распихали по нём влево-вправо-посредине свои дивы. Теперь каждый див представьте как такой-же прямоугольник и снова "распихайте" в нём внутри новые дивы, так как будто вы верстаете новый внутренний сайт. Внутри уже новых дивов можно вновь записывать дивы и так "пока пикселей хватит". Потому-то вы и увидели, что
(Eugene-N @ 10.5.2012, 23:40) *
....тег div повторяется 50 раз...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Eugene-N
Eugene-N
Topic Starter сообщение 12.5.2012, 10:31; Ответить: Eugene-N
Сообщение #5


Bugnet - здравствуйте! Большое спасибо за подсказку - но пока не получается!
Вот например я хочу создать в правом меню дополнительный блок 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
Eugene-N
Topic Starter сообщение 12.5.2012, 13:28; Ответить: Eugene-N
Сообщение #6


Я переформулирую вопрос. Если я правильно понимаю, мне нужно просто правильно организовать иерархию 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", а вот основ почему то мало..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 12.5.2012, 13:41; Ответить: Bugnet
Сообщение #7


Дивы вложенные в другие дивы записывают так:
<div id="RightMenu"><!--открываем внешний-->
<div id="RightMenu2"><!--открываем внутренний-->
</div><!--закрываем внутренний-->
</div><!--закрываем внешний-->

Для идентификации используют id=".... " или class="..... ", но у id выше приоритет. Вам необходимо поискать и изучить вопросы приоритетности и наследования стилей.
1. Высота и ширина блоков:height и widht .
2. Выравнивание-обтекание и отмена обтекания: float и clear
3. Как поместить див в див я написал выше, в HTML- коде порядок дивов выжен, в листе стилей - нет разницы в каком порядке записаны стили того или иного блока.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Требуется помощь по сайту на "ВордПресс"
Закрылся доступ в панель администратора
15 Tia2 2377 17.4.2024, 0:54
автор: diviner99
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
27 zaiko 17579 2.4.2024, 14:00
автор: zaiko
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 92142 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3484 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3417 19.12.2023, 18:55
автор: CULA


 



RSS Текстовая версия Сейчас: 24.4.2024, 6:25
Дизайн