Jak zrobić ramke jak na nk Opcje

[Johnas]

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.

[IceManSpy]

Jak masz obrazek to robisz tak:

[HTML] pobierz, plaintext 
<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.

[krzysztof_kf]

Możesz pokazać to na screenie o wiele szybciej by coś się wyjaśniło .

[kilas88]

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.

[Johnas]

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

[IceManSpy]

Robisz sobie diva:

[HTML] pobierz, plaintext 
<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ół.

[krzysztof_kf]

[CSS] pobierz, plaintext 
 
<style type="text/css">
 
#zdjecia {
width: 1000px;
height: auto;
float: left;
border: 1px solid #00ff00;
}
 
#zdjecia img {
display: inline;
float: left;
}
 
 
</style>
 
[CSS] pobierz, plaintext 

i html

[HTML] pobierz, plaintext 
 
<div id="zdjecia">
<img src="sciezka_do_zdjecia"/>
<img src="sciezka_do_zdjecia"/>
<img src="sciezka_do_zdjecia"/>
</div>
[HTML] pobierz, plaintext 

Ten post edytował krzysztof_kf 31.07.2010, 21:44:04

[Johnas]

Chodzi mi o coś takiego:
screen

krzysztof_kf Twój kod nie dodał mi ramki (IMG:style_emoticons/default/sad.gif)

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

[krzysztof_kf]

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

[Johnas]

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

[krzysztof_kf]

Więc co chcesz jeszcze uzyskać ?

[Johnas]

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

[krzysztof_kf]

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

[HTML] pobierz, plaintext 
<h3>Najnowsze zdjęcia</h3>
[HTML] pobierz, plaintext 

[Johnas]

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

[Damonsson]

[CSS] pobierz, plaintext 
#zdjecia img {
display: inline;
float: left;
margin: 0 2px;
}
[CSS] pobierz, plaintext 

[krzysztof_kf]

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

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

[HTML] pobierz, plaintext 
 
<div class="ramka">
</div>
[HTML] pobierz, plaintext 

Ten post edytował krzysztof_kf 1.08.2010, 23:08:05

[Johnas]

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;

[Damonsson]

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


Ale Ty jesteś tępy

[Johnas]

Nie jestem tępy tylko się uczę (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/winksmiley.jpg) Da się?

Pomoże ktoś?

[krzysztof_kf]

Tak na szybkiego

[CSS] pobierz, plaintext 
 
.content a {
width: 100px;
float: left;
text-align: center;
text-decoration: none;
}
 
[CSS] pobierz, plaintext 

dodaj to do CSS