Jump to content
  • 0

Резиновый макет

liquid

Asked by liquid,

 Share

Question

liquid Explorer

liquid

Posted
Posted

Добрый день!

Подскажите,как лучше реализовать верстку резинового макета-позиционированием,плавающими блоками,отрицательным маргином или же еще как можно?

нужно:

хедер(ширина 100%)

верхнее меню(ширина 100%)

лколонка(ширина 200пх)+контент(резина)+рколонка(200пх)

футер(ширина 100%)

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0
liquid Explorer

liquid

Posted
  • Author
Posted (edited)

psywalker

можно по подробнее?

какими методами правильнее будет располагать блоки?

например,этот код приемлем или бред полный?

<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="leftcolum">
  <jdoc:include type="modules" name="left" style="xhtml" />  //модуль joomla
</div>

<div id="rightcolum">
  <jdoc:include type="modules" name="right" style="xhtml" />  //модуль joomla
</div>

<div id="content">
  <jdoc:include type="component" />   //модуль joomla
</div>

<div id="hfooter"></div>

</div>
<div id="footer"></div>

#wrapper {
	background-color: #0FC;
	min-width: 1000px;
	min-height:100%;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#header {
	height: 132px;
	width: 100%;
	margin: 0px;
	padding: 0px;


	min-width: 1000px;
}
#nav {
	height: 30px;


	margin-bottom: 50px;
}

#leftcolum {
	float: left;
	width: 220px;

	margin: 0px 10px 10px 10px;
}
#rightcolum {
	width: 220px;
	float: right;
	margin: 0px 10px 10px 10px;
	overflow: hidden;
}
#content {
	margin: 9px 250px 10px 250px;
	border: solid 1px;
}
#hfooter {
	height: 105px;
	clear: both;
	width: 100%;

}


#footer {
	height: 100px;
	width: 100%;
	margin-top: -101px;
	border-top: solid 1px;
	border-color: #039;
	min-width: 1000px;
}

Edited by liquid
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Держи тебе по делу, а дальше сам додумаешь.

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	*html body {
width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

} 
	#left_bg { 
		float: left;
		width: 25%;
		background: red;
		margin-right: -3px;
	}
	#right_bg { 
		float: right; 
		width: 25%;
		background: red;
		margin-left: -3px;
	}
	#content {
		overflow: hidden;
		background: blue;
		zoom:1;
	}
</style>
</head>


<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>

<div id="content">Тут какой-то контент</div>

</body>
</html>

Link to comment
Share on other sites
  • 0
liquid Explorer

liquid

Posted
  • Author
Posted (edited)

psywalker

а чем ваш код отличается от моего,не существенно,вроде все тоже самое,а мне хотелось бы понять:

какую верстку лучше применять в данном случае(резина)
Edited by liquid
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
psywalker

а чем ваш код отличается от моего,не существенно,вроде все тоже самое,а мне хотелось бы понять:

В том, что мой вариант универсальный в плане контента, т.е. при убирании например боковых колонок центр будет просто заполнять их пространство.

Link to comment
Share on other sites
  • 0
121990 Explorer

121990

Posted
Posted
мб ктонить еще отписаться,какую верстку лучше применять в данном случае,модератор по делу так ничего и не ответил,можно больше конкретики?

Он сам ничего не знает :ph34r:, еще удивляюсь как он не написал stepbyspep..

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Он сам ничего не знает :ph34r:, еще удивляюсь как он не написал stepbyspep..

Таким как ты, я буду это писать постоянно. Тут уже ничего не попишешь. :)

Ты тут очень неправ.

Медведь, не спорь с профи, он то своё дело знает на все 100% :)

Link to comment
Share on other sites
  • 0
liquid Explorer

liquid

Posted
  • Author
Posted (edited)

Спасибо всем за ответы!

http://markup-m.narod.ru/

Принципиальное отличие - контент впереди по коду.

поковырялся с вашим макетом,но так и не въехал,как увеличить ширину левого и правого столбца,зачем 3(w1-w3) блока,в общем абсолютно не понял,как и что там))

а что скажите про такую верстку

<html>
<body>

<div id="wrapper">

  <div id="header"></div>

  <div id="container">

	<div id="content">
	  <div id="text">

	  </div>
	</div>

	<div id="left"></div>

	<div id="right"></div>

	<div class="clear"></div>
  </div>

  <div id="footer"></div>

</div>

</body>
</html>

#wrapper {
  width: 100%;
  width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
  min-width: 1000px;
}
#container {width: 100%;}
#content {
  width: 100%;
  float: left;
}
#text {margin: 0 250px;}
#left {
  float: left;
  width: 250px;
  margin-left: -100%;
}
#right {
  float: left;
  width: 250px;
  margin-left: -250px;
}

