Учусь делать самый простой каркас сайта в Мире

DivMan · December 25, 2013

Попытался сделать лёгкий каркас сайта. Напишите мне, есть ли у меня в коде какие-то ошибки и правильно ли я использовал свойство float? И как убрать выходящие рамки по бокам?

http://jsfiddle.net/WKC3v/

<!DOCTYPE html><html>	<head>		<title>Сайт</title>		<meta http-equiv="content-type" content="text/html; charset=UTF-8">		<link rel="stylesheet" type="text/css" href="style.css">	</head><body>	<div id="main">		<div id="header"><p>шапка</p></div>		<div id="Nav"><p>Навигация</p></div>		<div id="content"><p>контент</p></div>		<div id="footer"><p>подвал</p></div>	</div>	</body></html>

body{margin:0}p{	text-align:center;}#main{	width:600px;	height:300px;	border: 1px solid;	margin: 0 auto;}#header{	height:70px;	border: 1px solid;	background:green;}#Nav{	width: 150px;	height: 200px;	border: 1px solid;	background: blue;	float:left;}#content{	height:300px;	border: 1px solid;	background:red;	}#footer{	height: 50px;	border: 1px solid;	background:#525252;}

antonKar · December 25, 2013

#content{	height:300px;	border: 1px solid;	background:red;	overflow: hidden;}

как убрать выходящие рамки по бокам?

http://htmlbook.ru/css/box-sizing

DivMan · December 25, 2013

#content{	height:300px;	border: 1px solid;	background:red;	overflow: hidden;}
как убрать выходящие рамки по бокам?
http://htmlbook.ru/css/box-sizing

спасибо

Edited December 25, 2013 by DivMan

vera17 · December 25, 2013

Я бы посоветовала тебе сразу учиться писать class вместо id http://frontender.info/when-using-ids-can-be-a-pain-in-the-class/

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

Отличная статья о float http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Хотелось бы посоветовать почитать книгу Седерхольма CSS ручной работы, в интернете можно спокойно скачать, там описывается приём cleafix, то есть очищение потока после применения плавающего элемента, а так же много других полезных вещей.

Для простенького каркаса сверстано вполне хорошо .

advokatua · December 25, 2013

где это вы нашли макет, где меню обтекается слева и вдобавок текст может идти под самим меню?

Switch74 · December 26, 2013

где это вы нашли макет, где меню обтекается слева и вдобавок текст может идти под самим меню?

грубо говоря - вконтакте, но это грубо.

а вообще, ничего не мешает сделать такой вид верстки, если хочется использовать все пространство на странице

DivMan · December 28, 2013

где это вы нашли макет, где меню обтекается слева и вдобавок текст может идти под самим меню?

выложите пожалуйста правильный код

Sign In

Учусь делать самый простой каркас сайта в Мире

Question

DivMan

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

antonKar

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

vera17

Link to comment

Share on other sites

advokatua

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information