Tabela -> DIV

Oglądasz wersję archiwalną tematu "Tabela -> DIV" z forum pl.comp.www



Jacek Dębowczyk - 7 Gru 2003, 18:11
Witam,
zdaję sobie sprawę, że temat przejścia z tabel na divy był tutaj wałkowany
wielokrotnie, ale po przeszukaniu archiwum nie znalazłem odpowiedzi na moje
pytanie. Sprawa jest prosta: chcę w poniższym kodzie zrezygnować z tabeli:

<div align="center"
  <table<tr<td align="left"
     jakiś tekst<br
     i jeszcze coś<br
  </td</tr</table
</div

Chodzi o to, że tekst ma się znajdować w bloku na środku ekranu, jednak
wewnątrz tego bloku ma być wyrównany do lewej. Nie potrafię zastosować w
odniesieniu do div'a naturalnej cechy tabel: automatycznego dostosowywania
swojej szerokości do zawartości. Próbowałem ze style="width:auto;", niestety
bez efektów.
Z góry dziękuję za odpowiedzi.




|<onrad - 7 Gru 2003, 18:20
12/08/2003 12:11 AM | Jacek Dębowczyk:

<div align="center"
  <table<tr<td align="left"
     jakiś tekst<br
     i jeszcze coś<br
  </td</tr</table
</div

Chodzi o to, że tekst ma się znajdować w bloku na środku ekranu, jednak
wewnątrz tego bloku ma być wyrównany do lewej.



   <div
      jakiś tekst<br
      i jeszcze coś<br
   </div

dla div dajesz styl:

width: 100px;
text-align: left;
margin-left: auto;
margin-right: auto;
/*
        i tu już zgaduję jakby to wypozycjonować w pionie, bo chyba o to     też
ci chodziło. Jeśli nie to pomiń dalszą część. Jeśli tak to
        zastosuj ją lub delikatnie zmień:
*/
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
overflow: visible;

Pod Mozillą i Operą powinno zadziałać; nie wiem jak pod IE bo nie mam
jak teraz sprawdzić. Chociaż jak tekst będzie za długi to już nie będzie
wypozycjonowany w pionie, tylko tak jakby od pionu się zaczynał.



|<onrad - 7 Gru 2003, 18:22
12/08/2003 12:21 AM | |<onrad:

Pod Mozillą i Operą powinno zadziałać; nie wiem jak pod IE bo nie mam
jak teraz sprawdzić. Chociaż jak tekst będzie za długi to już nie będzie
wypozycjonowany w pionie, tylko tak jakby od pionu się zaczynał.



Jak się będą dziwy dziać, w pierwszej kolejności zrezygnuj z overflow i
wtedy zobacz jak to wygląda.



Jacek Dębowczyk - 7 Gru 2003, 18:37

  <div
     jakiś tekst<br
     i jeszcze coś<br
  </div

dla div dajesz styl:

width: 100px;
text-align: left;
margin-left: auto;
margin-right: auto;



Dzięki za błyskawiczną odpowiedź.
Niestety, nie do końca o to mi chodziło. Tutaj muszę narzucić jakąś stałą
szerokość tego div'a. Ja natomiast chciałbym, żeby div (analogicznie jak
tabela) sam dostosował szerokość na podstawie szerokości tekstu wewnątrz.
Zastosowanie width: auto; powoduje ustalenie szerokości 100%, więc to też
odpada.
Czekam na inne sugestie.




Bogdan Blaszczak - 7 Gru 2003, 19:13

<div align="center"
  <table<tr<td align="left"
     jakiś tekst<br
     i jeszcze coś<br
  </td</tr</table
</div

Chodzi o to, że tekst ma się znajdować w bloku na środku ekranu, jednak
wewnątrz tego bloku ma być wyrównany do lewej. Nie potrafię zastosować w
odniesieniu do div'a naturalnej cechy tabel: automatycznego dostosowywania
swojej szerokości do zawartości. Próbowałem ze style="width:auto;",
niestety
bez efektów.



BlaTek
http://blatek.25.pl
http://blatek.25.pl/christmaspuzzle/puzzle.html
<html<head
<style
#out {
 position:absolute; right:50%; bottom:50%;
}



