CSS boxy s odkazy
Nějaký text
Nějaký text
Nějaký text
Nějaký text
Zde je kód pro skupinu boxů s odkazy. Skupinu lze dále upravovat.
<style>
div.skupina {
float: left;
width: auto;
margin: 0;
font-family: arial, sans-serif;
}
div.a {
border-style: solid;
border-width: 1px;
border-color: #ffffe6 #acad9f #d9d9d9 #f2f2f2;
border-radius: 5px;
margin-top: 5px;
text-align: center;
margin-left: 1px;
margin-right: auto;
background-color: #e6f3ff;
}
div.b {
padding: 0;
margin-top: 2px;
}
div.c {
width: 300px;
margin: 2px 6px;
padding-bottom: 3px;
text-align: center;
}
div.nadpis z1 {
font-weight: 700;
color: #555;
margin: 0 auto 0 14px;
padding-top: 1px;
line-height: 14px;
height: 14px;
text-align: left;
float: left;
}
div.nadpis z2 {
font-weight: 700;
color: #cc0000;
margin: 0 auto 0 14px;
padding-top: 1px;
line-height: 14px;
height: 14px;
text-align: left;
float: left;
}
z1 {
font-size: 12px;
font-weight: 700;
}
z2 {
font-size: 12px;
font-weight: 700;
}
div.novinka {
text-align: left;
padding-left: 8px;
font-size: 12px;
}
div.d_cast1 {
margin: 0 3px;
float: left;
width: 180px;
text-align: left;
}
ul.tlacitko1 {
list-style: none;
margin: 0;
padding: 0;
}
ul.tlacitko1 li, ul.tlacitko1 li a {
display: block;
}
ul.tlacitko1 li a {
border-style: solid;
border-top-color: rgba(255, 255, 238, 1);
border-top-width: 1px;
border-bottom-color: rgba(204, 204, 204, 1);
border-bottom-width: 1px;
border-left-color: rgba(238, 238, 238, 1);
border-left-width: 1px;
border-right-color: rgba(172, 173, 159, 1);
border-right-width: 1px;
background-color: rgba(255, 255, 255, 1);
color: #002589! important;
background: #f7f7f7;
font-weight: normal;
height: 13px!important;
line-height: 13px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
margin-top: -10px;
font-size: 12px;
text-decoration: none;
border-radius: 4px;
}
ul.tlacitko1 li a:hover {
border-style: solid;
border-top-color: rgba(162, 166, 172, 1);
border-top-width: 1px;
border-bottom-color: rgba(238, 238, 238, 1);
border-bottom-width: 1px;
border-left-color: rgba(204, 204, 204, 1);
border-left-width: 1px;
border-right-color: rgba(238, 238, 238, 1);
border-right-width: 1px;
background: #cce6ff;
color: #004f99;
}
</style>
<div class="skupina">
<div class="a">
<div class="b">
<div class="nadpis"><z1>Rok 2023</z1><z2>Název</z2></div>
<div style="clear: both;"></div>
</div>
<div class="c">
<div class="novinka">Nějaký text</div>
<div class="d_cast1">
<ul class="tlacitko1">
<br>
<li><a href="#no">Tlačítko - Odkaz někam</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="skupina">
<div class="a">
<div class="b">
<div class="nadpis"><z1>Rok 2023</z1><z2>Název</z2></div>
<div style="clear: both;"></div>
</div>
<div class="c">
<div class="novinka">Nějaký text</div>
<div class="d_cast1">
<ul class="tlacitko1">
<br>
<li><a href="#no">Tlačítko - Odkaz někam</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="skupina">
<div class="a">
<div class="b">
<div class="nadpis"><z1>Rok 2023</z1><z2>Název</z2></div>
<div style="clear: both;"></div>
</div>
<div class="c">
<div class="novinka">Nějaký text</div>
<div class="d_cast1">
<ul class="tlacitko1">
<br>
<li><a href="#no">Tlačítko - Odkaz někam</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="skupina">
<div class="a">
<div class="b">
<div class="nadpis"><z1>Rok 2023</z1><z2>Název</z2></div>
<div style="clear: both;"></div>
</div>
<div class="c">
<div class="novinka">Nějaký text</div>
<div class="d_cast1">
<ul class="tlacitko1">
<br>
<li><a href="#no">Tlačítko - Odkaz někam</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>