Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Центрирования блоков внутри блока
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Центрирования блоков внутри блока

Страниц (1): [1]
 

1. Russer - 29 Декабря, 2015 - 12:16:46 - перейти к сообщению
Здравствуйте!
Есть простенький html блока menu.
CODE (html):
скопировать код в буфер обмена
  1. <ul id="menu">
  2.                <li><a href="#" >Главная</a></li>
  3.                <li><a href="#" >Компания</a></li>
  4.                <li><a href="#" >Обратная связь</a></li>
  5.                <li><a href="#" >Магазин</a></li>
  6.                <li><a href="#" >Компания</a></li>
  7.                <li><a style="cursor: pointer">&#9660;Контакты</a>
  8.                <ul>
  9.                 <li><a href="#">Адрес</a></li>
  10.                 <li><a href="#">Телефон</a></li>
  11.                 <li><a href="#">Email</a></li>
  12.                 </ul>
  13.                </li>    
  14.            </ul>

И таблица стилей css.
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. #menu {
  3.   position: absolute;
  4.    display: block;
  5.    top:0%;
  6.    bottom: 0%;
  7.    left:  21%;
  8.    right: 21%;
  9.    margin: 0;
  10.    height: 100%;
  11.    list-style-type: none;
  12.    width: 58%;
  13.    align-content:center;
  14.    align-items: center;
  15.    text-align: center;
  16.    padding-left: 0px;
  17.    padding-right: 0px;
  18.     }
  19. #menu li {
  20.   position: relative;
  21.    float: left;
  22.    display:inline;
  23.    align-content: center;
  24.    align-items: center;
  25.     }
  26. #menu a{
  27.   transition: 0.5s;
  28.    margin: auto;
  29.    display: block;
  30.    color: #008080;
  31.   text-decoration: none;
  32.    font-family: 'Comfortaa', cursive;
  33.    font-size: 0.7em;
  34.    font-weight: normal;
  35.    height: 100%;
  36.    line-height: 330%;
  37.    padding-left: 1em;
  38.    padding-right: 1em;
  39.     }
  40. #menu a:visited{
  41.   color: #008080;
  42.    }
  43. #menu a:active{
  44.   color: #008080;
  45.    }
  46. #menu a:hover{
  47.   transition: 0.5s;
  48.    background:linear-gradient(#d9eeec,#63BCB1);
  49.   color: white;
  50.     }
  51. #menu ul{
  52.   margin: 0;
  53.    padding: 0;
  54.    list-style-type: none;
  55.     }
  56. #menu ul li {
  57.   float: none;
  58.     }
  59. #menu li:hover ul{
  60.   display: block;
  61.     }
  62.  
  63. #menu ul{
  64.   border: #B0B0B0 solid 1px;
  65.   border-top: none;
  66.    background: linear-gradient(#FCFCFC,#DEDEDE);
  67.   display: none;
  68.    width: 100%;
  69.    position: absolute;
  70.    text-align: center;
  71.    height: auto;
  72.     }
  73. #menu ul li a{  
  74.   line-height: 150%;
  75.    border-top:solid 1px #DFDFDF;
  76.   height: auto;
  77.    width: inherit;
  78.    font-size: 0.6em;
  79.    font-weight: normal;
  80.     }
  81.  

Первый вопрос как поместить <ul> список , по центру div menu , как только не пробовал , ни чего не выходит.
И второй вопрос как правильно поместить текст ссылок так же по центру блока <a> сейчас использую line-height: 330%; , но догадываюсь что это не верное решение , так как при изменение размеров браузера , текст начинает менять свое положение по вертикали.
2. DelphinPRO - 29 Декабря, 2015 - 13:54:45 - перейти к сообщению
вот ваше меню https://jsfiddle[dot]net/DelphinPRO/xcdaa23k/

Что там надо сделать?

Подозреваю, что там чего то не хватает, потому что внешне - вроде нормальное меню.

Всегда выкладывайте "живые" примеры по верстке, чтобы можно было оперативно помочь.
3. Russer - 29 Декабря, 2015 - 14:21:34 - перейти к сообщению
DelphinPRO пишет:
вот ваше меню https://jsfiddle[dot]net/DelphinPRO/xcdaa23k/

Что там надо сделать?

Подозреваю, что там чего то не хватает, потому что внешне - вроде нормальное меню.

Всегда выкладывайте "живые" примеры по верстке, чтобы можно было оперативно помочь.

Оно вложено в header
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. #header{
  3.   position: fixed;
  4.    left: 0;
  5.    top: 0;
  6.    margin-top: 0px;
  7.    margin-left: 0px;
  8.    height: 8%;
  9.    width: 100%;
  10.    min-width: 800px;
  11.    min-height: 60px;
  12.    background:#DEDEDE;
  13.   background: linear-gradient(#FCFCFC,#DEDEDE);
  14.   display: inline-block;
  15.    border-bottom-width: 1px;
  16.    border-bottom-color: #B0B0B0;
  17.   border-bottom-style: solid;
  18.     }
  19. #logo{
  20.   position: absolute;
  21.    display: table-cell;
  22.    vertical-align: middle;
  23.    left: 0%;
  24.    top: 5%;
  25.    bottom: 5%;
  26.    height: 90%;
  27.    width: 20%;
  28.    min-width: 160px;
  29.    background: url('/images/background.png') no-repeat;
  30.    background-size: 80%;
  31.    background-position:center;
  32.    border-right: solid 1px #B0B0B0;
  33.    }
  34. #right-header{
  35.   position: absolute;
  36.    display: block;
  37.    text-overflow: clip;
  38.    left: 80%;
  39.    right: 100%;
  40.    top: 5%;
  41.    bottom: 5%;
  42.    height: 90%;
  43.    width: 20%;
  44.    min-width: 160px;
  45.    border-left: solid 1px #B0B0B0;
  46.   text-align: center;
  47.    font-family: 'Roboto Slab', serif;
  48.    font-size: 1.5em;
  49.    color: #2C9C91;
  50.    }
  51.  

