Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: warstwy zamiast tabel
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
slash.
mam takie pytanie w jaki sposob mozna uzyskac za pomoca warstw efekt taki jak dostawalem przy uzyciu tabel i tla komorki, czyli do tej pory uzywalem czegos takiego:
  1. <tr>
  2. <td bgcolor="#000000" width="1"></td>
  3. <td>
  4. Tekst<br />
  5. test<br />
  6. </td>
  7. <td bgcolor="#000000" width="1"></td>
  8. </tr>

chodzi mi o to ze niewazne ile tekstu bym wpisal w srodkowa kolumne to boczne beda sie rozcialaly tworzac obok pionowe czarne kreski, teraz w jaki sposob moge osiagnac podobny efekt przy uzyciu warstw i CSS questionmark.gif
revyag
Kod
<style type="text/css">
#main{
    width:200px;
    background-color:black;
}
#bord{
    margin-left:1px;
    margin-right:1px;
    background-color:white
}
#cont{
    margin-left:2px;
}
</style>

  1. <div id="main">
  2. <div id="bord">
  3. <div id="cont">
  4. Tekst<br />
  5. test<br />
  6. </div>
  7. </div>
  8. </div>
slash.
a tak juz z innej paczki - zastanawia mnie czy mozna zbudowac strone zupelnie bez uzycia tabel questionmark.gif Chodzi mi o to czy taki serwis jak php.pl czy to forum mozna zbudowac bez uzycia ani jednej tabelki - no moze bez ani jednej to nie - bo z tego co sie orientuje aby wsyrodkowac zawartosc tak aby byla wysrodkowana zarowno w IE jak i netscape trzeba uzyc tabelki, ale czy mozna zbudowac strone ograniczajac znacznie liczbę tabel - powiedzmy do tego stopnia zeby zostala tylko ta jedna wysrodkowujaca calosc questionmark.gif
bregovic
Oczywiście że można - a nawet należy. Tabele są najbardziej gwałconym tagiem w całym htmlu. żeby wyśrodkować warstwe w css piszesz:
Kod
#warstwa {margin: auto;}
slash.
zgadza sie ale to nie zawsze we wszystkich przegladarkach dziala, dobra to moze kolejne pytanie z tej serii, powyzej pytalem jak zrobic na warstwach krawedzie tak jak za pomoca tabeli, a teraz mam pytanie jak zrobic cos takiego:
mam tabele ktora sklada sie z dwoch kolumn lewa to zawartosc z jakims tekstem a prawa to kolumna ktora posiada szerokosc powiedzmy 20px i tlo jako jakis gif, na gore kolumny ma byc umieszczony plik rog_gora.gif a na dole rog_dol.gif na tabelach mniej wiecej by to tak wygladalo:

  1. <table width="400" border="0" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td rowspan="2"><p>ad</p>
  4. <p>asd</p>
  5. <p>asd</p>
  6. <p>asd</p></td>
  7. <td width="20" background="bg.gif" valign="top"><img src="rog_dol.gif" width="20" height="12" /></td>
  8. </tr>
  9. <tr>
  10. <td background="bg.gif" valign="bottom"><img src="rog_dol.gif" width="20" height="12" /></td>
  11. </tr>


i w jaki sposob moge osiagnac cos takiego przy pomocy warstw questionmark.gif

Kolejne pytanie - w jaki sposob umiescic obok siebie dwie warstwy, do tej pory stosowalem cos takiego:
  1. <div style="position:relative; width:400px; height:200px; border:1px;; border-color:#000000">
  2. <div style=" position:absolute; top:0px; left:0px; width:150px; height:200px; border:1px; border-color:#000000">Warstwa nr 1 </div>
  3. <div style=" position:absolute; top:0px; left:150px; width:250px; height:200px; border:1px; border-color:#000000">Warstwa nr 2 </div>
  4. </div>

jednak mam tutaj na sztywno okreslone pozycje jak i rozmiary warsty, co by bylo jezeli chcialbym zeby zarowno warstaw 1 jak i warstwa 2 byly jednakowej wysokosci ale nie okreslonej na sztywno, tylko zaleznej powiedzmy od ilosci tekstu w warstwie 1 - ta bedzie sie dopoasowywala gdy tylko usune parametr height jednak warstwa 2 bedzie bez zmian.
Jak to mozna zrobic w ten sposob ktory chce questionmark.gif

No i trzecie pytanie - gdzie w sieci znajde jakis dobry manual, kurs lub cos w tym stylu dotyczacy CSS i warstw questionmark.gif

Z gory dzieki za pomoc
Denver
Cytat(bregovic @ 2004-12-18 13:13:58)
Oczywiście że można - a nawet należy. Tabele są najbardziej gwałconym tagiem w całym htmlu. żeby wyśrodkować warstwe w css piszesz:
Kod
#warstwa {margin: auto;}

IE wymaga jeszcze text-align: center

Do slasha:
http://glish.com/css/
revyag
Co do pierwszegp pytania, to nie wiem, czy dokładnie coś takiego można uzyskać, ale polecam odwiedzenie strony http://csscreator.com/version2/pagelayout.php
wprawdzie generuje to layouty dla całej strony, ale nic nie stoi na przeszkodzie żeby po drobnych modyfikacjach użyć wygenerowanego layouta w inny sposób smile.gif
Natomiast jeśli chodzi o umiejscowienie warstw obok siebie, to można np. tak:
Kod
<style type="text/css">
#w1,#w2,#w3{
    width:100px;
    background-color:red;
    display:inline;
}
#w2,#w3{
    background-color:green;
    margin-left:5px;
}
#w3{
    background-color:blue;
}

  1. <div id="w1">Lorem ipsum</div>
  2. <div id="w2">dolor sit amet</div>
  3. <div id="w3">consectetur adipisicing elit</div>

Żeby było widać, że warstwy są obok siebie dałem im różne kolory.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.