Бесплатная помощь по верстке

**Witch_You** · 02.09.2013 16:11

Код HTML:

body {
	background-image: url(/img/pic.jpg);
	background-repeat: repeat-x;
}

А можно сделать так, чтобы этот пик был расположен внизу страницы? Попробовал добавить padding-bottom: 800px; но не заметил разницы...

**StelS** · 02.09.2013 18:53

Witch_You, background-position: center bottom;

**LampCos** · 24.09.2013 12:04

Всем привет. Прошу помощи. Вкратце: сверстал шапку, три колонки и подвал. В левой колонке меню, в правой разная фигня, которая со временем планируется меняться, то есть резиновая с растягиванием вниз. Все колонки равняются при помощи jQuery. Ситуация следующая:
1. Когда центральная центральная колонка содержит достаточно информации, что ее высота превышает высоту левого меню, то все нормально тянется и колонки нормально равняются.
2. Когда содержимое центральной колонки на другой странице сайта мало, что высота центральной колонки должна быть меньше левого меню, то вроде тоже все нормально равняется, НО при этом все содержимое страницы сдвигается вправо где-то на 20 пикселей, то есть двигается вся "wrapper".
3. При переключении на следующую страницу, где опять содержимое основной центральной колонки велико, то опять вся страница возвращается влево.
4. Такие же глюки и при наполнении правого блока.
Верстка при помощи float.
Прилагаю коды.
В html коде строчки 50-54 закомментированы. Если в 50-й строчке (отмечена красным) снять комментарий и обновить страницу в браузере, то страница прыгнет обратно влево.
Код HTML

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="css/style.css" type="text/css" rel="stylesheet">
	<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
	<script src="js/equalHeight.js" type="text/javascript"></script>
	<title>Специализированный центр изучения английского языка</title>
</head>
<body>
	<div id="wrapper">
		<div id="topLine"></div>
		<div id="header">
			<ul id="nav">
				<li><a href="kids.html">Дети 6 лет</a></li>
				<li><a href="lowchool.html" class="small">Начальная <br>школа</a></li>
				<li><a href="hischool.html" class="small">Средняя <br>школа</a></li>
				<li><a href="gia.html">ГИА, ЕГЭ</a></li>
				<li><a href="fce.html" class="small">Международные <br>экзамены</a></li>
				<li><a href="adults.html">Взрослые</a></li>
				<li><a href="review.html">Отзывы</a></li>
			</ul>
		</div>
		<div id="left">
			<div id="sidebar">
				<ul>
					<li><a href="index.html" class="activel">Главная</a></li>
					<li><a href="news.html">Новости</a></li>
					<li><a href="success.html">Успехи учеников</a></li>
					<li><a href="portfolio.html">Потрфолио учителей</a></li>
					<li><a href="gallery.html">Галерея</a></li>
					<li><a href="price.html">Стоимость</a></li>
					<li><a href="contacts.html">Контакты</a></li>
					<li><a href="job.html">Вакансии</a></li>
					<li><a href="question.html" class="down">Задать вопрос</a></li>
				</ul>
			</div>
		</div>
		<div id="right">
			<p class="partner">Наш партнер</p>
			<div align="center">
				<a class="first" title="Меморандум о сотрудничестве" href="http://webmasters.ru/forum/images/memorandum.jpg"><img src="http://webmasters.ru/forum/images/memorandum_s.jpg" width="200" height="300"></a>
			</div>
		</div>		
		<div id="content">
			<h1>Вас приветствует коллектив <span class="red">British Land</span></h1>
			<ul>
					<li>xfcnm 'ktvtynf cgbcrf</li>
					<li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>
					<!--<li><a href="gallery.html" class="dot">Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</a></li>
					<li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>
					<li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>
					<li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>
					<li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>-->
			</ul>
		</div>
				
		<div class="clear"></div>
		
		<div id="footer"><h3>British Land 2013</h3></div>
	</div>
</body>
</html>

Код CSS

Код:

@import url(reset.css);