Получается что меню съезжает в левую часть к блоку logo , а не располагается по центру страницы.
CODE (html):
скопировать код в буфер обмена
  1.    <body>
  2.         <div id="header"><div id="logo"></div>
  3.            <ul id="menu">
  4.                <li><a href="#" >Главная</a></li>
  5.                <li><a href="#" >Компания</a></li>
  6.                <li><a href="#" >Обратная связь</a></li>
  7.                <li><a href="#" >Магазин</a></li>
  8.                <li><a href="#" >Компания</a></li>
  9.                <li><a style="cursor: pointer">&#9660;Контакты</a>
  10.                <ul>
  11.                 <li><a href="#">Адрес</a></li>
  12.                 <li><a href="#">Телефон</a></li>
  13.                 <li><a href="#">Email</a></li>
  14.                 </ul>
  15.                </li>    
  16.            </ul>
  17.             <div id="right-header">+7(999)-99-99-99</div>
  18.         </div>
  19.     </body>
4. SAD - 29 Декабря, 2015 - 14:41:22 - перейти к сообщению
во-первых, выложите пример хотя бы на тот же jsfiddle
во-вторых, укажите браузер, в котором едет верстка
в-третьих, визально покажите как Вы видите результат
5. DelphinPRO - 29 Декабря, 2015 - 19:57:02 - перейти к сообщению
DelphinPRO пишет:
Всегда выкладывайте "живые" примеры по верстке, чтобы можно было оперативно помочь.


Ну не хотите - не больно-то и хотелось.... Улыбка
Ждите того, кому интересно разгребать простыни кода
6. мэлс - 29 Декабря, 2015 - 20:53:33 - перейти к сообщению
Russer пишет:

Первый вопрос как поместить <ul> список , по центру div menu , как только не пробовал , ни чего не выходит.
И второй вопрос как правильно поместить текст ссылок так же по центру блока <a> сейчас использую line-height: 330%; , но догадываюсь что это не верное решение , так как при изменение размеров браузера , текст начинает менять свое положение по вертикали.

Меню по центру и вертикально и горизонтально?
Одинаковые отступы справа и слева { margin: 0 auto;}
Вообще, у Вас много на мой взгляд бесполезного в css.
#menu {
margin: 0 auto;
list-style-type: none;
width: 58%;
}
7. Russer - 30 Декабря, 2015 - 06:17:48 - перейти к сообщению
DelphinPRO пишет:
DelphinPRO пишет:
Всегда выкладывайте "живые" примеры по верстке, чтобы можно было оперативно помочь.


Ну не хотите - не больно-то и хотелось.... Улыбка
Ждите того, кому интересно разгребать простыни кода

Просто возможности оперативно ответить возможности не было.
Ссылка https://jsfiddle[dot]net/0ysqhh89/1/
В первом случаи

Содержимое блока съезжает к левому краю. А хотелось бы расположить его по центру.
Во втором при уменьшение размеров браузера

Содержимое блока съезжает как по вертикали , так и по горизонтали. Так же не работает скрол, он просто обрезает страницу по размерам браузера , а прокрутку не делает.
8. мэлс - 30 Декабря, 2015 - 09:54:04 - перейти к сообщению
Russer пишет:
DelphinPRO пишет:
DelphinPRO пишет:
Всегда выкладывайте "живые" примеры по верстке, чтобы можно было оперативно помочь.


Ну не хотите - не больно-то и хотелось.... Улыбка
Ждите того, кому интересно разгребать простыни кода

Просто возможности оперативно ответить возможности не было.
Ссылка https://jsfiddle[dot]net/0ysqhh89/1/
В первом случаи

Содержимое блока съезжает к левому краю. А хотелось бы расположить его по центру.
Во втором при уменьшение размеров браузера

Содержимое блока съезжает как по вертикали , так и по горизонтали. Так же не работает скрол, он просто обрезает страницу по размерам браузера , а прокрутку не делает.

Пример того, что Вам нужно есть в сети?
9. senex - 30 Декабря, 2015 - 14:20:21 - перейти к сообщению
Надо убрать float у элементов списка и поставить display:inline-block

CODE (htmlphp):
скопировать код в буфер обмена
  1. #menu li {
  2.  position: relative;
  3.   //float: left;
  4.   display:inline-block;
  5.   align-content: center;
  6.   align-items: center;
  7. }
10. Russer - 31 Декабря, 2015 - 06:17:27 - перейти к сообщению
senex пишет:
Надо убрать float у элементов списка и поставить display:inline-block

CODE (htmlphp):
скопировать код в буфер обмена
  1. #menu li {
  2.  position: relative;
  3.   //float: left;
  4.   display:inline-block;
  5.   align-content: center;
  6.   align-items: center;
  7. }

Спасибо большое!
Остался еще вопрос с центрированием по горизонтали. И с полосой прокрутки.

 

Powered by ExBB FM 1.0 RC1