Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Перезагрузить страницу CSS меню по центру
Регистрация

Восстановить пароль
Регистрация Задать
вопрос		 Заплачу
за решение		 Новые
сообщения 		Сообщения
за день 		Расширенный
поиск		 Правила Всё
прочитано

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
Страница 1 из 2 1 2
 
Опции темы Поиск в этой теме
Старый 17.06.2010, 12:39   #1
opa__
 
Регистрация: 17.06.2010
Сообщений: 6
Вопрос CSS меню по центру
Доброе время суток всем.
Такая вот проблема. Есть меню CSS. Надо чтобы оно отображалось в разных браузерах по цетру. Особенно глюк в ИЕ6.

код хтмл:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отель</title>
<META

content="гостиница, номер, фото."

name=keywords>
<META

content="Описание гостиницы, фотографии интерьеров гостиницы, информация о гостинице, стоимость размещения в гостинице. Форма для онлайн бронирования номера в гостинице. Контакты."

name=description>

<link rel="stylesheet" type="text/css" href="css/default.css">
</head>

<body>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0><tr><td>

<div id="main">

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr height="100%">
<td height="100%" valign="middle" align=center>

<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>

<div id="block-on-center">
<ul id="sddm">




<li><a href="+" onmouseover="mopen('m1')" onmouseout="mclosetime()">Главная</a>
</li>

<li><a href="+" onmouseover="mopen('m2')" onmouseout="mclosetime()">О гостинице</a>
</li>


<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Номерной фонд</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Одноместный Стандарт 1к</a>
<a href="#">Одноместный Стандарт 2к</a>
<a href="#">Одноместный Улучшенный 1к</a>
<a href="#">Одноместный Улучшенный 2к</a>
<a href="#">Двухместный Стандарт 2к</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Услуги</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="www.ngcc-crystal.ru">Служба приема и размещения</a>
<a href="#">Каминный зал</a>
<a href="#">Конференц зал</a>
<a href="#">Тренажерный зал</a>
<a href="#">Интернет Wi-Fi</a>
</div>
</li>

<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Кафе-Бар</a>
</li>

<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Как найти</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
</li>

</ul>
</div>
</div>


Код CSS:

html { margin:0; padding:0; width:100%;}




#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}


#block-on-center
{
position: right;
top: %;
left: %;
height: 20px;
width: 846;
margin: 0 auto;
border: 0px solid #000;}


#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}


-----------------------
Помогите кто может...устал уже бороться.
opa__ вне форума Ответить с цитированием
Старый 17.06.2010, 14:02   #2
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию
оформили бы пост нормально через форматирование
вы хотите в центре чтобы было и тут же пишите позицион райт, к тому же можете использовать тег <center></center> хотя его уже давно не рекомендуют, так же тот же align center
webinmd.com
MrJenika вне форума Ответить с цитированием
Старый 17.06.2010, 14:13   #3
opa__
 
Регистрация: 17.06.2010
Сообщений: 6
По умолчанию
MrJenika, может тогда подскажите как оформить через форматирование?
А по поводу позицион райт - ошибся, но и центр ни чего не меняет)
Я в растройстве...
opa__ вне форума Ответить с цитированием
Старый 17.06.2010, 14:23   #4
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию
насчёт форматирования, выделите весь код и нажмите на панели формы знак решётки)
И ещё одно замечание:
у вас там таблица в начале, избавьтесь от неё полностью, используйте только дивы, если уж начали ими.

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

Код:
<div id="main">
<div id="menu">
Ваше меню
</div><!--конец menu-->

остальной контент

</div><!--конец main-->

#menu{
margin: 0 auto;
height: 20px;
width: 846;
border: 0px solid #000;}
вот выше описаный код расположил мне всё по центру.
НО..
вот в чём ваша проблема :
вы ставите ширину блока для меню в 846 пикселей и он действительно распологает его по центру, а вот текст выравнивает по левому краю, поэтому оно и выглядит не по центру.
webinmd.com
Последний раз редактировалось MrJenika; 17.06.2010 в 14:30.
MrJenika вне форума Ответить с цитированием
Старый 17.06.2010, 17:04   #5
lenka_25
 
Аватар для lenka_25
 
Регистрация: 14.06.2010
Сообщений: 6
По умолчанию
html { margin:0; padding:0; width:100%; margin:0px;}




