Центриране с цсс

M

MontefuckeR

Registered
Ха немога да центрирам един див :Д :Д ахах...
значи в момента изглежда така:
http://web-tourist.net/project/montefucker/helmasd.jpg
има някакво място м/у сивия и синия правоъгалник и жълтия неможе да влезе зарди синия...
като задам на синия флоат:лефт; всичко се намества ама като си пусна прозорчето с фаворитите и като погледна сайта то синия правоъгалник го няма>>
сив=#left
син= #center
жълт= #right
ето style.css:
#left {
background: url(images/left.gif);
background-repeat:no-repeat;
width:207px;
height:423px;
float:left;
}
#center {
background: url(images/center.gif);
background-repeat:no-repeat;
width:591px;
height:423px;
}
#right {
background: url(images/right.gif);
background-repeat:no-repeat;
width:205px;
height:423px;
float:right;
}
Увеличете...
 
На тритре сложи float:left; ,след тях сложи див с някакъе клас , да изчистиш флоота,(clear:both;).A вече всичко това го сложи в друг див, който да има зададена ширина (width:1000px;) и му задай:,margin:0px auto;
 
добре я някой да подреди така 5 правоъгалника
1.хеадер
2.ляво
2.среда
3.дясно
4.фуутер
и да ми даде кода на цсс файла да видя как е, че при мен има размествания
 
Demo: http://mp3-store.host-bg.info/project/

Код: 
<!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> 
</head> 
<style type="text/css"> 

body { background-color: #FFF; color: #FFF; font-size: 14px; font-family: Verdana, Arial; } 

a:link {color: #000; text-decoration: none; }     
a:visited {color: #000; text-decoration: none; }  
a:hover {color: #000; text-decoration: none; }   
a:active {color: #000; text-decoration: none; }   

.body { width: 900px; height: auto; margin: 0 auto; } 

.header { width: 900px; height: 200px;  background-color: #000; } 

.menu { width: 900px; height: 40px;  background-color: orange; margin-top: 2px; margin-bottom: 2px; } 

.left { width: 150px; height: auto; float: left; background-color: #000; } 

.leftmenu { width: 150px; height: 25px; background-color: orange; font-size: 18px; font-family: impact;} 

.reklama { width: 150px; height: 600px; margin-top: 2px; background-color: black;} 

.center { width: 596px; height: auto; float: left; margin-left: 2px; margin-right: 2px; } 

.banner_up { width: 594px; height: 60px; background-color: orange;  } 

.news { width: 594px; height: 500px; border: 1px solid #000; background-color: orange; margin-top: 2px; } 

.banner_down { width: 594px; height: 60px;  background-color: orange; margin-top: 2px; } 

.right { width: 150px; height: auto; float: right; background-color: orange; } 

.rightmenu { width: 150px; height: 25px;  font-size: 18px; font-family: impact; } 

.footer { width: 900px; height: 40px;  background-color: #000; margin-top: 2px; margin-bottom: 2px; } 

.clear { clear: both; } 

</style> 
<body> 

   <div class="body"> 
    
      <div class="header">  kartinka za header </div> 
      <div class="menu"><CENTER> <A href="http://index.php">НАЧАЛО</a>    <a href="http://news.php">НОВИНИ</a>   <A href="http://index.php">КЛАСАЦИЙ</a>    <A href="http://index.php">ХИТОВЕ</a>   <A href="http://index.php">ЗА КОНТАКТИ</a> 
	  </center></div> 
       
   <div class="left"> 
    
      <div class="leftmenu">Статистика:</div>
	  <div class="reklama">  aaaaaaa  </div> 
	  
	  </div> 


 
   <div class="center"> 
    
      <div class="banner_up">   aaaaaaaaaaaaaaaa </div> 
      <div class="news">  aaaaaaaaaaaaaaaaaaaaaaaaa  </div> 
      <div class="banner_down">  aaaaaaaaaaaaaaaaaa  </div> 
    
   </div> 
    
   <div class="right"> 
    
      <div class="rightmenu">  Последно:</div> 
      <div class="reklama"> aa   </div> 
    
   </div> 
    
      <div class="clear">     </div> 
       
      <div class="footer">  <center>footer</center> </div> 
    
   </div> 
    
</body> 
</html>
 
html:
<HTML>
<HEAD>
<TITLE>dfgf</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<div id="header"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
</HTML>
Увеличете...
css:
body,html{
margin:0px auto;
}
#header {
background: url(images/header.gif);
background-repeat:no-repeat;
width:1003px;
height:114px;
}
#left {
background: url(images/left.gif);
background-repeat:no-repeat;
width:207px;
height:423px;
float:left;
}
#center {
background: url(images/center.gif);
background-repeat:no-repeat;
width:591px;
height:423px;
}
#right {
background: url(images/right.gif);
background-repeat:no-repeat;
width:205px;
height:423px;
float:right;
}
#footer {
background: url(images/footer.gif);
background-repeat:no-repeat;
width:1003px;
height:43px;
}
Увеличете...
Който го позиционира да се вижда еднакво под всички браузери +1 :)
 
<!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">
<HTML>
<HEAD>
<TITLE>dfgf</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style>
body,html{
margin:0px auto;
}

#pagewidth{
width:1003px;
margin:auto;
}
#header {
background:#999;
background-repeat:no-repeat;
width:1003px;
height:114px;
}
#left {
background:green;
background-repeat:no-repeat;
width:207px;
height:423px;
float:left;
}
#center {
background:blue;
background-repeat:no-repeat;
width:589px;
height:423px;
float:left;
}
#right {
background:red;
background-repeat:no-repeat;
width:207px;
height:423px;
float:right;
}
#footer {
background:#ccc;
background-repeat:no-repeat;
width:1003px;
height:43px;
clear:both;
}
</style>
</HEAD>
<BODY>
<div id="pagewidth">
<div id="header">dasdas</div>
<div id="left">dasdas</div>
<div id="center">dasdas</div>
<div id="right">dasdas</div>
<div id="footer">dasdas</div>
</div>
</body>
</HTML>

и другия път смятай правилно ;)
чети и уроците

замених ти картинките за бекграунд с цветове за да мога да виждам кое къде е , но ти ще си ги оправиш сам обратно
 
ами да ти кажа че небеше си сметнал ширината на дивовете под хедъра
left+center+right > 1003px колкото ти беше хедъра + това нямаше главен див в които да държи всички
 
Всъщност аз го имах ама беше в хеадер.пхп който го инкудвам и съм забравил да Ви го посоча...сега ще го оправя всичко че на 100 места имам цсс..
важното ,е че се оправи :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе