header + 2 spacer div-a

N

nzhul12

Registered
Абе хора как да направя черният div в средата да седи центрирано, а двата сини div-а да запълват разстоянието от ляво и от дясно(тоест да са на един ред) и да се разтягат според резолюцията на която се гледа страницата.
Аз по скоро имам проблем с позиционирането им на един ред иначе за разтягането знам, че ще стане с width: 100% на .spacer ...

ScreenHunter_01May150945.jpg


html
Код: 
<body>
<div id="container">
<div class="spacer"></div>
	<div id="head"></div>
<div class="spacer"></div>

<div>
</body>
css
Код: 
#container
{
	margin: 0 auto;
	height: 191px;
}
#head
{
	background: black;
	width: 900px;
	height: 191px;
}
.spacer
{
	background: blue;
	width: 20px;
	height: 191px;
}

Елементарно е предполагам ама не се сещам как става.
 
И как ще го направиш със 100% много ми е интересно? Та нали да ре1ем целия ред е 100%, задавайки само на 1 елемент(див) 100% то за другите няма място! Така трябва да видиш точно по колко проценти ще задаваш , но трябва да е нещо от сорта на: да речем 20% в ляво и дясно 60% ти останаха за средния див. После и трите ги флоатваш float:left; . След трите флоатнати дива слагаш един със изчисване на флоатинга : <div style="clear:both;"></div>. Това е на теория. Ако имаш проблем, пиши.
 
<div style="width:20%; background-color:blue; float:left;">
dfsdffdsdfsfdsf sd sdf sdf dsff
</div>
<div style="width:60%; background-color:black; float:left; ">
sdfsdfdsfdsff
</div>
<div style="width:20%; background-color:blue; float:left;">
dfsdffdsdfsfdsf sd sdf sdf dsff
</div>
<div style="clear:both;"></div>
Увеличете...

Грубо демо на казаното по-горе.
 
Добре докарахме ги на един ред, но мен ме интересува ако ситуацията е следната ... имаме хедър който е с размери width: 960px на height: 191px
и искам да бъде центриран а около него да сложа 2 spacer дива които да са с изображение width: 1px и height: 191px repeat-x които да запълват останалото пространство.
Ето за какво иде реч:
ScreenHunter_03May151015.jpg


Има ли начин да се паправи така, че да се запълва докрай разстоянието без елемента да пада на долния ред ?

нарочно съм оставил бялото разстояние м/у хедъра и спейсърите за да се вижда границата.

ето css кода до тук:
Код: 
*{ margin: 0;
padding: 0px;}

#header
{
	background: url('images/banner.jpg') no-repeat;
	width: 960px;
	height: 191px;
	float: left;
	margin-right: -13px;
}

.h_spacer
{
	background: url('images/h-spacer.jpg') repeat-x;
	height: 191px;
	width: 10%;
	float: left;
	margin-right: 2px;
}
 
В такъв случай правиш следното:

имаш един общ див, на който задаваш височина, без ширина.Задаваш му картинакта 1 пиксел, да се повтаря по хоризонтала. В него слагаш хедъра със ширината и височината и му задаваш margin:0 auto. да се центрира. И си готов.

<!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=windows-1251" />
<style>


#h_spacer
{
background: url('images/h-spacer.jpg') repeat-x left top;
height: 191px;
}
#header
{
background: url('images/banner.jpg') no-repeat;
width: 960px;
height: 191px;
margin:0 auto;
}
</style>
</head>
<body>

<div id="h_spacer">
<div id="header"></div>
</div>
</body>
</html>
Увеличете...
 
Браво брато, мерси много :) +1
ScreenHunter_04May151043.jpg


Хвърлил съм се и аз като риба на сухо да правя е това:
284-Blue-Edition.jpg


На Photoshop лесно го нарисувах ама сега ще видя зор с кода :).
Хубавото е, че няма краен срок. Когато стане тогава, ама ще наспамя яко форумите докат стане работата :)
 
същатата работа за футъра! А средната част само един контент центриран без height
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе