Центриране на float: left

  • Автор Автор Foxy
  • Начална дата Начална дата
devent каза:
Задаваш width на главния див и след това с text-align: center?
Увеличете...
имам предвид самия див да е центриран (но той има float: left)

Код: 
.main
{
	width: 362px;
	height:  396px;
	background: url(images/main.jpg);
	float: left;
}
 
Ами я се замисли как ще се центрира , след като го залепяш в ляво? Ами няма да стане! Я по-добре кажи какво имаш в предвид, че да знаем как да ти помогнем. Ако са няколко дива с флоат лефт , направи един главен на тях и на тоя главния му сложи ширина и margin:0 auto; т.е. ти центрираш главния, но също и тези с флоат вътре дивове също.
 
shterev каза:
Ами я се замисли как ще се центрира , след като го залепяш в ляво? Ами няма да стане! Я по-добре кажи какво имаш в предвид, че да знаем как да ти помогнем. Ако са няколко дива с флоат лефт , направи един главен на тях и на тоя главния му сложи ширина и margin:0 auto; т.е. ти центрираш главния, но също и тези с флоат вътре дивове също.
Увеличете...

Нещо не те разбрах - за главния див, вкойто да сложа останалите го направих, но това с width и margin нещо не схванах:

Код: 
#cont
{
	margin: 0 auto;
	width: 888px;
}

.menu
{
	width: 210px;
	height: 244px;
	background: url(images/menu-main.jpg);
	float: left;
}

.main
{
	width: 362px;
	height:  396px;
	background: url(images/main.jpg);
	float: left;
}

.reclame
{
	width: 210px;
	height: 244px;
	background: url(images/reclame-main.jpg);
	float: left;
}

.razst-left
{
	width: 51px;
	height: 244px;
	background: url(images/razst.jpg);
	float: left;
}

.razst-right
{
	width: 51px;
	height: 244px;
	background: url(images/razst.jpg);
	float: left;
}

.footer
{
	width: 888px;
	height: 35px;
	background: url(images/footer.jpg) no-repeat;
	margin-top: 36px;
	margin-right: 155px;
	float: left;
}
 
Код: 
<div id="cont">
<div class="menu">
<img src="images/menu-text.jpg" width="210px" height="36px" />
</div>
<div class="razst-left">
</div>
<div class="main">
<img src="images/main-text.jpg" width="362px" height="36px" />
</div>
<div class="razst-right">
</div>
<div class="reclame">
<img src="images/reclame-text.jpg" width="210px" height="36px" />
</div>
<div class="footer">
</div>
</div>
 
Код: 
<!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" />

<title> Добре дошли!</title>
<style>
	
	
#cont
{
   margin: 0 auto;
   width: 888px; border: solid 1px red;
}

.menu
{
   width: 210px;
   height: 244px;
   background: #000000 url(images/menu-main.jpg);
   float: left;
}

.main
{
   width: 362px;
   height:  396px;
   background: #f0f0f0 url(images/main.jpg);
   float: left;
}

.reclame
{
   width: 210px;
   height: 244px;
   background: #c3c3c3 url(images/reclame-main.jpg);
   float: left;
}

.razst-left
{
   width: 51px;
   height: 244px;
   background: url(images/razst.jpg);
   float: left;
}

.razst-right
{
   width: 51px;
   height: 244px;
   background: url(images/razst.jpg);
   float: left;
}

.footer
{
   width: 888px;
   height: 35px;
   background: #cccccc url(images/footer.jpg) no-repeat;
   margin-top: 36px;
   margin-right: 155px;
   float: left;
} 
	
</style>
	</head>
	<body>
		
		
		
<div id="cont">
	<div class="menu">
		<img src="images/menu-text.jpg" width="210px" height="36px" />
	</div>
	
	<div class="razst-left"></div>
	
	<div class="main">
		<img src="images/main-text.jpg" width="362px" height="36px" />
	</div>
	
	<div class="razst-right"></div>
	
	<div class="reclame">
		<img src="images/reclame-text.jpg" width="210px" height="36px" />
	</div>
	<div style="clear:both;"></div>
	<div class="footer"></div>
</div> 
		
		
		
	</body>
</html>


Сложих по един цвят за бекграунд да видя за какво става дума. Та те сега са си центрирани според резолюцията, или ти нещо дро искаш да става?
 
shterev каза:
Код: 
<!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" />

<title> Добре дошли!</title>
<style>
	
	
#cont
{
   margin: 0 auto;
   width: 888px; border: solid 1px red;
}

.menu
{
   width: 210px;
   height: 244px;
   background: #000000 url(images/menu-main.jpg);
   float: left;
}

.main
{
   width: 362px;
   height:  396px;
   background: #f0f0f0 url(images/main.jpg);
   float: left;
}

.reclame
{
   width: 210px;
   height: 244px;
   background: #c3c3c3 url(images/reclame-main.jpg);
   float: left;
}

.razst-left
{
   width: 51px;
   height: 244px;
   background: url(images/razst.jpg);
   float: left;
}

.razst-right
{
   width: 51px;
   height: 244px;
   background: url(images/razst.jpg);
   float: left;
}

.footer
{
   width: 888px;
   height: 35px;
   background: #cccccc url(images/footer.jpg) no-repeat;
   margin-top: 36px;
   margin-right: 155px;
   float: left;
} 
	
</style>
	</head>
	<body>
		
		
		
<div id="cont">
	<div class="menu">
		<img src="images/menu-text.jpg" width="210px" height="36px" />
	</div>
	
	<div class="razst-left"></div>
	
	<div class="main">
		<img src="images/main-text.jpg" width="362px" height="36px" />
	</div>
	
	<div class="razst-right"></div>
	
	<div class="reclame">
		<img src="images/reclame-text.jpg" width="210px" height="36px" />
	</div>
	<div style="clear:both;"></div>
	<div class="footer"></div>
</div> 
		
		
		
	</body>
</html>


Сложих по един цвят за бекграунд да видя за какво става дума. Та те сега са си центрирани според резолюцията, или ти нещо дро искаш да става?
Увеличете...
+1
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе