Помогите с вёрсткой

DjTarik · September 9, 2008

В общем - проблема такая:

Вот скрин -

Как эту часть шаблона сделать, чтобы она расширялась на весь экран?

Я отдельно делаю левую часть и правую... Правая - всё картинка, а левая - высота 100% и ширина в 1px... (на рисунке примерно видно, как я резал в фотошопе) Размножаю - всё нормально.... Но! Как сделать номер телефона тоже по центру?

P.S. Могу предположить, что с <div> и position - но как?

P.P.S. Спасибо...

Vlad · September 10, 2008

Если это картинка, то ширина известна и можно с помощью margin выровнять.

http://htmlbook.ru/faq/?a=45

Или text-align: center использовать.

DjTarik · September 10, 2008

На примере:

HTML

..........
<td id="maintdtel"> 
<div id="bgtelright">2</div>
<div id="bgtelleft">1</div>
</td>
..........

CSS

[b]#maintdtel[/b] {
height: 128px;
}

[b]#bgtelright[/b] {
height: 100%;
width: 409px;
float: right;
background-image: url("images/bgtelright.jpg");
background-repeat: no-repeat;}

[b]#bgtelleft[/b] {
height: 100%;
background-image: url("images/bgtelleft.jpg");
background-repeat: repeat-x;}

Как поставить ещё один слой, который будет находится ровно по центру ячейки с id="maintdtel", не зависимо от того, какое разрешение экрана?

P.S. Заранее извиняюсь, если чё не так понял или непонятно описал суть проблемы...

DjTarik · September 12, 2008

С предыдушим вопросом разобрался, теперь возник новый:

Можно ли с помощью <div>-ов построить такой макет - 3 колонки:

- левая - 25% от ширины экрана...

- правая - 200px (фиксированая)...

- центральная - всю оставшуюся длину экрана...

P.S. Макет должен быть кроссброузерный и расширяться в зависимости от разрешения пользователя...

P.P.S. C помощью таблицы - делаю за 5 сек... А вот как быть с дивами?

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

...Спасибо...

ZoNT · September 12, 2008

С предыдушим вопросом разобрался, теперь возник новый:
Можно ли с помощью <div>-ов построить такой макет - 3 колонки:
- левая - 25% от ширины экрана...
- правая - 200px (фиксированая)...
- центральная - всю оставшуюся длину экрана...
P.S. Макет должен быть кроссброузерный и расширяться в зависимости от разрешения пользователя...
P.P.S. C помощью таблицы - делаю за 5 сек... А вот как быть с дивами?
Если уже был подобный вопрос - дайте, плиз, ссылочку...
...Спасибо...

Левый див: позишн=абсолют, ширина=25%, лефт=0рх

Правый див: позишн=абсолют, ширина=200рх, райт=0рх

Центр: позишн=релэйтив, марджин: 0px 200px 0px 25%;

DjTarik · September 12, 2008

Левый див: позишн=абсолют, ширина=25%, лефт=0рх
Правый див: позишн=абсолют, ширина=200рх, райт=0рх
Центр: позишн=релэйтив, марджин: 0px 200px 0px 25%;

Да, такой вариант работает... Спасибо... Но нельзя ли как-нить обойтись без позишн=абсолют? Просто у меня ещё и под этими тремя блоками горизонтальный блок на всю длину... И если в центральных пусто - то они "наезжают" на "подвал"...

P.S. Или такие макеты лучше делать таблицами?

ZoNT · September 12, 2008

Да, такой вариант работает... Спасибо... Но нельзя ли как-нить обойтись без позишн=абсолют? Просто у меня ещё и под этими тремя блоками горизонтальный блок на всю длину... И если в центральных пусто - то они "наезжают" на "подвал"...
P.S. Или такие макеты лучше делать таблицами?

так ты эти три блока помести в контейнер (тоже див) и задай ему позишн=релэйтив.

Azadi · September 12, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	#wrap {
		background:#eee;
		overflow:hidden;
		height:1%;
		min-width:760px;
	}
		.center {
			float:left;
			width:100%;
			margin-right:-100%;
		}
		.center DIV {
			margin:0 200px 0 25%;
			background:#ffe;
		}
	.left {
		float:left;
		width:25%;
		background:#fef;
	}
	.right {
		float:right;
		width:200px;
		background:#efe;
	}
/* Additional styles*/

	* {
		padding:0;
		margin:0;
		border:0;
	}
	P {
		margin:0 1em 1em;
	}
	H1 {
		text-align:center;
		padding:.5em;
	}

</style>
</head>
<body>
	<div id="wrap">
		<div class="header">
			<H1>Заголовок</H1>
		</div>
		<div class="center">
			<div>
				<p>Text</p>	  
			</div>
		</div>
		<div class="left">
			<p>Text</p>
		</div>
		<div class="right">
			<p>Text</p>
		</div>
	</div>
</body>
</html>

Вот как-то так. Основа: http://trifler.ru/blog/post_1219421644.html

hmelii · October 10, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
html, body{ margin:0; padding:0;}
.left-side{float:left; width:25%; margin:0!important; /*IE6*/margin-right:-3px; border:1px solid red;}
.right-side{float:right; width:200px; margin:0!important; /*IE6*/margin-left:-3px; border:1px solid red;}
.content{overflow:hidden; display:block!important; /*IE6*/display:inline-block; border:1px solid red;}
</style>
</head>

<body>

<div class="left-side">левый блок 25%</div>
<div class="right-side">правый 200px</div>
<div class="content">Тянущийся центральный</div>



</body>
</html>

Посетить мою домашнюю страницу

klierik · October 10, 2008

оффтоп

похоже еще один участник пиарит свой ресурс: hmelii

это что мода такая пошла?! оО

hmelii · October 10, 2008

Не пойму я твою фразу Что в этом такого плохого Я разве не имею право это делать ? И почему ты называешь мою версию офтопом Разве она не проще и не лучше выше описаной

Vlad · October 11, 2008

klierik, все в рамках, не наезжай на человека.

hmelii, он не про код, а о своем рассуждал.

Altsky · October 13, 2008

Уважаемые мастера! помогите, пожалуйста, решить проблему. Вроде прошерстил весь ресурс, но так и не понял: как мне сделать так,чтобы сайт распологался строго по центру монитора(имеется в виду по горизонтали,а по вертикали начинался с "потолка") независимо от диагонали монитора пользователя. ВАЖНО :необходимо чтобы весь сайт был по центру,а не разъезжался по блокам.Сам сайт фиксированного размера, состоит из шапки, 2 секторов под ней и подвала сайта.

Заранее благодарю

Edited October 13, 2008 by Altsky

Azadi · October 13, 2008

Учитесь пользоваться поиском: http://nigma.ru/index.php?s=%D0%B3%D0%BE%D...=1〈=all

Sign In

Помогите с вёрсткой

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information