#in {
 position:relative; left:50%; top:50%;
 background-color:lightblue;
 border:1px solid black;
 padding:10px;
}



</style

</head<body

<div id="out"
 <div id="in"
  jakis tekst<br
  wyrownanay do lewej strony<br
  blabla
 </div
</div

</body</html



Jacek Dębowczyk - 7 Gru 2003, 21:24

<style
#out {
position:absolute; right:50%; bottom:50%;
}
#in {
position:relative; left:50%; top:50%;
background-color:lightblue;
border:1px solid black;
padding:10px;
}
</style



Dokładnie o to chodziło.
Wielkie dzięki.
Swoją drogą, ten sposób z przykrywającymi się div'ami wydaje mi się mniej
naturalny niż ułożenie tabel, więc chyba jednak zostanę przy tych ostatnich.



|<onrad - 8 Gru 2003, 05:22
12/08/2003 12:37 AM | Jacek Dębowczyk:

Dzięki za błyskawiczną odpowiedź.
Niestety, nie do końca o to mi chodziło. Tutaj muszę narzucić jakąś stałą
szerokość tego div'a.



nie musisz. po to by ten overflow



|<onrad - 8 Gru 2003, 05:24
12/08/2003 03:24 AM | Jacek Dębowczyk:

Swoją drogą, ten sposób z przykrywającymi się div'ami wydaje mi się mniej
naturalny niż ułożenie tabel,



Po pierwsze to one sie wcale nie przykrywaja a sa zagniezdzone, a juz na
pewno wyglada to bardziej naturalnie niz wlasnie table



Bogdan Blaszczak - 8 Gru 2003, 07:50
[...]
Dokładnie o to chodziło.
Wielkie dzięki.
Swoją drogą, ten sposób z przykrywającymi się div'ami wydaje mi się mniej
naturalny niż ułożenie tabel, więc chyba jednak zostanę przy tych



ostatnich.

Na tym polega nowoczesny layout, ze nie zawsze jest tak jak sie komus
wydaje. Tzn. ze logiczna struktura dokumentu wcale nie musi (choc moze)
pokrywac się z fizyczną strukturą wizualną. Jest rzeczą zupelnie
dopuszczalną, ze np. element B zagniezdzony logicznie (kodowo) w elemencie
A, zostanie wyswietlony w prawym-dolnym rogu ekranu, podczas gdy element A
znajdzie sie jednoczesnie w lewym-gornym rogu, a po kliknieciu np. jakiegos
tajemniczego odnosnika obydwa elementy w ulamku sekundy zamienia sie
miejscami.
Pelna dynamika i pelna elastycznosc.

Albo inna sytuacja, prostsza. Powiedzmy ze masz dokument, ktory logicznie
sklada sie z czterech skladnikow: A, B, C, D
Teraz, powiedzmy, ze robisz to sobie w starym stylu, na tabelce:

<table width=100%
 <tr<td id="A" colspan=2</td</tr
 <tr<td id="B"</td<td id="C"</td</tr
 <tr<td id="D" colspan=2</td</tr
</table

I masz taką sytuację, ze el. A znajduje sie na gorze, nastepnie pod spodem
jest el. B po lewej, el. C po prawej, a nastepnie el. D na dole. Struktura
logiczna (kodowa) calkowicie pokrywa sie ze strukturą fizyczną wizualną. I
jest to struktura niereformowalna. Tzn. jezeli w jakimkolwiek momencie
zechcesz zmienic forme (layout) tego dokumentu, to musisz zmienic calkowicie
jego strukture logiczną. Czyli w praktyce, musisz budowac wszystko od
początku, musisz skonstruowac zupelnie inną tabelke.

W nowoczesnym layoucie warstwowym, robimy to inaczej.
<style

</style
<body
 <div id="A"<?php?</div
 <div id="B"<?php?</div
 <div id="C"<?php?</div
 <div id="D"<?php?</div
</body

