+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Potrójne obramowanie dla zdjęcia (/thread-potrojne-obramowanie-dla-zdjecia)
Potrójne obramowanie dla zdjęcia - piotr485 - 23-07-2009
Witam Serdecznie!
Mam takie pytanko czy ktoś wie jak za pomocą CSS zrobić potrójne obramowanie dla obrazka <img>
Standardowo robi to się za pomocą np. border: 1px solid red, a czy da się zrobić, pierwsze obramowanie 1 px red; nastepnie 3px; blue i znowu 1px yellow czy jest cos takiego mozliwe do wykonania ?
RE: Potrójne obramowanie dla zdjęcia - dziamber - 23-07-2009
RE: Potrójne obramowanie dla zdjęcia - Gherthus - 23-07-2009
Musisz wokół image'a zrobić dwa divy. Pierwszy border daj dla img, drugi dla div#1, trzeci dla div#2.
RE: Potrójne obramowanie dla zdjęcia - piotr485 - 23-07-2009
Mam taki problem jak zrobić te zdjęcia obok siebie a nie jedno pod drugim ?
<div id="ramka_01"><div id="ramka_02"><div id="ramka_03"><img src="images/galeria_01s.jpg"></div></div></div>
<div id="ramka_01"><div id="ramka_02"><div id="ramka_03"><img src="images/galeria_02s.jpg"></div></div></div>
<div id="ramka_01"><div id="ramka_02"><div id="ramka_03"><img src="images/galeria_03s.jpg"></div></div></div>
RE: Potrójne obramowanie dla zdjęcia - Rafik01 - 23-07-2009
Po pierwsze wartość atrybutu "id" nie może się powtarzać. Czyli jak masz id="ramka_01", ramka_02... to zamień "id" na "class". Pamiętaj, aby w stylu css zamienić znak "#" na ".".
Teraz dodaj w kodzie css:
Kod:
.ramka_01{
float: left;
}RE: Potrójne obramowanie dla zdjęcia - KowR - 23-07-2009
Gherthus - wystarczą tylko dwa ... Bo trzecią ramkę będzie miał img.
RE: Potrójne obramowanie dla zdjęcia - Gherthus - 24-07-2009
@rodi: Ale ja tak właśnie napisałem ^^
Cytat:Musisz wokół image'a zrobić dwa divy. Pierwszy border daj dla img, drugi dla div#1, trzeci dla div#2.
RE: Potrójne obramowanie dla zdjęcia - KowR - 24-07-2009
Wcześniej było napisane 3, albo jestem ślepy.
W każdym bądź razie może ja się zasugerowałem kodem piotra... Jak coś to mi wybacz.
RE: Potrójne obramowanie dla zdjęcia - Piana - 26-07-2009
Kod:
<div style="border: solid red 3px">
<div style="border: solid green 3px">
<div style="border: solid blue 3px">
Tutaj walnij sobie obrazek i już :D
</div>
</div>
</div>jak na dłoni było napisane na kurshtml.boo.pl
Tylko ten kod koloruje te ramki, ale żaden problem to zmienić ;-)