Divы выровнять по центру и по горизонтали

next · December 29, 2011

Здравствуйте Всем, верстаю макетик свой.

В общем такая проблема. меню состоит из картинок расположенных в ряд одноц линией. каждая картинка заключена в див, по горизонтали я их поставил , а вот как, теперь делать итак, что бы они были еше и по центру. спасибо. вот код html и css


<!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>
<title>MK</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name ="title" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
	<script type="text/javascript"> 
	  $(function() { 
	    if ($.browser.msie && $.browser.version.substr(0,1)<7) 
	    { 
	      $('.tooltip').mouseover(function(){ 
	            $(this).children('span').show(); 
	          }).mouseout(function(){ 
	            $(this).children('span').hide(); 
	          }) 
	    } 
	  }); 
	</script>
</head>
<body>


<div id="menu">
<a href="#" class="tooltip" ><div id="home"></div> <span>Главная страница</span></a>
<a href="#" class="tooltip"><div id="blog"></div><span>Личный блог,мысли</span></a>
<a href="#" class="tooltip"><div id="port"></div><span>Портфолио</span></a>
<a href="#" class="tooltip"><div id="serv"></div><span>Услуги</span></a>
<a href="#" class="tooltip"><div id="contact"></div><span>Контакты</span></a>
<a href="#" class="tooltip"><div id="forum"></div><span>Форум</span></a>
</div>
<div id="logo"></div>



</body>
</html>


* {
    margin: 0;
    padding: 0;
    border: 0;
}
@font-face {
    font-family: 'Europe';
    src: url('f/europe-webfont.eot'); /* IE 5-8 */     
    src: url('f/europe-webfont.eot?#iefix') format('eot'), /* IE 5-8 */          
         url('f/europe-webfont.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */          
         url('f/europe-webfont.ttf') format('truetype'), /* Opera, Safari */          
         url('f/europe-webfont.svg#webfonthfBX5nKD') format('svg'); /* iOS */     
    font-weight: normal;
    font-style: normal;
}

body {
    background: url('i/bg2.jpg');
    font-family: Europe , sans-serif;
}

#logo {
    background: url('i/logo.png');
    width: 315px;
    height: 311px;
    margin: auto; 
    margin-bottom: 10px;
    z-index:10;
    }

#menu {
    margin-top: 0px;
    background: url('i/bg_menu.jpg');
    min-width: 1024px;
    width: 100%;
    height: 50px;
    z-index: -1;


}
/**
 * Иконки меню  не знаю зачем это пишу, наверно, что бы запомнить лучше..э..
 */



 #home {

    float: left;
    background: url('i/menu/home.png');
    width: 38px;
    height: 50px;
    margin-right: 20px;

 }
 #blog {
    float: left;
    background: url('i/menu/blog.png');
    width: 38px;
    height: 50px;
    margin-right: 20px;

 }
 #port {
    float: left;
    background: url('i/menu/port.png');
    width: 42px;
    height: 50px;
    margin-right: 20px;

 }
 #serv {
    float: left;
    background: url('i/menu/services.png');
    width: 32px;
    height: 50px;
    margin-right: 20px;

 }
 #price {
    float: left;
    background: url('i/menu/price.png');
    width: 31px;
    height: 45px;
    margin-right: 20px;

 }
 #contact {
    float: left;
    background: url('i/menu/cont.png');
    width: 42px;
    height: 45px;
    margin-right: 20px;

 }
 #forum {
    float: left;
    background: url('i/menu/forum.png');
    width: 42px;
    height: 50px;
    margin-right: 20px;

 }
 /**
  * Стили подсказок епта, при наведении мышки еще 
    */
    .tooltip 
	{ 
	  position: relative; 

	  cursor:default; 
	  display:inline; 
	  text-decoration: none; 
	  color: #222; 
	  outline: none; 
	} 

	.tooltip span 
	{ 
	   text-align: center;
	  visibility: hidden; 
	  position: absolute; 
	  bottom: -100px; 
	  left: 50%; 
	  z-index: 999; 
	  width: 230px; 
	  margin-left: -160px; 
	  padding: 10px; 
	  border: 2px solid #ccc; 
	  opacity: .9; 
	  background-color: url('i/bg2.jpg'); 
	  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 
	  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 
	  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 
	  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 
	  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); 	  
	  -moz-border-radius: 4px; 
	  border-radius: 4px; 
	  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 
	  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 
      box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; 
 	  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
	} 

	.tooltip:hover 
	{ 
	  border: 0; /* IE6 fix */
      word-spacing: 1px;
	} 

	.tooltip:hover span 
	{ 
	    word-spacing: 1px;
	  visibility: visible; 
	}

вот скрин

sammasati · December 29, 2011

Назначить width меню и "margin: 0 auto".

Кстати, так делать нельзя:

<a href="#" class="tooltip" ><div id="home"></div> <span>Главная страница</span></a>

Блоки внутри строк размещать нельзя. Лучше назначить ссылке "display: block", а див убрать.

Да и вообще, меню удобней делать через списки. И с точки зрения семантики это правильнее, по-моему.

Edited December 29, 2011 by sammasati

next · December 29, 2011

id Menu это темно серая полсочка, а сами дивы, ссылки ни в че не заключены они в диве меню(темно серая полоска) стоят. так в меню именно маргин ставить??? Оо дык они не выравниваются все равно по центру. ибо они же отдельно)

sammasati · December 29, 2011

В такой разметке только такой вариант в голову приходит

#menu {
  padding-left: 30%;
}

next · December 29, 2011

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

Radiocity · December 29, 2011

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

Признаюсь, не читал тот ужас, который вы написали - многабукаф! :facepalmxd:

Однако, реализовать задумку довольно легко:

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

Далее вся конструкция оборачивается слоем, который и выравнивается как вам угодно.

В теории работает кроссбраузерно :lol:

next · December 30, 2011

Далее вся конструкция оборачивается слоем, который и выравнивается как вам угодно.

иожно поподробнее?)

hedgehog · December 30, 2011

А что, text-align: center; родителю не подходит?

Radiocity · December 30, 2011

А что, text-align: center; родителю не подходит?

Определенно не подходит. Дочерние элементы будут с float:left.

next, http://htmlbook.ru/faq/kak-vyrovnyat-sloi-po-tsentru-veb-stranitsy

Edited December 30, 2011 by Radiocity

Sign In

Divы выровнять по центру и по горизонтали

Question

next

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sammasati

Link to comment

Share on other sites

next

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

next

Link to comment

Share on other sites

Radiocity

Link to comment

Share on other sites

next

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Radiocity

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information