W powyzszej strukturze logicznej, okreslam li tylko w jakiej kolejnosci
browser bedzie pobieral poszczegolne skladniki dokumentu. Nie jest tutaj
zupelnie okreslone w jakiej formie czy kolejnosci bedzie to wyswietlane. Nie
jest powiedziane, ze np. el. B bedzie po el. A i ze bedzie akurat relatywny
w stosunku do niego (chociaz moze tak byc). To, jaka bedzie forma wizualna
dokumentu, okreslam w zewnetrznym arkuszu CSS. A takich arkuszow moge sobie
przygotowac chocby tysiąc. Moge sobie stworzyc tysiac layoutow do jednej
struktury logicznej!!! Moge zmieniac uklad strony tak czesto jak chce. Moge
uzaleznic wyglad strony od pory roku, pory dnia, nocy... moge caly
wielostronicowy serwis ulokowac w jednym szkielecie, jednoczesnie dzielac
serwis na klika grup, dla kazdej grupy przygotowac oddzielny layout.
Moge sobie ten szkielet otwierac na rozne sposoby np:
http://adres/strona.php?A=1&B=1&C=1&D=1&layout=1
http://adres/strona.php?A=1&B=1&C=1&D=1&layout=2
http://adres/strona.php?A=2&B=2&C=2&D=2&layout=1
pierwsze dwa linki to bedzie ta sama strona (ta sama tresc), lecz zupelnie
inna struktura fizyczna, inne polozenie poszczegolnych skladnikow w stosunku
do siebie, inne kolory, backgroundy, obramowania, wlasnosci czcionek... etc,
etc... wszystko co tam mamy w css
trzeci link to bedzie zupelnie inna tresc umieszczona w identycznym layoucie
jak strona pierwsza.

Jesli to tego wszystkiego dodamy mozliwosci dynamicznej zmiany struktury
poprzez jezyki skryptowe, to otrzymujemy narzedzie o jakim wczesniej
moglismy tylko marzyc. No ale dhtml to temat jakby na inna grupe...

Dochodzi jeszcze kwestia optymalizacji ruchu w sieci. Mamy tu do czynienia z
niemal kompletnym oddzieleniem formy od tresci. Jesli ladujemy odmienną
tresc do takiej samej formy, to ciągniemy z sieci tylko tresc. I vice
versa... dynamicznie zmieniajac forme, nie musimy ciągnąc tresci od nowa.

BlaTek
http://blatek.25.pl



Jacek Dębowczyk - 8 Gru 2003, 19:43

Na tym polega nowoczesny layout, ze nie zawsze jest tak jak sie komus
wydaje. Tzn. ze logiczna struktura dokumentu wcale nie musi (choc moze)
pokrywac się z fizyczną strukturą wizualną. Jest rzeczą zupelnie
dopuszczalną, ze np. element B zagniezdzony logicznie (kodowo) w elemencie
A, zostanie wyswietlony w prawym-dolnym rogu ekranu, podczas gdy element A
znajdzie sie jednoczesnie w lewym-gornym rogu, a po kliknieciu np. jakiegos
tajemniczego odnosnika obydwa elementy w ulamku sekundy zamienia sie
miejscami.
Pelna dynamika i pelna elastycznosc.



Dziękuję za odpowiedź. Już od jakiegoś czasu spotykałem się właśnie z
podobnymi opiniami, lecz na ogół były one bardzo mętne i niewyraźne.
Tobie trudno nie przyznać racji.
Spróbuję się jednak przyczepić. Podany przez Ciebie przykład:

W nowoczesnym layoucie warstwowym, robimy to inaczej.
<style

</style
<body
<div id="A"<?php?</div
<div id="B"<?php?</div
<div id="C"<?php?</div
<div id="D"<?php?</div
</body



Niech wszystkie elementy będą umieszczone pod sobą. Chcę, żeby element B był
na środku ekranu (chodzi tylko o wyrównanie poziome), pozostałe wyrównane do
lewej. Bazując na poprzednich odpowiedziach, element B powinien zostać
zagnieżdżony w innymi DIV'ie. Zatem cała ta 'sztywna' konstrukcja musi zostać
zmieniona ! O to właśnie mi chodzi, brakuje mi atrybutu analogicznego do
text-align, który określałby położenie całego elementu wewnątrz nadrzędnego.
Być może bredzę, wówczas przepraszam i proszę o wyprowadzenie z błędu.



Jacek Dębowczyk - 8 Gru 2003, 19:47