body {
background-color:#FCF5E2;
outline:0px solid #222CF6;
margin:0;
padding:0;
}

#topLine {
	height:20px;
	background-image: url(../images/topRing.png);
	background-repeat:repeat-x;
	background-color:#FCF0C6;
}

#wrapper {
	outline:1px solid #5CF6C3;
	padding:0px;
	margin:0px auto 0 auto;
	max-width:1200px;
	position:relative;	
}

#header {
	width:auto;
	height:310px;
	background-color:#FCF0C6;
	outline:0px solid #1D2FF5;
	position:relative;
	margin-top:0px;
	border-bottom:1px solid #C41617;
}

#left {
	width:210px;
	outline:0px solid black;
	float:left;
	margin-top:2px;
	border-top:1px solid #C41617;
	border-right:1px solid #C41617;
	background-color:#FCF0C6;
}

#content {
	width:738px;
	/*height:500px;*/
	outline:0px solid black;
	margin:2px 0px 0 211px;
	background-color:#FCF5E2;
	padding:0px 20px 0px 20px;
	border-top:1px solid #C41617;
}

#right {
	width:210px;
	/*height:300px;*/
	float:right;
	outline:0px solid blue;
	margin-top:2px;
	border-top:1px solid #C41617;
	border-left:1px solid #C41617;
	background-color:#FCF0C6;
}

#nav {
	width:auto;
	height:50px;
	outline:0px solid #2848FF;
	position:absolute;
	bottom:10px;
	right:5px;
	font:bold 16px/50px Arial,sans-serif; /*через / указана высота строки и текст автоматически выставляется посередине высоты*/
	text-transform:uppercase;
}

#nav li {
	float:left;
	height:50px;
	outline:0px solid #cc0000;
	margin-left:4px;
	text-align:center;
}

#nav li a {
	display:block;
	height:50px;
	text-decoration:none;
	color:#2B2E83;
	outline:0px solid #ffcc00;
	padding:0 8px;
	border-top:1px solid #C41617;
	border-radius:10px 10px 0 0;
	border-right:1px solid #C41617;
}

#nav li a.small  {
	font:bold 16px Arial,sans-serif;
	height:45px;
	padding-top:5px;
}

#sidebar {
	width:200px;
	margin-left:0px;
	outline:0px solid #FF0A2F;
	background-color:#FCF0C6;
	margin-bottom:5px;
}

#sidebar a {
	display:block;
	width:200px;
	outline:0px solid blue;
	text-decoration:none;
	text-indent:10px;
	font:bold 16px Arial,sans-serif;
	color:#648CBC;
	padding:5px 5px;
	border-bottom:1px dotted #C41617;
	margin-bottom:3px;
}

#sidebar a.down {  /*убирает подчеркивание нижней строки списка*/
	margin-bottom:0;
	border-bottom:0;
}

#content h1, #content p, #content h2, #content h3, #content ul {
	font-family: Verdana;
	font-size:14px;
	color:#191919;
	line-height:1.5;
	letter-spacing:0.02em;
}

#content h1{
	width:738px;
	margin:20px auto 20px auto;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}

.red {
	color:#C41617;
	font-weight:bold;
}

.partner {           /*Для надписи "Наш партнер" */
	font-family: Arial;
	font-size:16px;
	font-weight:bold;
	color:#191919;
	margin:20px auto 20px auto;
	text-align:center;
}

#content h2{
	width:738px;
	margin:0 auto 20px auto;
	font-style:italic;
}

#content h3{
	width:738px;
	margin:0 auto 3px auto;
	font-style:italic;
}

#content p {
	width:738px;
	margin:0 auto 0 auto;
	padding-bottom:15px;
}

#content ul {
	width:718px;
	margin-left:20px;
}

#content li {
	padding-bottom:15px;
	list-style:square;
}

.clear {
	clear:both;
}

#footer {
	margin:3px auto 10px auto;
	width:1200px;
	height:40px;
	border-top:1px solid #C41617;
}
#footer h3 {
	color:#71716A;
	text-align:center;
	padding-top:10px;
	font:14px Verdana;	
}

