Autor Zpráva
Koki
Profil *
#1 · Zasláno: 30. 3. 2008, 20:53:43
Odpovědět Citovat
Potřebuji kolem žlutého obrázku udělat tento bílý rám s tou šedivou lištou dole a vpravo, můžete poradit?

http://img218.imageshack.us/my.php?image=ffku4.jpg
vertigo4
Profil
#2 · Zasláno: 30. 3. 2008, 20:55:54
Odpovědět Citovat
Koki
obrázek obalit divem, nastavit mu pozadí té lišty + obrázku dát margin a bílý border
Koki
Profil *
#3 · Zasláno: 30. 3. 2008, 21:20:11
Odpovědět Citovat
a jak to konkrétně zapsat?
Koki
Profil *
#4 · Zasláno: 30. 3. 2008, 21:38:18
Odpovědět Citovat
.ramecek1 {
padding: 40px;
background: #FFFFFF;
text-align: center;
}

Takto mám šířku rámečku přes celou obrazovku
Koki
Profil *
#5 · Zasláno: 31. 3. 2008, 06:44:14
Odpovědět Citovat
tak takhle udělám ten bílí rámeček ale co ten modrý pouze dole a vpravo?
background: #FFFFFF;
padding: 10px;
margin-bottom: 10px;
width: 585px;
vertigo4
Profil
#6 · Zasláno: 31. 3. 2008, 06:55:17 · Upravil/a: vertigo4
Odpovědět Citovat
Koki
ach jo,

HTML: 
<div class="ramecek">
<img src="" alt="">
</div>


