положить меню в заголовок

Question

положить меню в заголовок

0

У меня есть следующее:

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

CSS:

div {
    height: 178px;
}

#wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

#left, #center, #right {
    display: table-cell;
}

#center {
    width: 1100px;
}

#left {
    background: url(left.gif) repeat-x;
}

#center {
    background: url(center.gif) no-repeat center center;
}

#right {
    background: url(right.gif) repeat-x;
}

Смотрите: скрипка

Я хочу поставить горизонтальное меню в оранжевую часть центральной секции и другое горизонтальное меню в желтой части;

Я попробовал это:

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center">

        <ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>

         <ul id="menu2">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>

    </div>
    <div id="right"></div>
</div>

Добавлен CSS:

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}

Смотрите: скрипка

Но не было никакого успеха, пожалуйста, помогите!

user3250818 16 фев. 2014, в 10:55

Источник

0

привет, я не могу получить доступ к ссылке
krato 16 фев. 2014, в 09:42
0

Извините, я облажался, чтобы ссылки работали. к счастью + Theraot исправил это ...
dav1dsm1th 16 фев. 2014, в 09:44

Теги:

html

css

1 ответ

Ещё вопросы

привет, я не могу получить доступ к ссылке
Извините, я облажался, чтобы ссылки работали. к счастью + Theraot исправил это ...

melc · Accepted Answer · 2014-02-16T08-01-00.000Z

Вы можете использовать относительное позиционирование (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning), например

http://jsfiddle.net/67UWv/

CSS

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:85px;
    right:30px;
}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:110px;
    right:30px;
}

edit - связанные с последними комментариями

чтобы удалить белый интервал вокруг изображения меню, необходимо установить margin:0 для элемента body чтобы переопределить правила стиля пользовательского агента по умолчанию.

body{
margin:0px;
}

http://jsfiddle.net/67UWv/1/

edit - ответ на последние комментарии

#center белый зазор был вызван в ff с самого начала (тестовая оригинальная скрипка http://jsfiddle.net/6GE3x/27/show/), когда контент был помещен в #center div. Таким образом, есть некоторые проблемы при использовании display:table и display:table-cell а также добавление контента.

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

http://jsfiddle.net/eH2m6/show/

http://jsfiddle.net/eH2m6/

CSS

div {
    height: 178px;
}

#wrapper {
    /* display: table;
    table-layout: fixed; */
    width: 100%;
}

#left, #right {
    /* display: table-cell; */
/*the following will make #left and #right take full width*/
    float:left;
    width:50%;
}

#center {
    width: 1100px;
/*the following will position #center in the center*/
    position:absolute;
    left:50%;
    margin-left:-550px;
}

#left {
    background: url(http://dentaliran.ir/left.gif) repeat-x;
}

#center {
    background: url(http://dentaliran.ir/center.gif) no-repeat center center;

}

#right {
    background: url(http://dentaliran.ir/right.gif) repeat-x;
}

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:85px;
    right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:110px;
    right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}

body{
margin:0px;
}

был протестирован в ie8, ie9, chrome32.x, ff25.x

Нет, увеличьте, пожалуйста, браузер, который вы видите. Между центральной частью и верхней частью браузера есть белый промежуток, это моя проблема.
@ user3250818 увеличение / уменьшение масштаба браузера - это не то поведение, которое вам следует учитывать. Это зависит от каждого браузера, и это непредсказуемо.
@ user3250818 я понимаю, что вы имеете в виду, просто добавьте body{margin:0px} и все будет хорошо. В основном это правила стилей CSS по умолчанию для браузера / агента пользователя.
Ответ melc работал в Chrome и IE, но в Firefox, как я уже говорил, между центром img и верхней частью браузера был пробел, я использовал таблицу вместо div, чтобы разобраться в этом. Спасибо
@ user3250818 предоставленный ответ не связан с этой проблемой, кажется, что это произошло с самого начала. Я только что отредактировал ответ, предложив альтернативное решение.