блочная верстка (верстаю впервые) - HTML и CSS

lostbananan · 26.03.2013, 16:15

Добрый день. Раньше я верстал таблицами, но вот возникла необходимост в css-верстке. И что-то у меня почти совсем ничего не получается...
И как в сообщение вставить рисунок? /раз десять пытался - "загрузка файла прошла неудачно"/
Короче ескиз если попробывать описать словами состоит из 5-ти блоков:
/слева на право.../"меню", правее от меню идет три блока (один над другим): "верх", "шапка", "главний" и правый блок (он как и блок меню - на всю высоту ерана) "правый"
Написал такой файл стилей:

Код:

div.menu{
	width: 127px;
	height: 100%;
	margin: 0;
	background-color: #50b7af;
}
div.top{
	float: left;
}
div.head{
	float: left;
}

Файл страницы такой:

Код HTML:

<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<div class='menu'>
	Тут буде меню
	</div>
	<div class='top'>
		верхня права частина (без блоку з меню)
	</div>
	<div class='head'>
		голова (один до одного стикується з блоком меню)
	</div>
	<div class='main'>
		ну а тут буде власне контент
	</div>
	<div class='right>
		права колонка
	</div>
</body>

Но... у меня получилось блок с меню как и ндо на всю высоту екрана, а все остальные блоки почему-то расположились под (снизу) блока меню... Мне же надо чтобы остальные блоки были ЛЕВЕЕ от блока меню.
Эта верстка практически первая для меня, подскажите, пожалуйста, что я неправильно написал?...

Пожалуйста, оформляйте Ваш код согласно правилам.

Naive · 26.03.2013, 17:21

Разбросали от пупа стили по блокам и должно заработать? Нет понимания как считается высота элементов; как работают плавающие элементы; зависимости блоков друг от друга...

Цитата:

подскажите, пожалуйста, что я неправильно написал?...

— все.
===========
у вас 4 выхода:
1. изучать принципы работы потока элементов, плавающих блоков.
2. забить болт и верстать дальше на таблицах.
3. уйти полностью в бэкэнд (или ваще в другую профессию)
4. юзать генератор http://csstemplater.com/.

lostbananan · 26.03.2013, 17:24

Я выбираю первый путь...

nyqpblcTuk · 12.06.2016, 19:16

http://www.sdelaysite.com/tag/verstka-video/page/2

Видео курс по блочной верстки

Naive · 17.06.2016, 22:01

ахтунг! некропостер!

26.03.2013, 16:15	#1
lostbananan Пользователь Регистрация: 16.02.2010 Сообщений: 11	блочная верстка (верстаю впервые) Добрый день. Раньше я верстал таблицами, но вот возникла необходимост в css-верстке. И что-то у меня почти совсем ничего не получается... И как в сообщение вставить рисунок? /раз десять пытался - "загрузка файла прошла неудачно"/ Короче ескиз если попробывать описать словами состоит из 5-ти блоков: /слева на право.../"меню", правее от меню идет три блока (один над другим): "верх", "шапка", "главний" и правый блок (он как и блок меню - на всю высоту ерана) "правый" Написал такой файл стилей: Код: `div.menu{ width: 127px; height: 100%; margin: 0; background-color: #50b7af; } div.top{ float: left; } div.head{ float: left; }` Файл страницы такой: Код HTML: <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class='menu'> Тут буде меню </div> <div class='top'> верхня права частина (без блоку з меню) </div> <div class='head'> голова (один до одного стикується з блоком меню) </div> <div class='main'> ну а тут буде власне контент </div> <div class='right> права колонка </div> </body> Но... у меня получилось блок с меню как и ндо на всю высоту екрана, а все остальные блоки почему-то расположились под (снизу) блока меню... Мне же надо чтобы остальные блоки были ЛЕВЕЕ от блока меню. Эта верстка практически первая для меня, подскажите, пожалуйста, что я неправильно написал?... Пожалуйста, оформляйте Ваш код согласно правилам. Последний раз редактировалось Вадим Мошев; 12.06.2016 в 20:07.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Блочная верстка	mistfist	HTML и CSS	3	24.01.2012 23:06
резиновая блочная верстка	cyclobe	HTML и CSS	8	01.02.2011 12:01
Блочная верстка	varvara16	HTML и CSS	0	18.09.2010 12:52
Блочная верстка	Demonichka	HTML и CSS	2	12.07.2008 01:31

26.03.2013, 17:24	#3
lostbananan Пользователь Регистрация: 16.02.2010 Сообщений: 11	Я выбираю первый путь...

12.06.2016, 19:16	#4
nyqpblcTuk Пользователь Регистрация: 05.06.2016 Сообщений: 37	http://www.sdelaysite.com/tag/verstka-video/page/2 Видео курс по блочной верстки

17.06.2016, 22:01	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	ахтунг! некропостер! Alar, верни репу!