style dla stopki (z tekstem i obrazkami), jak najoptymalniej? Opcje

[_kama]

Witam,
mam problem z organizacja stopki na stronie. Chwilowo styl dla niej, to:

Kod

    .footer
    {
  width: 100%;
  background-image:url(img/footer.jpg);
  height:69px;
  clear:both;
  background-repeat:repeat-x;
  color: #FFFFFF;
  text-align:left;
    }

gdzie footer.jpg to paseczek o szerokosci 1px

Wewnatrz footera musze umiescic:
- linijke tektu
- linijke tekstu ktory jest linkim
- obrazke z logo

Nie chce tworzyc osobnych klas dla nich dlatego zastanawiam sie jak to zorganizowac. Czy dla testu zrobic p.footer dla linka a.footer a obraka img.footer?
Kazdy z nich musi sie roznic tym jak odsuniety jest od bokow stopki. Czy w takim razie dla kazdego musze ustawic margin indywidualny?
Chwilowo wyglada to u mnie tak:

Kod

  p.footer
    {
  margin-left: 300px;
  margin-top: 30px;
  background: none;
  height:auto;
  clear:both;
    }
    a.footer
    {
  color: #D1D1D1;
  text-decoration:none;
  margin-left: 200px;
  margin-top: 30px;
  background: none;
    }
    img.footer
    {
  width:auto;
  margin-left: 0;
  margin-top: 0;
  background: none;
    }

wywolanie natomiast:

[HTML] pobierz, plaintext 
<div class="footer">
	<img class="footer" src="img/footer-logo.jpg" />
	<p class="footer">Wszelkie prawa zastrzeżone (C)</p>
	<a class="footer" href="">o nas</a> <a class="footer" href="">kontakt</a>
</div>
[HTML] pobierz, plaintext 

Tyle ze obecnie ostro sie to rozjezdza. Na swoim miejscu jest jedynie img ale footer jest o wiele wyzszy niz byc powinien i p i a spadaja. Poradzcie w czym moze byc blad. Z gory dzieki.

[revyag]

Możesz to zrobić inaczej.

Kod

.footer p
{
margin-left: 300px;
margin-top: 30px;
height:auto;
clear:both;
}
.footer a
{
color: #D1D1D1;
text-decoration:none;
margin-left: 200px;
}
.footer img
{
width:auto;
margin-left: 0;
margin-top: 0;
}

Margin-top nie zadziała na element a, bo jest on linowy.

Ten post edytował revyag 2.01.2006, 13:43:59

[_kama]

Czy to zasada czy przypadek ze przy takim zapisie jak zaproponowales kod html moze wygladac tak:

[HTML] pobierz, plaintext 
<div class="footer">
<img src="img/footer-logo.jpg" />
<p>Wszelkie prawa zastrzeżone (C)</p>
<a href="">o nas</a> <a href="">kontakt</a>
</div>
[HTML] pobierz, plaintext 

zamiast tak:

[HTML] pobierz, plaintext 
<div class="footer">
<img class="footer" src="img/footer-logo.jpg" />
<p class="footer">Wszelkie prawa zastrzeżone (C)</p>
<a class="footer" href="">o nas</a> <a class="footer" href="</span>">kontakt<<span style='color:blue'>/a>
</div>
[HTML] pobierz, plaintext 

A po za tym jak powinnien wygladac zapis gdybym np w klasie footer chciala miec 3 rodzaje tekstu? W przypadku gdy ma byc tylko jeden to skorzystam z p, ale co gdzy chcialabym miec 3 wyglady tekstow w klasie? jak to zapisac?

Ten post edytował _kama 2.01.2006, 14:05:26

[revyag]

Chodzi o czytelniejszy zapis, tutaj w pewien sposób można zastosować hermetyzację styli. Czyli ustawiasz css dla elementów występujęcych w danej klasie Poza klasą są niewidoczne.
Ale pewnych rzeczy się nie da przeskoczyć, żeby zrobić tekst w trzech kolorach zakładające że będą one zawarte w tych samych elementach (p lub div) trzeba zrobić trzy klasy span.

[_kama]

Wielkie dzieki za rady.

Jeszcze co do tych 3 klas span to jest jakis ladny zapis zeby powiazac je z jakas swoja nadrzedna klasa? Czy zapis typu

Kod

text1.footer
{
  color: #000000;
}

text2.footer
{
  color: #040404;
}

text3.footer
{
  color: #404040;
}

[HTML] pobierz, plaintext 
<div class="footer">
   <span class="text1">text1</span>
   <span class="text2">text2</span>
   <span class="text3">text3</span>
</div>
[HTML] pobierz, plaintext 

bylby poprawny? Czy to zadziala? a jezeli nie to jak go zmienic zeby nie musiec tworzyc osobnych klas text1 text2 i text3?

Ten post edytował _kama 2.01.2006, 14:23:11

[revyag]

No nie bardzo jest poprawny.
Zasada jest taka jak podałem wyżej.
czyli:

Kod

.footer span.text1
{
color: #000000;
}

W ten sposób ustawiasz właściwości klasy dla która będzie zawarta w danym elemencie, tutaj .footer. Dla innego elementu div możesz ustawić inne właściwości. Jak napisałem wcześniej nie da się zrobić tak aby mieć tekst w trzech kolorach nie tworząc trzech klas.

[_kama]

Ostatnie pytania

- Jak w takim razie w htmlu odwolac sie do klas wedlug sty;lu ktory podales?
czy

[HTML] pobierz, plaintext 
<div class="footer">
<span class="text1">blabla</span>
</div>
[HTML] pobierz, plaintext 

jest poprawne?


jak z poprawnoscia zapisu jak ponizej (ktory zadzialal we wszystkich przegladarkach)?

Kod

.footer #text1
{
     color: #000000;
}

i wywolanie:

[HTML] pobierz, plaintext 
<div class="footer">
<span id="text1">blabla</span>
</div>
[HTML] pobierz, plaintext 

Czy to jest jednoznaczne z zapisem ktory zaproponowales? (oprocz tego ze tworzac id moge z niego skorzystac tylko raz?)

[revyag]

1.Tak, jest to poprawne
2. Tak jest to poprawne i zadziała na wszystkich przeglądarkach i tworząc id nadajesz je tylko jednemu elementowi.