Problem s pozicovanim img – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Problem s pozicovanim img – CSS – Fórum – Programujte.comProblem s pozicovanim img – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Nark
~ Anonymní uživatel
1 příspěvek
27. 7. 2007   #1
-
0
-

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 ???



Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
30. 7. 2007   #2
-
0
-

Vycentrujes ho pomoci "margin:0 auto;". Jses si ale jisty, ze je to absolutni pozicovani nutne?

Nahlásit jako SPAM
IP: ...–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
Petroff0
Věrný člen
6. 8. 2007   #3
-
0
-

<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ě.

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
8. 8. 2007   #4
-
0
-

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>

Nahlásit jako SPAM
IP: ...–
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

Podobná vlákna

Problem s pozicovanim — založil někdo

Pomoc s pozicovaním — založil mimi

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý