Autor Zpráva
IKA
Profil *
#1 · Zasláno: 29. 5. 2006, 16:14:18
Odpovědět Citovat
delam e-shop a mam tri polozky na radku.Kdyz ohranicim DIV na 4 stranach tak prostredni div se prilepi k vedlejsimu a ma 2px misto 1px. Jak to vyresit?

Anebo udelat podminky a v pripade ze je radek prvni tak udela vsechny 4 strany u prvniho, pravou, levou a vrch u druheho a tretiho a vsechny ostatni u prvniho leveho levou spodek,pravou a dalsi dva spodek a pravou caru?

ja vim zni to slozite ale zkuste si predstavit sachovnici 3x5 poli...
aitoo
Profil
#2 · Zasláno: 29. 5. 2006, 17:35:52
Odpovědět Citovat
Jde to pomocí border-width:

div.x {
border: 1px solid black;
border-width: 1px 0 1px 1px;
}
div.y {
border: 1px solid black;
border-width: 0 0 0 1px;
}
div.z {
border: 1px solid black;
}

Rozvržení DIVů:

|div class="x"|div class="x"|div class="x"|div class="x"|div class="z"|
|div class="y"|div class="y"|div class="y"|div class="y"|div class="z"|
|div class="x"|div class="x"|div class="x"|div class="x"|div class="z"|
IKA
Profil *
#3 · Zasláno: 29. 5. 2006, 21:36:08
Odpovědět Citovat
díky zkusím to tak
aitoo
Profil
#4 · Zasláno: 29. 5. 2006, 22:29:49 · Upravil/a: aitoo
Odpovědět Citovat
Ještě jsem to trochu opravil na variantu, kde je využito selektoru následovníka a ohraničení obalového divu. Ušetříš tím něco kódu:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>divy_border</title>
<style type="text/css" media="all">
/* <![CDATA[ */
body {
margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: white; color: black;
text-align: center;
}
div#obal {
width: 505px; height: 303px;
margin: 50px auto; padding: 0;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
div#obal div {
width: 100px; height: 100px;
float: left;
border: 1px solid black;
border-width: 1px 0 0 1px;
}
/* ]]> */
</style>
</head>
<body>
<div id="obal">
<div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div>
<div>06</div> <div>07</div> <div>08</div> <div>09</div> <div>10</div>
<div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div>
</div>
</body>
</html>

Viz. také:

http://sweb.cz/aitoo/divy_border.html
Časová prodleva: 20 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0