Diskuze: Obrazky v <td>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
</head>
<style>
</style>
<table border="0px" colspan="1px">
<body>
<tr bgcolor="blue">
<td>Hornik</td>
<td>2 Hornici</td>
<td align="right">4 Hornici</td>
</tr>
<tr>
<td bgcolor="green">Bagr</td>
<td>2 Bagry</td>
<td>Tezebni stor</td>
</tr>
</body>
</table>
</html>
Budeš to mít na středu toho divu.
.narrowculomn {
width: 98%;
max-width: 450px;
padding: 1%;
display: block;
margin: 2% auto !important;
}
a img {
border: none;
display: block;
margin: 0 auto;
}Tohle ti bude fungovat. Jen bych zvážil změnu. WP bych asi nepoužil 
Tak tady to je. Tabulky uz se dlooouho nepouzivaji
Tohle si vlozis do souboru .css
body {
width: 100%;
height: auto;
display: block;
margin: 0;
background: red;
}
.blokstrpasliky {
width: 100%;
max-width: 1000px;
display: block;
margin: 5% auto;
}
.trpaslici {
width: 33.33%;
float: left;
background: white;
}
.trpaslici img {
width: 80%;
display: block;
margin: 1% auto;
background: url('http://mujwebmujweb.8u.cz/miner.png') no-repeat center center;
height: auto;
}
.trpaslici p {
text-align: center;
font-size: 1.1em;
margin: 0;
}A tohle do HTML stranky (nebo php ci kde to vkladas
<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Trpaslici</title>
</head>
<div class="blokstrpasliky">
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="trpaslik">
</div>
</div>
</body>Tohle by ti melo pomoci dostat se spravnym smerem. Kdyby neco tak pis.
Dej vedet jestli jsi to pochopil
Promin. Chyba. 
Tohle dej do html souboru
<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Trpaslici</title>
</head>
<div class="blokstrpasliky">
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
<div class="trpaslici">
<p>Hornik 1</p>
<img src="http://mujwebmujweb.8u.cz/miner.png">
</div>
</div>
</body>a tohle do css souboru
body {
width: 100%;
height: auto;
display: block;
margin: 0;
background: red;
}
.blokstrpasliky {
width: 100%;
max-width: 1000px;
display: block;
margin: 5% auto;
}
.trpaslici {
width: 33.33%;
float: left;
background: white;
}
.trpaslici img {
width: 50%;
display: block;
margin: 1% auto;
height: auto;
}
.trpaslici p {
text-align: center;
font-size: 1.1em;
margin: 0;
}gorri:26.6.2017 22:32
Protoze je to nastavene tak aby to bralo 33.33% šířky ze 100%. Když
napíšeš 32.33% tak se ti dají zase vedle sebe. Border zabírá minimálně
1px. A díky tomu se už nemohou vlézt 3 vedle sebe. Vím, že je to
přehlednější. A hlavně CSS je lepší než tabulky
Není zač
gorri:26.6.2017 23:31
OK. Kdyžtak to označ jako vyřešené
Každopádně jsem se díval na to co tvoříš.
Nejspíše by ti neuškodilo pročíst si pár tutoriálů
Konkrétně prozatím toto https://www.itnetwork.cz/html-css
+20 Zkušeností
Zobrazeno 43 zpráv z 43.