Цитата ProCoder:
|
Загрузите код в песочницу, или дайте ссылку на вашу верстку. »
|
верстка полностью инвалидная ) ресурс сугубо локальный, валидация, соответственно, вообще пофигу
поэтому сейчас это реализовано как обычная таблица. с тремя колонками.
https://clip2net.com/s/431u1U7
Код:
<td valign="top" width="12%" bgcolor="#f7f3de">
<ul class="ulmainmenu">
<li class="ligreenbook"><a href="journalkassovihoper.html">Журнал кассовых операций</a></li>
<li class="licross"><a href="prochieviplaty.html">Прочие выплаты</a></li>
<li class="liredgrafik"><a href="dsmove.html">Движения денежных средств</a></li>
<li class="liwhitegrafik"><a href="kartarazmena.html">Открыть карту размена</a></li>
<li class="lipoisk"><a href="poiskkarty.html">Поиск по ФИО и номеру карты</a></li>
<li class="liprintcheck"><a href="printvozvrat.html">Печать бланк возврата</a></li>
</ul>
</td>
<td valign="top" width="12%" bgcolor="#f7f3de">
<ul class="ulmainmenu">
<li class="lishema"><a href="inkassaciya.html">Инкассация</a></li>
<li class="licross"><a href="prochiepolucheniya.html">Прочие получения</a></li>
<li class="licross"><a href="seif.html">Ввести остатки по кассам</a></li>
<li class="liredgrafik"><a href="poiskchekov.html">Поиск чеков</a></li>
<li class="lishema"><a href="pechatshkkonver.html">Печать штрихкодов на конверты</a></li>
</ul>
</td>
полный css выглядит так
Код:
@charset "windows-1251";
/* CSS Document */
body {
background: #fffbef;
}
h1 {
font-family: Arial;
font-size: 18px;
color: #b58200;
}
h2 {
font-family: Arial;
font-size: 16px;
color: #b58200;
}
p {
font-family: Arial;
font-size: 14px;
color: #000000;
}
img {
border: 1px double #00734a;
}
#leftmenutop {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
#leftmenutop p {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
#leftmenubottom {
font-size: 11px;
font-family: Arial;
font-weight:normal;
}
#leftmenubottom p{
font-size: 11px;
font-family: Arial;
font-weight:normal;
}
#leftmenuother {
font-size: 11px;
font-family: Arial;
font-weight:bold;
color: #b58200;
}
#leftmenuother p{
font-size: 11px;
font-family: Arial;
font-weight:bold;
color: #b58200;
}
a {text-decoration: none; color: #10247b;}
a:hover {text-decoration: underline; color: #10247b;}
a.atext {text-decoration: underline;
color: #10247b;
font-weight:bold;
}
.knopki {
border: 2px double #c0c0c0;
background: #f7f3de;
padding: 2px;
border-radius: 5px;
font-size: 12px;
font-family: Arial;
font-weight:normal;
height: 35px;
}
li {
font-size: 14px;
font-family: Arial;
font-weight:normal;
}
td.tdmain {
padding-left: 20px;
valign: top;
}
.knopki a:hover {text-decoration: underline; color: #10247b;}
li.licross {
list-style: none; /* Убираем исходные маркеры */
background: url(img/plus.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liredgrafik {
list-style: none; /* Убираем исходные маркеры */
background: url(img/redgrafik.png) no-repeat 0 4px; /*Параметры фона */
padding-left: 24px; /*Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liwhitegrafik {
list-style: none; /* Убираем исходные маркеры */
background: url(img/whitegrafik.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.ligreenbook {
list-style: none; /* Убираем исходные маркеры */
background: url(img/greenbook.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lipoisk {
list-style: none; /* Убираем исходные маркеры */
background: url(img/poisk.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liprintcheck {
list-style: none; /* Убираем исходные маркеры */
background: url(img/printcheck.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liprinter {
list-style: none; /* Убираем исходные маркеры */
background: url(img/printer.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lishema {
list-style: none; /* Убираем исходные маркеры */
background: url(img/shema.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lisheet {
list-style: none; /* Убираем исходные маркеры */
background: url(img/sheet.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liclosesheet {
list-style: none; /* Убираем исходные маркеры */
background: url(img/closesheet.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
ul.ulmainmenu {
padding: 0; /* Убираем поля */
margin-left: 15px; /* Отступ слева */
}
br {
line-height: 10px;
}
"Проблема" в том, что в правом столбце бывают "широкие" рисунки, которые сдвигают два левых столбца с меню
https://clip2net.com/s/431u9bU
поэтому я хочу сделать выпадающее меню.
если будет пример такой менюшки (чтобы в списке были свои маркеры и в два столбца) то попробую поменять у себя "мешающие" стили.
