Как сделать разделители ввиде вертикальных линий м/у несколькими <a>?

happyproff · March 29, 2008

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

Вариант у меня один: для создать бродеры, но они отображаются и МЕЖДУ и по краям, т.е. есть две лишних полосы слева от первого и справа от последнего .

(html генерируется движком и правке не подлежит, только css)

браузеры: IE6, Opera9, FF2.

html:

<?xml version="1.0" encoding="windows-1251"?>
<!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>
 <link href="template_css.css" rel="stylesheet" type="text/css" />
 <!--[if lte IE 6]>
 <link href="ieonly.css" rel="stylesheet" type="text/css" />
 <![endif]-->
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>test</title>
</head>
<body>

<center>
 <div id="outter">
 <div id="header">
 <table cellpadding="0" cellspacing="0" class="moduletable_topmenu">
 <tr><td>
 <table width="100%" border="0" cellpadding="0" cellspacing="1">
 <tr><td class="jtd_nowrap">
 <a href="http://localhost" class="mainlevel_topmenu_obj" title="Частоты вещания">Частоты</a>
 <a href="http://localhost" class="mainlevel_topmenu_obj" title="Программа передач">Программа</a>
 <a href="http://localhost" class="mainlevel_topmenu_obj" title="Рассылка">Рассылка</a>
 <a href="http://localhost" class="mainlevel_topmenu_obj" title="Контакты">Контакты</a>
 <a href="http://localhost" class="mainlevel_topmenu_obj" title="Карта сайта">Карта сайта</a>
 </td></tr>
 </table>
 </td></tr>
 </table>
 </div>
 </div>
</center> 

</body>
</html>

template_css.css:

body {
 margin: 0px;
 font-family: Tahoma, Helvetica, sans-serif;
 font-size: 12px;
 margin-top: 10px;
 color: #333333;
}

div#outter {
 width: 1000px;
 border: solid 1px red;
}

div#header {
 background-color:#AA3333;
 width: 100%;
 height: 500px;
 margin-bottom: 10px;
}

table.moduletable_topmenu {
 position:relative;
 top:15px;
}

table.moduletable_topmenu tr{
 text-align:center;
}

table.moduletable_topmenu a.mainlevel_topmenu_obj {
 font-family: Tahoma, Arial;
 font-size: 12px;
 font-weight: bold;
 text-transform: lowercase;
 text-decoration:none; 
 color:#FFFFFF;

 background-color:#333333;
 float:left;
 height:40px;
 width: 150px;
 line-height:40px;

 border-left: solid 1px yellow;
 border-right: solid 1px yellow;
}

table.moduletable_topmenu a.mainlevel_topmenu_obj:hover {
 color:#999999;
}

ieonly.css:

Заренее благодарю

SibBear · March 29, 2008

создай стиль для ечейки в которой находится , там можно отдельно сделать каждый край

делаеться через css, работает вроде везде

border-top: solid 1px red;

border-bottom: ...

и т.п.

за правильность написания не отвечаю. Не помню

Mordraug · March 29, 2008

ну .. можно попробовать через псевдоклассы :before и :after, но для IE6 вам придется костыли подгружать в виде расширения...

копайте тут

happyproff · April 2, 2008

SibBear: если делать бордеры для слева и справа, то между будут линии и это то, что нужно, но так же будут они еще и по краям, т.е. слева от первого и справа от последнего, а вот это уже лишнее.

Mordraug: через псевдоклассы проблема в том, что неизвестно как первый отличить от последующих. Все генерируются движком и повесить на первый и последний спец.класс через html (указать class="..") возможности нет. В этом то и проблема.

Возможно ли как то с помощью css выделить только первый и последний?

С бордерами будет так: | a | a | a |

А нужно вот так: a | a | a

DiMas · April 6, 2008

Опиши стиль с правым разделителем, и к последнему элементу не применяй его, да и все )

DiMas · April 6, 2008

что то типа:

.rborder:{

border-right: 1px solid #000;

}

<a herf="link..." class="rborder">text</a><a herf="link..." class="rborder">text</a><a herf="link..." class="rborder">text</a><a herf="link..." class="rborder">text</a><a herf="link...">text</a>

Dimitry Wolotko · April 6, 2008

Тогда уж лучше по иному:

#bolder a {border-right: 1px solid #000;}
<div id="border">
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
</div>

DiMas · April 6, 2008

Тогда уж лучше по иному:

#bolder a {border-right: 1px solid #000;}
<div id="border">
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
</div>

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

Dimitry Wolotko · April 6, 2008

А вовнутрь?

polecat · April 6, 2008

Тогда уж лучше по иному:
#bolder a {border-right: 1px solid #000;}
<div id="border">
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
</div>
а какже быть с пятой ссылкой? в данном случае, если ее вставить после дива она "перепрыгнит" на новую строку...

Пятой ссылке прописываем id и отключаем бэкграунд-разделитель или что-там у вас.

Ананалогично и для первой, если требовалось бы.

А выставить ее после дива, это неправильное решение в корне, т.к. по семантическим правилам у вас эти ссылки ни что инное как список, который кстати должен быть оформлен в ul и li соответственно.

DiMas · April 6, 2008

вовнутрь только так

Тогда уж лучше по иному:

#bolder a {border-right: 1px solid #000;}
#bolder a.noneslash {border:none;}
<div id="border">
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." >text</a>
<a href="link..." class="noneslash">text</a>
</div>

Dimitry Wolotko · April 6, 2008

Ну и почему нет? )

happyproff · April 9, 2008

Проблема в том, что я не могу указать для последней ссылки уникальный клаас/id, т.к. не могу править html код, потому что он генерируется движком. Вопрос в том, как определить последн.. ссылку средствами css.

И еще вопрос: можно ли использовать javascript код в css файле? Если да, то уже больше инструментов для решения задачи, но я пока не вижу решения даже с javascript в css, если такое вообще возможно.

Может у кого то есть еще идеи?

happyproff · April 9, 2008

html код вот такой и правке не подлежит.

<a class="mainlevel_topmenu_obj">Частоты</a>
<a class="mainlevel_topmenu_obj">Программа</a>
<a class="mainlevel_topmenu_obj">Рассылка</a>
<a class="mainlevel_topmenu_obj">Контакты</a>
<a class="mainlevel_topmenu_obj">Карта сайта</a>

Dimitry Wolotko · April 9, 2008

Стилями такое не сделать кросс-браузерно.

ZoNT · April 9, 2008

Типа: как обстричь ноготь на мизинце, если мизинец на ноге, да ещ? и в ботинке?

Dimitry Wolotko · April 9, 2008

Хорошее сравнение.

happyproff · April 9, 2008

А js можно использовать в файле css?

happyproff · April 9, 2008

сравнение действительно десятибальное ))))

ZoNT · April 9, 2008

А js можно использовать в файле css?

низя

happyproff · April 9, 2008

окей, ну тогда единственный вариант это бекграунд с разделителями, благо все ссылки оформлены блоками с фиксированной высотой/шириной.

Sign In

Как сделать разделители ввиде вертикальных линий м/у несколькими <a>?

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information