[CSS] div wewnątrz diva

[jok]

Znam podstawowe informacje na temat CSS, ale mam problem ze zdefiniowaniem koloru czcionki jednego wyrazu gdy np zdanie jest juz zdefiniowane za pomocą diva. Oto przykład

Podaje tutaj przykład jak chcę to zrobić:

w oddzielnym pliku css mam zapisane:

Kod: Zaznacz cały

.tekst_zwykly {
	font-family: Arial;
	font-size: 11px;
	margin-left: 5px;
}

w pliku html:

Kod: Zaznacz cały

<div class=tekst_zwykly>
Zdanie z jednym wyrazem innego koloru
</div>

I chcę zrobić przykładowo żemy wyraz "koloru był np. koloru niebieskiego


Robiłem w ten sposób ze w oddzielnym pliku tworzyłem nową klasę, a w html-u zamieszczałem diva w divie:

Kod: Zaznacz cały

<div class=tekst_zwykly>
Zdanie z jednym wyrazem innego<div class=tekst_kolorowy> koloru</div>.
</div>

ale kiedy tak robiłem wtedy wyraz "koloru" był zrzucany do następnej lini i tak samo z kropką ktora jest po </div>

Proszę o pomoc

[Stig]

To jak najbardziej poprawny efekt, gdyż element div ustawia zawartość blokowo. Do celu jaki chcesz osiągnąć należy zastosować element span, który ustawia zawartość liniowo. Przykład:

Kod: Zaznacz cały

<span class="tekst_zwykly"> 
Zdanie z jednym wyrazem innego <span class="tekst_kolorowy">koloru</span>. 
</span>

Polecam lekturę specyfikacji.

[jok]

Dzięki, rzeczywiście użycie span poskutkowało, ale wynikł kolejny problem. Całe zdanie zatraciło swój margines który dla zwykly_teskt istnieje w oddzielnym pliku css

Wygląda to tak:

PLik html:

Kod: Zaznacz cały

<span class="tekst_zwykly"> 
Zdanie z jednym wyrazem innego <span class="tekst_kolorowy">koloru</span>. 
</span>

Plik css:

Kod: Zaznacz cały

.tekst_zwykly {
	font-family: Arial;
	font-size: 11px;
	margin-left: 5px;
}
.tekst_kolorowy {
	font-family: Arial;
	font-size: 11px;
	margin-left: 5px;
	color: #9C0101;
}

Dlaczego margines nie działa ?

[Stig]

Przetestowałem zaprezentowany przez Ciebie kod i pod trzema przeglądarkami jakimi go "potraktowałem" (Opera8, Firefox i IE6) braku marginesu nie zauważyłem (tj. margines jest i bardzo dobrze się trzyma ). Możliwe, że efekt, o którym mówisz ma miejsce ze względu na błąd w pozostałej części kodu strony.

PS. Taka wielka prośba ode mnie: fajnie by było, gdybyś następnym razem przykład kodu zamieszczał korzystając z BBCode: "Code". W znacznym stopniu poprawia to czytelność post'a i pomaga wprowadzić jako taki porządek na forum .

[jok]

Rzeczywiście też sprawdzałem wszystkimi przeglądareczkami i śmiga , ale mogę się chyba czuć bez winy bo nawaliła poważna firma. W moim edytorze wyglądało to zupełnie inaczej niż w przeglądarkach. Co do kodu to poprawiłem, lubie estetykę, ale niekorzystam często z forum.

P.S Stig sprawdź wiadomości

[Stig]

P.S Stig sprawdź wiadomości

Jakie wiadomości?