Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> Jak zrobić ramke jak na nk
Johnas
post 31.07.2010, 20:35:58
Post #1





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

Witam! Piszę tutaj ponieważ nie jestem dobry w CSS ani w js. Interesuje mnie jak zrobić taką otoczkę do okoła zdjęcia jak na nk i jak zrobić tą ramkę w której są zdjęcia.


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
IceManSpy
post 31.07.2010, 20:40:29
Post #2





Grupa: Zarejestrowani
Postów: 1 006
Pomógł: 111
Dołączył: 23.07.2010
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Jak masz obrazek to robisz tak:
[HTML] pobierz, plaintext 
  1. <img class="ramka" src="nazwa.jgp" />
[HTML] pobierz, plaintext

A w CSS:
Kod
img.ramka
{
border: black 1px solid;
padding 5px;
}


To powinno zadziałać. Pisałem z głowy więc mogą być jakieś małe błędy. Ale sprawdź to.


--------------------
Mój blog
Dropbox jako repozytorium GIT || Podgląd zapytań do bazy danych w Zend FrameWork
Go to the top of the page
+Quote Post
krzysztof_kf
post 31.07.2010, 20:40:57
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Możesz pokazać to na screenie o wiele szybciej by coś się wyjaśniło .
Go to the top of the page
+Quote Post
kilas88
post 31.07.2010, 20:44:26
Post #4





Grupa: Zarejestrowani
Postów: 305
Pomógł: 25
Dołączył: 27.01.2007

Ostrzeżenie: (0%)
-----

nie wiem czy o to zdjęcie chodzi, ale przykładowo:

Kod
img.thumb  {
background-color:#FFFFFF;
border:1px solid #CCDCE8;
bottom:1px;
display:block;
margin:auto;
padding:5px;
position:relative;
right:1px;
}


Kod dla miniaturek z NK.
Go to the top of the page
+Quote Post
Johnas
post 31.07.2010, 21:23:27
Post #5





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

kilas88 jak dałem twój kod to teraz zdjęcia zamiast jeden obok drugiego to pokazuje jedno pod drugim.

A wie ktoś jak zrobić tą ramkę w której są wszystkie zdjęcia? aby to nie było na zwykłym body tylko jakoś ładnie w ramce


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
IceManSpy
post 31.07.2010, 21:33:38
Post #6





Grupa: Zarejestrowani
Postów: 1 006
Pomógł: 111
Dołączył: 23.07.2010
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Robisz sobie diva:
[HTML] pobierz, plaintext 
  1. <div class="ramka"><img class="ramka" src="nazwa.jgp" /> <img class="ramka" src="nazwa.jgp" /> <img class="ramka" src="nazwa.jgp" /> <img class="ramka" src="nazwa.jgp" /> <p>i jakiś tekst</p></div>
[HTML] pobierz, plaintext

I CSS:
Kod
div.ramka
{
border: black 1px solid;
padding 5px;
}


Do powyższego CSS'a możesz dodać parę opcji. To jest taki ogół.


--------------------
Mój blog
Dropbox jako repozytorium GIT || Podgląd zapytań do bazy danych w Zend FrameWork
Go to the top of the page
+Quote Post
krzysztof_kf
post 31.07.2010, 21:35:41
Post #7





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  1.  
  2. <style type="text/css">
  3.  
  4. #zdjecia {
  5. width: 1000px;
  6. height: auto;
  7. float: left;
  8. border: 1px solid #00ff00;
  9. }
  10.  
  11. #zdjecia img {
  12. display: inline;
  13. float: left;
  14. }
  15.  
  16.  
  17. </style>
  18.  
[CSS] pobierz, plaintext


i html 

[HTML] pobierz, plaintext 
  1.  
  2. <div id="zdjecia">
  3. <img src="sciezka_do_zdjecia"/>
  4. <img src="sciezka_do_zdjecia"/>
  5. <img src="sciezka_do_zdjecia"/>
  6. </div>
[HTML] pobierz, plaintext