вроде те же яйца,но тут нету тех 3 блоков и можете объяснить,почему если #text увеличить маргин с 250 например на 300+,то блок сужается и слева и справа,а нетолько с права,ведь margin:0 250px(250-это же отступ справа)

Edited by liquid
Link to comment
Share on other sites
  • 0
121990 Explorer

121990

Posted
Posted
Таким как ты, я буду это писать постоянно. Тут уже ничего не попишешь. :)

Через год увидим! Да я еще тебе буду потом переодически напоминать, что я всего достиг сам, а у тебя учитель был. Репетитор за 5у.е в час :ph34r:

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
поковырялся с вашим макетом,но так и не въехал,как увеличить ширину левого и правого столбца,зачем 3(w1-w3) блока,в общем абсолютно не понял,как и что там))

Можна на "ты"

Там блоков много потому что реализованна одинаковая высота колонок + контент самый первый по коду. Там кстати вместо картинки для бг можна использовать бордер. Тогда вообще все быстро можна будет менять.

а что скажите про такую верстку

ща заценим

Через год увидим! Да я еще тебе буду потом переодически напоминать, что я всего достиг сам, а у тебя учитель был. Репетитор за 5у.е в час :ph34r:

Я те по-украински скажу:"Не кажи гоп, доки не перестрибнув"

а что скажите про такую верстку

А че оценивать то? Тебе этот пример уже показывал psywalker. Мне ненравится так как с таким подходом основное содержание будет далеко внизу по коду.

#hfooter {

clear:both;

height:105px;

width:100%;

}

Это не лучший подход. Чтобы не залезть на футер - лучше контенту паддинг внизу сделай величиной как футер. И для очистки потока не лучший способ.

Также ты вроде попытался прибить футер к низу экрана. Но тогда и на html и body высоту нужно поставить.

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

liquid, смотри, в чём плюсы моего способа:

1) Мало кода, легко разобраться

2) Колонки можно менять, как угодно и убирать.

Но это всё при том, если тебе не принципиально, как сказал Мишка, чтобы контент был впереди. Если так, то конечно-же его способ лучше.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Через год увидим! Да я еще тебе буду потом переодически напоминать, что я всего достиг сам, а у тебя учитель был. Репетитор за 5у.е в час :ph34r:

Я конечно не против, но как правило такие люди, так и продолжают трепать языком, а на деле... :)

Link to comment
Share on other sites
  • 0
liquid Explorer

liquid

Posted
  • Author
Posted (edited)
liquid, смотри, в чём плюсы моего способа:

1) Мало кода, легко разобраться

2) Колонки можно менять, как угодно и убирать.

Но это всё при том, если тебе не принципиально, как сказал Мишка, чтобы контент был впереди. Если так, то конечно-же его способ лучше.

Спасибо,что не оставили без внимания,но все же остановился на том макете,который чуть выше приводил и там контент тоже в начале,вот токо опять столкнулся с проблемой((если в контенте картинка,то при сужение окна правый блок наезжает на контент,помогите,как решить это,без применения оверлоу?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" />


<jdoc:include type="head" />	
</head>

<body>

<div id="wrapper">

  <div id="header"></div>
<div id="nav"></div>
  <div id="container">

	<div id="content">
	  <div id="text">
		<jdoc:include type="component" />
	  </div>
	</div>

	<div id="left">
	  <jdoc:include type="modules" name="left" style="xhtml" />
	</div>

	<div id="right">
	  <jdoc:include type="modules" name="right" style="xhtml" />
	</div>

	<div class="clear"></div>
  </div>

  <div id="footer"></div>

</div>
</body>
</html>

#header {
	float: left;
	width: 100%;
	background-attachment: scroll;
	background-repeat: repeat-x;
	background-image: url(h.jpg);
	background-position: 0px 0px;
	background-color: #ffffff;
	height: 132px;
}

#nav {
	height: 30px;
	background-image: url(menu-bg.gif);
	background-repeat: repeat-x;
	margin-bottom: 10px;
	float: left;
	width: 100%;
}

.highlight {
	color: #F00;	
}
#wrapper {
  width: 100%;
  width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
  min-width: 1000px;
}
#container {width: 100%;
}
#content {
  width: 100%;
  float: left;

}
#text {
	margin: 0px 220px;

}
#left {
  float: left;
  width: 200px;
  margin-left: -100%;
   vertical-align   : top;
   padding		  : 10px;
   padding-top	  : 0;
   text-align	   : left;
}
#right {
	float: left;
	width: 200px;
	margin-left: -220px;
	vertical-align   : top;
	padding		  : 10px;
	padding-top	  : 0;
	text-align	   : left;
}

Edited by liquid
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept