css размер бордера

imfate · November 22, 2008

может кто знает... в общем есть список (ul). по бокам от него идет бордер в 1 px. нужно, чтобы бордер прерывался за несколько пикселей до нижнего края. то-есть бордер должен идти не на всю высоту списка, а прерываться за несколько пх до конца врятли такое можно сделать базовыми средствами, но кто знает, может у кого есть свой рецепт

Kiddo · November 22, 2008

imfate said:
может кто знает... в общем есть список (ul). по бокам от него идет бордер в 1 px. нужно, чтобы бордер прерывался за несколько пикселей до нижнего края. то-есть бордер должен идти не на всю высоту списка, а прерываться за несколько пх до конца врятли такое можно сделать базовыми средствами, но кто знает, может у кого есть свой рецепт

Можно сделать через бекграунд который будет на 2 пикселя короче длины списка, или через повторяющийся бекраунд для ul, а последним li перекрывать фон на 2 пикселя. А для какой цели нужно это применить, а то тяжело ориентироваться когда задача вырвана с контекста.

imfate · November 22, 2008

есть меню. вверху меню рисунок, поверх которого написан заголовок меню. по бокам бордер а 1 пх. внизу тоже рисунок. в итоге, если задать ul бордер по бокам и бекгрунд (со свойством no-repeat), выровненный по низу, то получится, что бордер идет и там, где он не нужен (где начинается бекграунд). конечно, можно создать отдельный див и задать для него бекгрунд и таких проблем не будет, но дополнительный див только для этого - имхо не правильно

SelenIT · November 22, 2008

А нельзя задать эти border-ы не для ul, а для li в нем? Плюс padding-bottom для ul на размер нижнего рисунка...

imfate · November 22, 2008

нет, у li уже есть бордеры как и бекгрунды там довольно забубенное меню)))

hmelii · November 24, 2008

<!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>Untitled Document</title>
<style type="text/css">
ul, li{ margin:0; padding:0; list-style:none; }
ul{ float:left; border-left:1px solid red; border-right:1px solid red; padding:0 2px; }
li{ background:red; float:left; color:blue; position:relative; padding:2px; border:1px solid black; margin:0 2px -2px; }
</style>

</head>

<body>
<ul>
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
	<li>пункт 4</li>

</ul>

</body>
</html>

Mutant · November 25, 2008

посади списов в блок(c float:...; или display:inline;), дай блоку нужные бордеры, а списку дай margin-bottom:-2px;

Sign In

css размер бордера

Question

imfate

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Kiddo

Link to comment

Share on other sites

imfate

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

imfate

Link to comment

Share on other sites

hmelii

Link to comment

Share on other sites

Mutant

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information