TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Dobry den mam problem s pozicovanim obrazků potrebuji zacentrovat na spodni okraj divu nevite nekdo jak na to ??
Zkousim to asi takhle :
/*----------------------css code-----------------------------*/
.product_view {
position: relative;
width: 220px;
text-align:center;
height:200px;
border:1px solid;
float:left;
}
.product_view p {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.product_view img {
position: relative;
border:1px solid;
vertical-align:absbottom;
}
/*---------------------------html code-------------------------*/
<div class ='product_view'>
<p><a href='http://example' title='example'><strong>Text</strong></a></p>
<img src='http://example.gif' alt='example' />
</div>
a porad me to haze ten obrazek hned za ten text co je v <p> pokud bych nastavil :
product_view img {
position: absolute;
bottom:0px;
border:1px solid;
}
tak to sice dostanu na spodni okraj ale nedokazu zacentrovat na stred nevite nekdo co s tim ???
Fórum › CSS
Problem s pozicovanim img
Nahlásit jako SPAM
IP: ...–
BossVycentrujes ho pomoci "margin:0 auto;". Jses si ale jisty, ze je to absolutni pozicovani nutne?
Věrný člen <To CommanderZ>
Pokud máš nastaveno position:absolute, tak margin:auto nefunguje (provede margin:0) .....k centrování nedojde.
<To Nark>
Řeším skoro stejný případ odkazů s textem a obrázkem jako float kartu (s rozdílem, že já mám text pod obrázkem.
Jestli chceš pošlu ti optimální způsob => ten záleží na tomhle:
# kolik řádků maximálně text zabere
# velikost obrázků (nemají-li stejné rozměry - hlavně výšku -chtěl bys je mít vycentrované i na výšku?)
# má se celá karta chovat jako odkaz
Např. takhle by to vypadalo pro kartu jako odkaz, max.velikost obrázku (158x158) a jednořádkový text:
>>> Tahle jednoduchá konstrukce v Mozille a Opeře funguje ale v IE naprosto selže <<<
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
a.product_view
{
float: left;
display: block;
width: 220px;
height:200px;
margin: 3px;
text-align:center;
border:1px solid blue;
background: yellow;
cursor: pointer;
text-decoration: none;
}
a.product_view:hover {background: white; color:black}
a.product_view p
{
margin: 0;
padding:0;
height: 24px;
font: bold 12px/24px Arial;
}
a.product_view img
{
position: relative;
bottom: 45px;
margin: 0px auto -100%;
vertical-align: middle;
border:1px solid blue;
}
</style>
</head>
<body>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.1</p>
<img width="158" height="158" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' />
</a>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.2</p>
<img width="130" height="130" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' />
</a>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.3</p>
<img width="100" height="100" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' />
</a>
</body>
</html>
>>> Po pár "malých" úpravách to již zobrazí všechny browsery - ale každý jinak, a už vůbec ne tak hezky jako ten 1.příklad <<<
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
body {font-size:100%}
a.product_view
{
float: left;
display: block;
width: 220px;
height:200px;
margin: 3px;
text-align:center;
border:1px solid blue;
background: yellow;
cursor: pointer;
text-decoration: none;
}
a.product_view:hover {background: white; color:black}
a.product_view p
{
height: 24px;
font: bold 12px/16px Arial;
}
a.product_view img
{
position: relative;
bottom: 40%;
margin: 0px auto -100px;
vertical-align: middle;
border:1px solid blue;
}
</style>
</head>
<body>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.1</p>
<p><img width="158" height="158" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' /></p>
</a>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.2</p>
<p><img width="130" height="130" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' /></p>
</a>
<a class ='product_view' href='#' title='example'>
<p>Text = výrobek č.3</p>
<p><img width="100" height="100" src="http://punk.hostuju.cz/uploads/images/zivak-CD.jpg" alt='example' /></p>
</a>
</body>
</html>
....Takže se takovýmhle "zkratkám" v kódu hodlám vyhnout.
Ale rád si nechám poradit úpravy,které by tento postup umožnily použít univerzálně.
HOTOVO.... 100% shodný formát v IE6/7,FF2,Opera8.
[ Plně validní XHTML po nahrazení <p> prvkem <span> ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://punk.hostuju.cz/uploads/images/" />
<style>
a.product_view
{
color:#f2f2f2;
float: left;
display: block;
position: relative;
width: 220px;
height:200px;
margin: 5px;
text-align:center;
text-decoration: none;
background: #668;
border:3px outset #aaf;
cursor: pointer;
}
a.product_view:hover {border: 3px inset #99f; color:#181840; background: #bbf}
a.product_view:hover img {border: 3px outset #aaf}
a.product_view:hover p {text-decoration: underline}
a.product_view p
{
margin: 8px;
font: bold 14px/16px Arial;
}
a.product_view em
{
position: absolute;
left:0;
width:100%;
bottom:0;
height: 175px;
font: bold 150px/150px Arial;
}
a.product_view em img
{
margin: 0px auto;
vertical-align: middle;
border: 3px inset #aaf;
font-size:10px;
}
</style>
</head>
<body>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.1 / Size: 50x50</p>
<em><img width="50" height="50" src="zivak-CD.jpg" alt='example' /></em>
</a>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.2 / Size: 75x75</p>
<em><img width="75" height="75" src="zivak-CD.jpg" alt='example' /></em>
</a>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.3 / Size: 100x100</p>
<em><img width="100" height="100" src="zivak-CD.jpg" alt='example' /></em>
</a>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.4 / Size: 120x120</p>
<em><img width="120" height="120" src="zivak-CD.jpg" alt='example' /></em>
</a>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.5 / Size: 140x140</p>
<em><img width="140" height="140" src="zivak-CD.jpg" alt='example' /></em>
</a>
<a class ='product_view' href="http://punk.hostuju.cz">
<p>Produkt č.6 / Size: 158x158</p>
<em><img src="zivak-CD.jpg" alt='example' /></em>
</a>
</body>
</html>
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 8 hostů
Podobná vlákna
Problem s pozicovanim — založil někdo
Problém s layoutem a pozicováním — založil Colpik
Problem tr img — založil Erik
Problem s vzkreslovanim IMG — založil Borisek
Pomoc s pozicovaním — založil mimi
Moderátoři diskuze