Как-то так. Заранее спасибо.

**Quece** · 25.09.2013 04:23

В оригинале дано:

Нажмите на изображение для увеличения. Название: 12.jpg Просмотров: 3 Размер: 95.2 Кб ID: 11583

Нужно чтобы #beta была второй колонкой(справа), никак не реагирует, beta уходит вниз под alpha.

добавление этого куска в css не помогает, также уходит вниз(хоть это консультация сиксапарта, но увы):

Код:

#alpha {
left: 190px;
width: 770px;
}

#beta {
left: -770px;
width: 190px;
}

Что сделать?

**Quece** · 26.09.2013 00:32

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

**3s777** · 02.10.2013 18:28

Ребята помогите разобраться. Вроде все просто и легко, но у меня почему-то не получается. Или уже запарился, голова не варит.
Задача: трехколоночная версктка в общем divе (макс ширина 1240 мин 960), нужно чтобы в нем правый и левый блок были фиксированны по 250px, а средний адаптировался под ширину, но был бы не меньше чем 450px

**semyon** · 02.10.2013 18:46

3s777, редактор не показывается в быстром ответе - странно.

.div-left{ float:left; width:250px; }
.div-right{ float:right; width:250px; }
.div-centre{ min-width:450px; }

и родителю overflow:hidden прописать. Должно сработать

**Morgan** · 02.10.2013 18:50

Обычно так делаю _http://jsfiddle.net/SmVRz/2/

---------- Сообщение добавлено 17:50 ---------- Предыдущее 17:46 ----------

Только средний должен быть всегда длиннее боковых, иначе они вылезут за блок.
Можно установить min-height среднему.

**nbsp** · 02.10.2013 20:51

Всем приветы.
Подскажите пожалуйста почему на сайте может не отображаться меню если смотреть его через мобильный(андроид)?

**3s777** · 02.10.2013 21:20

nbsp,
Возможна применена адаптивная верстка и при определенном расширении экрана стоит свойство display:none;

	02.09.2013 16:11 #91
Witch_You Мне стало легче на 99 % Регистрация: 30.08.2009 Сообщений: 481 Репутация: 61 Webmoney BL: ?	Код HTML: body { background-image: url(/img/pic.jpg); background-repeat: repeat-x; } А можно сделать так, чтобы этот пик был расположен внизу страницы? Попробовал добавить padding-bottom: 800px; но не заметил разницы... Последний раз редактировалось Witch_You; 02.09.2013 в 16:13.
0 Witch_You

	24.09.2013 12:04 #93
