IPB

( Zaloguj | Zarejestruj )

> Uwaga!

Jeśli opisujesz problem ze skórką - podaj link do downloadu - nie każdy ma tą skórkę co Ty ;)

 
Reply to this topicStart new topic
> Podpisy pod zdjeciami (captions)
Kasia79
post 30.6.2007 - 17:22
Post #1


aktywność:
*****

Grupa: V.I.P.
Postów: 856

Nr: 2 641



Witam,

Chciałabym by moje zdjęcia (umieszczane w postach) mialy podpisy jednakze 'wykonane' czcionka o innym ksztalcie, kolorze i stylu niz czcionka uzyta do napisania posta.
Uzywam MistyLook i WP 2.1.

W style.css dodałam takie cos:
KOD
.caption
{
text-align: left;
margin: 5px;
padding: 5px;
font-style: italic;
font-size:90%;
color: #644b19;
}

Natomiast samo zdjecie 'owinelam' w ten sposob:
KOD
<p CLASS=”caption” STYLE=”width: 270px”><img ALT=”church.JPG” src=”http: (...)”  /></br>
Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</p>
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below?

I wszytko jest 'cacy' ponieważ tekst ciagnie sie ponizej zdjecia (i podpisu).

Problem zaczyna się, gdy chcę by tekst biegl obok zdjecia.
W tym przypadku zdjecie jest owiniete takim oto kodem:
KOD
<p CLASS=”caption” STYLE=”width: 270px; float: left”><img ALT=”church.JPG” src=”http: (...)”  /></br>
Church of Peace in Jawor, Poland was built in September 1655 as one of three Churches of Peace in Lower Silesia</p>
And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below?

I zdjecie 'zwisa' sobie poza granice posta (najeżdza na nagłowek kolejnego...) sad.gif

Próbowałam dodac
na końcu, ale... to działa tylko jesli zachowam/opublikuje post i juz nigdy wiecej nie bede go edytowac. Jakakolwiek proba edycji postu konczy sie tym, ze znacznik (
) znika i ... zdjęcie znowu sobie zwisa. sad.gif

Czy jest ktoś w stanie mi wytłumaczyć DLACZEGO tak sie dzieje? I JAK to naprawic?
Będę wdzięczna za wskazówki.

Kasia
PS. Uprzedzam -> probowalam juz użyc tabeli zamiast .caption, ale problem pozostaje taki sam....


--------------------
Curiosity killed the cat, but satisfaction brought her back.
Go to the top of the page
 
+Quote Post
west28
post 30.6.2007 - 18:56
Post #2


aktywność:
*****

Grupa: Redakcja
Postów: 875

Nr: 309



Ponieważ dodajesz z ręki kod edytor wizualny ma to do siebie, że go obcina podczas edycji. Dziwi mnie, że nadajesz dla jpg+text div'a Czy nie prościej byłoby dodać ostylowanie do img tylko ?? Innym sposobem jest wyłączenie edytora...


--------------------
Go to the top of the page
 
+Quote Post
Kasia79
post 30.6.2007 - 20:09
Post #3


aktywność:
*****

Grupa: V.I.P.
Postów: 856

Nr: 2 641



Czesc west28,

Tego mi brakowało! Dzięki wielkie za info o WYSIWG -> w życiu bym na to nie wpadła. Wyłączyłam go i teraz wszystko pięknie wygląda. Nie tylko w FF i Operze, ale nawet w IE wink.gif .

Przyznam też, że chciałabym wypróbować druga opcje, którą zaproponowałeś:
CYTAT
Czy nie prościej byłoby dodać ostylowanie do img tylko ??


No więc pokombinowałam trochę i by to miało ręce i nogi wrzuciłam zdjęcie do posta w taki sposób:
KOD
<p style="width: 270px; float: left; margin: 5px; font-style: italic; font-size:90%; color: #644b19"><img src="(...) alt="church.JPG" /></br>blah-blah-blah...</p>And now the question is what will happen to that text. Will it wrap photo nicely or will hide somewhere below? In this case should be NEXT TO.<div style=clear:both;></div>


Szczerze mówiąc było z tym więcej zabawy, bo wczesniej musialam tylko okreslic width i float oraz dodac class...

A może miałes na mysli jakas inna stylizacje? Jesli tak, bede wdzieczna za wskazanie kierunku wink.gif.

Kasia


--------------------
Curiosity killed the cat, but satisfaction brought her back.
Go to the top of the page
 
+Quote Post
west28
post 01.7.2007 - 08:32
Post #4


aktywność:
*****

Grupa: Redakcja
Postów: 875

Nr: 309



No prawie prawie chodziło mi bardziej o ostylowanie img w style.css tematu smile.gif Robimy to tak. Nadajemy klasy przy każdym img. W style.css umieszczamy coś takiego:
KOD
img.c {                        
    display: block;
    margin-left: auto;
    margin-right: auto;
    }    
img.r {
    float: right;
    }
img.l {
    float: left;
    }

Proste i nie trzeba wpisywać za każdym razem ostylowania smile.gif


--------------------
Go to the top of the page
 
+Quote Post
Kasia79
post 02.7.2007 - 13:48
Post #5


aktywność:
*****

Grupa: V.I.P.
Postów: 856

Nr: 2 641



Czesc west28,

CYTAT
Proste i nie trzeba wpisywać za każdym razem ostylowania

Niom faktycznie proste i dlatego tego uzywam ... od 'zawsze' biggrin.gif .
Ostylowanie, ktore dodaję odnosi sie do podpisów a nie zdjęc jezyk3.gif .

Jeszce raz dzieki za pomoc

Kasia


--------------------
Curiosity killed the cat, but satisfaction brought her back.
Go to the top of the page
 
+Quote Post
west28
post 02.7.2007 - 20:49
Post #6


aktywność:
*****

Grupa: Redakcja
Postów: 875

Nr: 309



jeśli się nie mylę to ostylowanie zdjęcia "ułoży" odpowiednio tekst w wpisie
Pozdrawiam


--------------------
Go to the top of the page
 
+Quote Post
Kasia79
post 02.7.2007 - 22:09
Post #7


aktywność:
*****

Grupa: V.I.P.
Postów: 856

Nr: 2 641



Nie mylisz sie wink.gif. Faktycznie ostylowanie zdjęcia wpływa na wygląd podpisu.
Ale ja juz mam .caption zdefiniowane w style.css, wiec w tym momencie nie ma znaczenia czy uzyje tego , czy tez img.c. Zwłaszcza, ze i tak za kazdym razem musze okreslic szerokosc i pozycje w zaleznosci od rozmiarow zaladowanego zdjecia i tego co ma byc wokól cool.gif .

Pozdrawiam

Kasia


--------------------
Curiosity killed the cat, but satisfaction brought her back.
Go to the top of the page
 
+Quote Post

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

 



: 23 05 12 - 01:03