#sddm
{ margin: 0 auto;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0 auto;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}


#block-on-center
{
position: center;
top: %;
left: %;
height: 20px;
width: 846;
margin: 0 auto;
border: 0px solid #000;}


#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0 auto;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
lenka_25 вне форума Ответить с цитированием
Старый 18.06.2010, 12:40   #6
opa__
 
Регистрация: 17.06.2010
Сообщений: 6
По умолчанию
Спасибо) Но в ие6 меню все равно уходит влево и еще к тому же меняется ширина вкладок( ...
opa__ вне форума Ответить с цитированием
Старый 22.06.2010, 12:34   #7
opa__
 
Регистрация: 17.06.2010
Сообщений: 6
По умолчанию
так ни кто и знает ответа да?)
opa__ вне форума Ответить с цитированием
Старый 22.06.2010, 14:43   #8
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию
учите html и css - в Вашем коде черт голову свернет
Magneto вне форума Ответить с цитированием
Старый 22.06.2010, 17:08   #9
SkyM@n
Laravel/Vue expert
Старожил Подтвердите свой е-майл
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Сообщений: 2,832
По умолчанию
учимся оформлять код.
SkyM@n вне форума Ответить с цитированием
Старый 26.06.2010, 00:00   #10
Paladast
Пользователь
 
Аватар для Paladast
 
Регистрация: 09.08.2009
Сообщений: 66
По умолчанию
Если еще необходимо:

Код HTML:
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>
      Отель
    </title>
    <meta content="гостиница, номер, фото." name="keywords" />
    <meta content=
    "Описание гостиницы, фотографии интерьеров гостиницы, информация о гостинице, стоимость размещения в гостинице. Форма для онлайн бронирования номера в гостинице. Контакты."
    name="description" />
    <link rel="stylesheet" type="text/css" href="default.css" />
    <style type="text/css">
/*<![CDATA[*/
    div.c1 {width:1000px;margin:0 auto;}
    /*]]>*/
    </style>
  </head>
  <body>
    <!-- dd menu -->
    <div class="c123" id="block-on-center">
      <ul id="sddm">
        <li>
          <a href="+" onmouseover="mopen('m1')" onmouseout="mclosetime()">Главная</a>
        </li>
        <li>
          <a href="+" onmouseover="mopen('m2')" onmouseout="mclosetime()">О гостинице</a>
        </li>
        <li>
          <a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Номерной
          фонд</a>
          <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="#">Одноместный Стандарт 1к</a> <a href=
            "#">Одноместный Стандарт 2к</a> <a href="#">Одноместный
            Улучшенный 1к</a> <a href="#">Одноместный Улучшенный
            2к</a> <a href="#">Двухместный Стандарт 2к</a>
          </div>
        </li>
        <li>
          <a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Услуги</a>
          <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="www.ngcc-crystal.ru">Служба приема и размещения</a>
            <a href="#">Каминный зал</a> <a href="#">Конференц зал</a>
            <a href="#">Тренажерный зал</a> <a href="#">Интернет Wi-Fi</a>
          </div>
        </li>
        <li>
          <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Кафе-Бар</a>
        </li>
        <li>
          <a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Как найти</a>
          <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="#">E-mail</a>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>
В css просто добавить .c123{width:846px;}.
Убил скрипт и совсем не понял зачем таблицы, но все это можно добавить ручками по надобности.

А если надо что бы меню было там же где изначально то вместо margin:0 auto; надо написать что то вроде этого margin:25% 17%;
Со мной бог и два пулемёта
Последний раз редактировалось Paladast; 26.06.2010 в 00:04.
Paladast вне форума Ответить с цитированием
Ответ
Страница 1 из 2 1 2


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выровнять изображение в CSS по центру? VasyOK{!} HTML и CSS 8 02.03.2012 14:34
Вопрос по меню на CSS Krintus HTML и CSS 4 30.06.2010 23:51
Горизонтальное меню на CSS. yermolenko HTML и CSS 2 27.05.2010 10:47
Выравнивание фона по центру CSS Spacewalker HTML и CSS 1 17.04.2010 11:57
CSS меню не отображается в IE 6 aNt1 HTML и CSS 2 05.03.2009 12:40

Реклама на форуме - Обратная связь - Правила - Исходники Delphi - Справочник Delphi - Архив - Вверх