12/08/2003 12:37 AM | Jacek Dębowczyk:
| Dzięki za błyskawiczną odpowiedź.
| Niestety, nie do końca o to mi chodziło. Tutaj muszę narzucić jakąś stałą
| szerokość tego div'a.

nie musisz. po to by ten overflow



Czyli, ogólnie mówiąc, które atrybuty sprawiają, że dany DIV dostosowuje
swoją szerokość do zawartości, zamiast przyjmować szerokośc 100% ?
Zauważyłem, że tak się dzieje przy: position:relative oraz left:x%
Czy jest na to jakaś reguła ?
Będę wdzięczny za wskazówki, bardzo chętnie linki.



|<onrad - 9 Gru 2003, 03:22
12/09/2003 01:43 AM | Jacek Dębowczyk:

| W nowoczesnym layoucie warstwowym, robimy to inaczej.
| <style

| </style
| <body
| <div id="A"<?php?</div
| <div id="B"<?php?</div
| <div id="C"<?php?</div
| <div id="D"<?php?</div
| </body

Niech wszystkie elementy będą umieszczone pod sobą. Chcę, żeby element B był
na środku ekranu (chodzi tylko o wyrównanie poziome), pozostałe wyrównane do
lewej. Bazując na poprzednich odpowiedziach, element B powinien zostać
zagnieżdżony w innymi DIV'ie.



nie, wystarczy ze dla #B dasz margin-left i margin-right na 'auto' i
okreslisz jakas mala szerokosc (np 5px, i tak zostanie rozepchany przez
zawartosc)



|<onrad - 9 Gru 2003, 03:25
12/09/2003 01:47 AM | Jacek Dębowczyk:

Czyli, ogólnie mówiąc, które atrybuty sprawiają, że dany DIV dostosowuje
swoją szerokość do zawartości, zamiast przyjmować szerokośc 100% ?



kazdy div domyslnie konczy sie na prawej krawedzi okna przegladarki.
Jego dlugosc mozna okreslac przez takie parametry jak width, max-width,
min-width, przy czym sporo mozna zdzialac dajac dla width wartosc auto i
dodajac inne parametry.

http://www.w3.org/TR/CSS2/visudet.html#the-width-property



Jacek Dębowczyk - 14 Gru 2003, 15:09

12/09/2003 01:43 AM | Jacek Dębowczyk:
| Niech wszystkie elementy będą umieszczone pod sobą. Chcę, żeby element B był
| na środku ekranu (chodzi tylko o wyrównanie poziome), pozostałe wyrównane do
| lewej. Bazując na poprzednich odpowiedziach, element B powinien zostać
| zagnieżdżony w innymi DIV'ie.

nie, wystarczy ze dla #B dasz margin-left i margin-right na 'auto' i
okreslisz jakas mala szerokosc (np 5px, i tak zostanie rozepchany przez
zawartosc)



Sprawdziłem już chyba wszystkie możliwości i poddaję się. W żaden sposób nie
udało mi się wycentrować div'a bez zagnieżdżenia go w innym divie.
Według tego co piszesz, efekt wycentrowania powinienem uzyskać takim kodem:
http://freebsd.hbz.pl/~jumbo/div.html
Nie wiem co jeszcze mógłbym dodać w stylach. Przy ustawieniu konkretnego
width, szerokość nie zostaje 'rozepchana' przez zawartość, a na pewno nie aż
do znacznika '<br'. Próbowałem również usunąć position: absolute, wówczas
div przyjmuje szerokość 100%.
Będę wdzięczny za działający przykład.


Manipulacja atrybutem visibility <div>'a, centrowani e zawartości w Netscape 4.x
(IE) Problem z włączaniem widoczności DIV nad polem select
pozycja tla tudziez glownego DIV'a
Formatowanie strony - tabele kontra div'y
  • szklo hartowane cena producent
  • nowy dzial download
  • dodatki aut do san andreas
  • trelinki betonowe
  • 2222gry do sagema2222
  • kiedy promocja na kuchnie IKEA
  • Wózek Hauck folia przeciwdeszczowa
  • Krem na owal twarzy viszi
  • napoved
  • Archiwum tematów z for dyskusyjnych :: Indeks