CSS: 
div.ramecek {backgroud-image: url('obrazek-listy.jpg') no-repeat right bottom; margin: 0 2px 2px 0;}
div.ramecek img {border: 15px solid #FFFFFF;}


nevím, dělal jsem to popaměti, tak si to vyzkoušej a případně uprav
Koki
Profil *
#7 · Zasláno: 31. 3. 2008, 07:31:11
Odpovědět Citovat
A tím 'obrazek-listy.jpg' má být ten sedý rámeček? Udělal jsem to tak a mám pouze bílý rámeček a ten šedivý tam není
Koki
Profil *
#8 · Zasláno: 31. 3. 2008, 07:36:29
Odpovědět Citovat
to není ono,
vertigo4
Profil
#9 · Zasláno: 31. 3. 2008, 16:00:53
Odpovědět Citovat
Koki
ježiši tak zkoušej... zjistil jsem že jsem to pomíchal... 

div.ramecek {backgroud-image: url('obrazek-listy.jpg') no-repeat right bottom; }
div.ramecek img {border: 15px solid #FFFFFF; margin: 0 2px 2px 0;}
Kentaur
Profil
#10 · Zasláno: 31. 3. 2008, 16:09:43 · Upravil/a: Kentaur
Odpovědět Citovat
Koki
Obludný a složitý zdrojový kod:

<head>
<style type="text/css">
 img.obal {background:url(obrazky/levyramecek.gif) no-repeat left center; padding-left:25px*;}
 img.obal2 {background:url(obrazky/pravyramecek.gif) no-repeat right center; padding-right:25px*;}
 img.obal3 {background:url(obrazky/horniramecek.gif) no-repeat center top; padding-top:25px*;}
 img.obal4 {background:url(obrazky/dolniramecek.gif) no-repeat center bottom; padding-bottom:25px*;}
 img {border:15px solid #fff;}
</style>
<body>
 <div class='obal'>
  <div class='obal2'>
   <div class='obal3'>
    <div class='obal4'>
     <img src='nejakyobrazek.jpg' alt=''>
    </div>
   </div>
  </div>
 </div>
</head>
</body>

Vysvětlím. vytvoříš 4 obrázky pro 4 strany. Jejich velikost + velikost bílého rámečku zadáš do paddingů (*) př: levý rámeček je tlustý 10px a border má 15px. Výsledkem bude padding 25px. Toto řešení je velmi složité a na kod náročné, nicméně univerzální. Pokud bys to potřeboval použít pouze pro jeden obrázek, tak to bude mnohem jednodušší.
Kentaur
Profil
#11 · Zasláno: 31. 3. 2008, 16:14:05
Odpovědět Citovat
vertigo4
Tvé řešení nelze použít. Šlo by pouze v případě, že by Koki potřeboval rámeček pouze pro jeden obrázek. Pak ale musíš namísto marginu u obrázku přidat padding pro div.ramecek.
Koki
Profil *
#12 · Zasláno: 31. 3. 2008, 16:34:40
Odpovědět Citovat
pánové řeším ted jen toto - bílý rámeček kolem obrázku. Když obalím obrázek divem a ve stylu zapíši toto:

.ramecek1 {
background: #FFFFFF;
padding: 25px 20px;
margin: 10px 10px;
width: 585px;
font-family: Arial;
text-align: center;
font-size: 13px;
}


tak obrázek nemám centrovaný na stránce. Jakmile vyndám width: 585px; tak je centovaný ale bílá plocha vlevo a vpravo je strašně široká. Potřebuji šířku bílého rámečku 585px; a zároveň obrázek na středu stránky
Koki
Profil *
#13 · Zasláno: 31. 3. 2008, 16:37:01
Odpovědět Citovat
ještě pro vysvětlení pod obrázkem mák text:

<div class="ramecek1"><img alt="vvv" src="galerie1/obrazek.jpg" width="523px" border="0" /><br /><br /><br /><br />
<b>..název obrázku</b><br />
rozměr obrázku<br />
</div>
Koki
Profil *
#14 · Zasláno: 31. 3. 2008, 16:44:53
Odpovědět Citovat
ještě poznámka v IE je vše centrované na středu stránky pouze v opeře a v FF je to vlevo
Koki
Profil *
#15 · Zasláno: 31. 3. 2008, 16:54:20
Odpovědět Citovat
už jsem na to přišel

.ramecek1 {
background: #FFFFFF;
padding: 25px 20px;
margin: 10px 310px;
font-family: Arial;
text-align: center;
font-size: 13px;
}
nexus
Profil
#16 · Zasláno: 1. 4. 2008, 17:46:33
Odpovědět Citovat
Koki nepříjde mi to nejšťastnější to tvé řešení, ale proti gustu...
Ale možna by tě zajímalo tohle centrování na střed a vertikální centrování
Časová prodleva: 3 roky
j0hny
Profil *
#17 · Zasláno: 13. 1. 2011, 16:36:48
Odpovědět Citovat
Zdravím

Sice už do tohohle vlákna hoodne dlouho nikdo nepřispíval, ale náhodou jsem na něj narazil při hledání odpovědi na jiný problém a našel jsem řešení, ač trochu kostrbaté, tak to sem napíšu kdyby sem přišel náhodou někdo stejnou cestou jako já. Řešení které tu napíšu má jeden háček: bude fungovat pouze pokudbude na jednobarevném pozadí... ale myslím si že většinou tomu tak je. Funguje dobře ve firefoxu, IE to rozháže (s float byly vždycky problémy). Ale když si s tím člověk trochu pohraje, určitě to nakonec půjde.

CSS:
div.obal{
width: 500px;
height: 500px;
background-color: #aaa;}

div.bily{
width: 495px;
height: 495px;
background-color: #fff;
float: left;}

div.horni{
background-color: black;
width: 5px;
height: 5px;
float: right;}

div.spodni{
background-color: black;
width: 5px;
height: 5px;
clear: both;}


HTML:

<div class="obal">
<div class="bily">
<img src="" alt="" style="width: 400px; height: 400px; margin: 47px;" />
</div>

<div class="horni"></div>
<div class="spodni"></div>
</div>

(Zkoušeno s černým pozadím stránky. Barva pozadí se musí schodovat s barvou ve stylech div.horni a div.spodni.)
joe
Profil
#18 · Zasláno: 13. 1. 2011, 16:40:41
Odpovědět Citovat
V dnešní době bych takovou věc řešil jen obrázkem: 

<img src="example.jpg" width="" height="" alt="" style="border: 10px solid white; box-shadow: 0 0 8px rgba(0,0,0,0.7);">
j0hny
Profil *
#19 · Zasláno: 14. 1. 2011, 13:02:10
Odpovědět Citovat
joe:
Vidíš to, box-shadow jsem ani neznal :-) zabývám se teď převážne PHPckem tak jsem CSS trochu vypustil z hlavy. Avšak zkoušel jsem tvůj příklad ve firefoxu a neměl se zrovna k ideálnímu zobrazení....
joe
Profil
#20 · Zasláno: 14. 1. 2011, 15:06:12
Odpovědět Citovat
j0hny:
Musíš doplnit ještě ori další prohlížeče to samé:

-moz-box-shadow
-webkit-box-shadow
holi
Profil
#21 · Zasláno: 14. 1. 2011, 15:12:52 · Upravil/a: holi
Odpovědět Citovat
Pánové nevím nad čím dloumáte ? ... použití obrázku ? to mi přijde dosti fekální 
  <style>
  body{
  background: blue
  }
  .ramecek{
  background: white;
  padding: 20px;
  -moz-box-shadow: 5px 5px 0px #888;
  -webkit-box-shadow: 5px 5px 0px #888;
  box-shadow: 5px 5px 0px #888;
  }
  </style>
  </head>
  <body>
   <img src="prof.jpg" class="ramecek">
  </body>

popř nastavit barvu stínu na rgba ale to už je detail
joe
Profil
#22 · Zasláno: 14. 1. 2011, 15:15:17
Odpovědět Citovat
holi:
Přečti si co jsem psal ([#18]). Navíc téma je z roku 2008.
holi
Profil
#23 · Zasláno: 14. 1. 2011, 15:19:35 · Upravil/a: holi
Odpovědět Citovat
Stím stínem se omlouvám vložil jste to když jsem psal takže jsem to neviděl.
Nechápu ale pořád co by jste řešil obrázkem ?
joe
Profil
#24 · Zasláno: 14. 1. 2011, 15:23:01
Odpovědět Citovat
V kódu je jen tag img, takže obrázkem.
Časová prodleva: 14 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0