Ten post edytował krzysztof_kf 31.07.2010, 21:44:04
Go to the top of the page
+Quote Post
Johnas
post 31.07.2010, 21:38:35
Post #8





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

Chodzi mi o coś takiego:
screen

krzysztof_kf Twój kod nie dodał mi ramki sad.gif

Ten post edytował Jonek_1993 31.07.2010, 22:02:07


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
krzysztof_kf
post 31.07.2010, 21:44:26
Post #9





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Edytowałem mój wcześniejszy post zobacz .


Wkradło się parę istotnych błędów .

Screen nie działa .

Ten post edytował krzysztof_kf 31.07.2010, 21:46:21
Go to the top of the page
+Quote Post
Johnas
post 31.07.2010, 22:03:54
Post #10





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

Po poprawkach twoja ramka działa ale jest tam tylko zielona linia jak zresztą możesz zobaczyć to tu
Screen już działa


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
krzysztof_kf
post 31.07.2010, 22:06:10
Post #11





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Więc co chcesz jeszcze uzyskać ?
Go to the top of the page
+Quote Post
Johnas
post 31.07.2010, 22:16:10
Post #12





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

Aby napis najnowsze zdjęcia był na grafice tak jak to widać na screenie i na dole zakończenie kolorystyczne i jak by się dało zaokrąglić i aby dopasowywała się do ilości zdjęć a nie wychodziła poza stronę.

Za pomoc będe bardzo wdzięczny


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
krzysztof_kf
post 31.07.2010, 22:28:19
Post #13





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Jeśli chodzi o napis najnowsze zdjęcia żeby było w ramce to daj to po selektorze zdjęcia

[HTML] pobierz, plaintext 
  1. <h3>Najnowsze zdjęcia</h3>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Johnas
post 1.08.2010, 22:35:37
Post #14





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

a aby ramka się kończyła równo ze zdjęciami? i aby napis był na grafice?

A jak zrobić przerwę 2px między zdjęciami? bo udało mi się trochę ulepszyć tą tabelkę co dostałem


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
Damonsson
post 1.08.2010, 22:42:58
Post #15





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  1. #zdjecia img {
  2. display: inline;
  3. float: left;
  4. margin: 0 2px;
  5. }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
krzysztof_kf
post 1.08.2010, 22:43:29
Post #16





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Byś musiał dać klasę np. zaraz po selektorze <h3> . np.


[CSS] pobierz, plaintext 
  1.  
  2. .ramka {
  3. padding: 3px 3px 3px 3px;
  4. }
[CSS] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1.  
  2. <div class="ramka">
  3. </div>
[HTML] pobierz, plaintext


Ten post edytował krzysztof_kf 1.08.2010, 23:08:05
Go to the top of the page
+Quote Post
Johnas
post 1.08.2010, 23:58:59
Post #17





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

a w dół jeszcze ab zeszło o dwa px też tak aby tylko dopisać do #zdjecia img to co trzeba wpisać. jest jakaś funkcja podobna do #
margin: 0 2px;


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
Damonsson
post 2.08.2010, 00:27:40
Post #18





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

margin: 0 2px;
na
margin: 2px;


Ale Ty jesteś tępy
Go to the top of the page
+Quote Post
Johnas
post 3.08.2010, 15:09:20
Post #19





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----

Nie jestem tępy tylko się uczę snitch.gif Jeszcze pytanko małe. Lista znajomych wygląda tak Jak zrobić aby ten nick był na białym polu pod zdjęciem i na środku. i aby nie trzeba było robić nowej białej tabelki winksmiley.jpg Da się?

Pomoże ktoś?


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
krzysztof_kf
post 3.08.2010, 16:15:23
Post #20





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Tak na szybkiego 


[CSS] pobierz, plaintext 
  1.  
  2. .content a {
  3. width: 100px;
  4. float: left;
  5. text-align: center;
  6. text-decoration: none;
  7. }
  8.  
[CSS] pobierz, plaintext


dodaj to do CSS
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 08:18
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn