граници около редовете

B

bgmafiabitka

Registered
HTML: 
<div style=\"background-color:#000; width:122px; height:23px;\">
			<div style=\"background-color:#000; width:120px; height:1px;\"></div>
			<div title=\"text\" style=\"background-color:#0C0; width:120px; height:10px; font-size:9px; color:#000;\">text</div>
			<div style=\"background-color:#000; width:120px; height:1px;\"></div>
			<div title=\"text\" style=\"background-color:#E4D301; width:120px; height:10px; font-size:9px; color:#000;\">text</div>
		</div>

направих граници от всяка страна на редовете, но кода ми се вижда доста дълъг и се чудя има ли друг по прост вариант :oops:
 
Код: 
<style type="text/css">
div.box1 { background-color:#000; width:122px; height:23px; }
div.box2 { background-color:#000; width:120px; height:1px; }
div.box3 { background-color:#0C0; width:120px; height:10px; font-size:9px; color:#000; }
div.box4 { background-color:#E4D301; width:120px; height:10px; font-size:9px; color:#000; }
</style>
<div class=\"box1\">
    <div class=\"box2\"></div>
    <div title=\"text\" class=\"box3\">text</div>
    <div class=\"box2\"></div>
    <div title=\"text\" class=\"box4\">text</div>
</div>
 
Вместо да си играеш със дивове, защо не сложиш по един бордер, там където имаш текст ;)
 
alex3 каза:
Код: 
<style type="text/css">
div.box1 { background-color:#000; width:122px; height:23px; }
div.box2 { background-color:#000; width:120px; height:1px; }
div.box3 { background-color:#0C0; width:120px; height:10px; font-size:9px; color:#000; }
div.box4 { background-color:#E4D301; width:120px; height:10px; font-size:9px; color:#000; }
</style>
<div class="box1">
    <div class="box2"></div>
    <div title="text" class="box3">text</div>
    <div class="box2"></div>
    <div title="text" class="box4">text</div>
</div>
Увеличете...

изключих за style в head, но беше късничко :D
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> Добре дошли!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		ul{
			padding:0; margin:0;
			float:left;
			list-style-type:none;
		}
		ul li{
			margin:0;
			padding:0 0 3px 0;
			border-top: solid 1px #f00;
			width:auto;
		}
		.first{
			border:0;
		}
	</style>
</head>
	<body>
		<ul>
			<li class="first">text</li>
			<li>text</li>
			<li>text</li>
		</ul>
	</body>
</html>

Махни клас first от първото li и ще видиш ефекта. Много по добро рещение от твоето + това моежеш да си сложиш бекграунда на самия <ul> , а не да правиш излишни елементи ;)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе