CSS / HTML: как правильно создать этот эффект? - PullRequest
Новая
       6

CSS / HTML: как правильно создать этот эффект?

1 голос
/ 18 марта 2011

Я работаю над сайтом для небольшой адвокатской конторы. Вверху есть строка меню, которую я хочу разделить символом | между каждым предметом: Link . (Белая полоса чуть ниже заголовка заголовка)

Это выглядит совершенно правильно, но я использую таблицы для этого. Есть ли «более правильный» метод для этого с XHTML / CSS?

Мой код указан ниже: 

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td class="topMenuEnd"></td>
                <td class="topMenuMiddle"><a href="index.htm">Home</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="contact.htm">Contact Us</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="directions.htm">Directions</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="disclaimer.htm">Disclaimer</a></td>
                <td class="topMenuEnd"></td>
            </tr>
        </table>
    </div>

И CSS: 

.spanningMenu {
    border-style: solid;
    border-width: 4px 0px;
    padding: .2em;
}

#topMenu td.topMenuMiddle {
    width: 12.5%;
}

#topMenu td.topMenuEnd {
    width: 6.25%;
}

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

Ответы [ 4 ]

2 голосов
/ 18 марта 2011

Хорошо, таблицы для разметки неверны, таблицы для MENUS просто извращены ...

Пожалуйста, пожалуйста, прочитайте это

Вы должны сделать это:

HTML: 

<ul>
    <li>Item1 |</li>
    <li>Item2 |</li>
    <li>Item3</li>
</ul>

CSS: 

ul li {
    float:left;
    margin-left:5px;
}

http://jsfiddle.net/Mutant_Tractor/wyQFb/

1 голос
/ 18 марта 2011

Я только что взломал что-то вместе, чтобы дать вам идею.Это метод, который я всегда использую.Вы можете настроить ширину в соответствии с вашими потребностями.Вот скрипка: http://jsfiddle.net/pfkgw/

#menu {
    background:#ECD8B1;
    overflow:auto;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 5px 0px;
}
ul li {
    width: 24%;
    border-right:1px solid #000;
    float:left;
    text-align:center;
}

ul li.last {
    border-right:none;
}

li a {
    display:block;
    padding:5px;
    color:#000;
}

<div id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Contact Us</a></li>
        <li><a href='#'>Directions</a></li>
        <li class='last'><a href='#'>Disclaimer</a></li>
    </ul>
</div>
1 голос
/ 18 марта 2011

Обычно считается, что панель навигации представляет собой список ссылок, поэтому она должна быть в тегах <ul></ul>.

Я бы не включил символ канала |, потому что это также презентационный. Вы можете добавить его в CSS, используя li:after { content: "|"; } или добавив атрибут CSS border.

Информацию о горизонтальном оформлении списков можно найти в Listamatic .

0 голосов
/ 18 марта 2011

Попробуйте это: 

<style type="text/css">
#menu { width: 100%; }
#menu a { display: block; float: left; width: 20%;
border-right: 1px solid #000; text-align: center; }
#menu a.last { border-right: 0px solid #000; clear: both; }
</style>

<div id="menu">
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/" class="last">Link 3</a>
</div>
...