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

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

 
Hledat
Rozšířené hledání ›
Nejnovější témata ve fóru
09:02, .NET Testing Lab for Honey and Honey Products - FARE LABS Pvt.…
08:39, Python Výběr pixelu klikem v zoomované oblasti [prohlížeč obrázku]
14:30, Funkcionální progr… Dummy smart a Kunstinteligenz
14:46, Python Používáte SQLAlchemy nebo pandas? pymysql
11:30, Funkcionální progr… Promotic
09:34, Software KAPEKA - zadní dvířka do woken
Stavba Laser Arény
Laser Game Brno

›

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: ...–
CommanderZ0
Boss
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: ...–
 ← Zpět na seznam vláken  ← Zpět do Fóra
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.
-
 Zdrojový kód  Vložit obrázek  Video  Smajlíci
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, 5 hostů

Podobná vlákna

Problem s pozicovanim — založil někdo

HTML / XHTML

Problém s layoutem a pozicováním — založil Colpik

CSS

Problem tr img — založil Erik

JavaScript, AJAX…

Problem s vzkreslovanim IMG — založil Borisek

JavaScript, AJAX…

Pomoc s pozicovaním — založil mimi

CSS

 

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