LampCos Новичок Регистрация: 23.09.2013 Сообщений: 2 Репутация: 0	Всем привет. Прошу помощи. Вкратце: сверстал шапку, три колонки и подвал. В левой колонке меню, в правой разная фигня, которая со временем планируется меняться, то есть резиновая с растягиванием вниз. Все колонки равняются при помощи jQuery. Ситуация следующая: 1. Когда центральная центральная колонка содержит достаточно информации, что ее высота превышает высоту левого меню, то все нормально тянется и колонки нормально равняются. 2. Когда содержимое центральной колонки на другой странице сайта мало, что высота центральной колонки должна быть меньше левого меню, то вроде тоже все нормально равняется, НО при этом все содержимое страницы сдвигается вправо где-то на 20 пикселей, то есть двигается вся "wrapper". 3. При переключении на следующую страницу, где опять содержимое основной центральной колонки велико, то опять вся страница возвращается влево. 4. Такие же глюки и при наполнении правого блока. Верстка при помощи float. Прилагаю коды. В html коде строчки 50-54 закомментированы. Если в 50-й строчке (отмечена красным) снять комментарий и обновить страницу в браузере, то страница прыгнет обратно влево. Код HTML Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="js/jquery-1.7.min.js" type="text/javascript"></script> <script src="js/equalHeight.js" type="text/javascript"></script> <title>Специализированный центр изучения английского языка</title> </head> <body> <div id="wrapper"> <div id="topLine"></div> <div id="header"> <ul id="nav"> <li><a href="kids.html">Дети 6 лет</a></li> <li><a href="lowchool.html" class="small">Начальная <br>школа</a></li> <li><a href="hischool.html" class="small">Средняя <br>школа</a></li> <li><a href="gia.html">ГИА, ЕГЭ</a></li> <li><a href="fce.html" class="small">Международные <br>экзамены</a></li> <li><a href="adults.html">Взрослые</a></li> <li><a href="review.html">Отзывы</a></li> </ul> </div> <div id="left"> <div id="sidebar"> <ul> <li><a href="index.html" class="activel">Главная</a></li> <li><a href="news.html">Новости</a></li> <li><a href="success.html">Успехи учеников</a></li> <li><a href="portfolio.html">Потрфолио учителей</a></li> <li><a href="gallery.html">Галерея</a></li> <li><a href="price.html">Стоимость</a></li> <li><a href="contacts.html">Контакты</a></li> <li><a href="job.html">Вакансии</a></li> <li><a href="question.html" class="down">Задать вопрос</a></li> </ul> </div> </div> <div id="right"> <p class="partner">Наш партнер</p> <div align="center"> <a class="first" title="Меморандум о сотрудничестве" href="http://webmasters.ru/forum/images/memorandum.jpg"><img src="http://webmasters.ru/forum/images/memorandum_s.jpg" width="200" height="300"></a> </div> </div> <div id="content"> <h1>Вас приветствует коллектив <span class="red">British Land</span></h1> <ul> <li>xfcnm 'ktvtynf cgbcrf</li> <li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li> <!--<li><a href="gallery.html" class="dot">Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</a></li> <li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li> <li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li> <li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li> <li>Синхрофазотрон — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты. Чтобы частицы в процессе ускорения оставались на той же орбите, изменяется как ведущее магнитное поле, так и частота ускоряющего электрического поля.</li>--> </ul> </div> <div class="clear"></div> <div id="footer"><h3>British Land 2013</h3></div> </div> </body> </html> Код CSS Код: @import url(reset.css); body { background-color:#FCF5E2; outline:0px solid #222CF6; margin:0; padding:0; } #topLine { height:20px; background-image: url(../images/topRing.png); background-repeat:repeat-x; background-color:#FCF0C6; } #wrapper { outline:1px solid #5CF6C3; padding:0px; margin:0px auto 0 auto; max-width:1200px; position:relative; } #header { width:auto; height:310px; background-color:#FCF0C6; outline:0px solid #1D2FF5; position:relative; margin-top:0px; border-bottom:1px solid #C41617; } #left { width:210px; outline:0px solid black; float:left; margin-top:2px; border-top:1px solid #C41617; border-right:1px solid #C41617; background-color:#FCF0C6; } #content { width:738px; /height:500px;/ outline:0px solid black; margin:2px 0px 0 211px; background-color:#FCF5E2; padding:0px 20px 0px 20px; border-top:1px solid #C41617; } #right { width:210px; /height:300px;/ float:right; outline:0px solid blue; margin-top:2px; border-top:1px solid #C41617; border-left:1px solid #C41617; background-color:#FCF0C6; } #nav { width:auto; height:50px; outline:0px solid #2848FF; position:absolute; bottom:10px; right:5px; font:bold 16px/50px Arial,sans-serif; /через / указана высота строки и текст автоматически выставляется посередине высоты/ text-transform:uppercase; } #nav li { float:left; height:50px; outline:0px solid #cc0000; margin-left:4px; text-align:center; } #nav li a { display:block; height:50px; text-decoration:none; color:#2B2E83; outline:0px solid #ffcc00; padding:0 8px; border-top:1px solid #C41617; border-radius:10px 10px 0 0; border-right:1px solid #C41617; } #nav li a.small { font:bold 16px Arial,sans-serif; height:45px; padding-top:5px; } #sidebar { width:200px; margin-left:0px; outline:0px solid #FF0A2F; background-color:#FCF0C6; margin-bottom:5px; } #sidebar a { display:block; width:200px; outline:0px solid blue; text-decoration:none; text-indent:10px; font:bold 16px Arial,sans-serif; color:#648CBC; padding:5px 5px; border-bottom:1px dotted #C41617; margin-bottom:3px; } #sidebar a.down { /убирает подчеркивание нижней строки списка/ margin-bottom:0; border-bottom:0; } #content h1, #content p, #content h2, #content h3, #content ul { font-family: Verdana; font-size:14px; color:#191919; line-height:1.5; letter-spacing:0.02em; } #content h1{ width:738px; margin:20px auto 20px auto; font-size:20px; font-weight:bold; text-align:center; } .red { color:#C41617; font-weight:bold; } .partner { /Для надписи "Наш партнер" / font-family: Arial; font-size:16px; font-weight:bold; color:#191919; margin:20px auto 20px auto; text-align:center; } #content h2{ width:738px; margin:0 auto 20px auto; font-style:italic; } #content h3{ width:738px; margin:0 auto 3px auto; font-style:italic; } #content p { width:738px; margin:0 auto 0 auto; padding-bottom:15px; } #content ul { width:718px; margin-left:20px; } #content li { padding-bottom:15px; list-style:square; } .clear { clear:both; } #footer { margin:3px auto 10px auto; width:1200px; height:40px; border-top:1px solid #C41617; } #footer h3 { color:#71716A; text-align:center; padding-top:10px; font:14px Verdana; } Как-то так. Заранее спасибо.
0 LampCos

	25.09.2013 04:23 #94
Quece persona non grata Регистрация: 02.02.2012 Сообщений: 434 Репутация: 231	В оригинале дано: Нужно чтобы #beta была второй колонкой(справа), никак не реагирует, beta уходит вниз под alpha. добавление этого куска в css не помогает, также уходит вниз(хоть это консультация сиксапарта, но увы): Код: #alpha { left: 190px; width: 770px; } #beta { left: -770px; width: 190px; } Что сделать? Делаешь сайты онлайн/оффлайн, но не зарабатываешь? В ЛС.
0 Quece

	26.09.2013 00:32 #95
Quece persona non grata Регистрация: 02.02.2012 Сообщений: 434 Репутация: 231	поспал и разобрался, был отступ у виджетов такой, что вторая колонка улетала. Делаешь сайты онлайн/оффлайн, но не зарабатываешь? В ЛС.
0 Quece

	02.10.2013 18:28 #96
3s777 Гуру Регистрация: 09.02.2013 Сообщений: 1,417 Репутация: 384 Webmoney BL: ?	Ребята помогите разобраться. Вроде все просто и легко, но у меня почему-то не получается. Или уже запарился, голова не варит. Задача: трехколоночная версктка в общем divе (макс ширина 1240 мин 960), нужно чтобы в нем правый и левый блок были фиксированны по 250px, а средний адаптировался под ширину, но был бы не меньше чем 450px
0 3s777

Бесплатная помощь по верстке

Опции темы

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Бесплатная помощь по wordpress

Бесплатная помощь по ucoz сайтам

Нужна помощь по верстке.

Нужна не бесплатная помощь в заполнении сайта

Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	02.10.2013 20:51 #99
nbsp Опытный Регистрация: 10.11.2011 Сообщений: 423 Репутация: 50	Всем приветы. Подскажите пожалуйста почему на сайте может не отображаться меню если смотреть его через мобильный(андроид)? С Уважением, Андрей.
0 nbsp

Темы	Раздел	Ответов	Последний пост
Бесплатная помощь по wordpress	WordPress	2451	02.12.2018 02:53
Бесплатная помощь по ucoz сайтам	Создание сайтов	6	31.03.2013 14:25
Нужна помощь по верстке.	Web программирование	3	25.02.2013 11:54
Нужна не бесплатная помощь в заполнении сайта	Копирайтинг, переводы, постинг	4	22.12.2012 00:33
Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.	DLE	3	01.07.2012 17:09