Templatka DIV czy table - standardy

[Subey]

Czytalem wiele o DIV ale chcialbym sięgnąć opini kogos kto ma templatke calkowicie zrobiona DIV'ami. Jak to jest ze standardami? Dobrze wyswietla wam sie w różnych przegladarkach?? Czy lepiej łaczyc jest CSS z <table><td> itp. Probojac podjąć sie budowy templatki na DIV musze powiedziec że poległem. Mimo wielu artów przeczytanych templatka na DIV'ach zachowuje sie w nieprzewidywany sposób. Zauważylem ze i ta wiele templatek jest zrobiona po staremu, tak łatwiej. Oczywiscie DIVy pozwalaja znacznie skrócic kod.

Zeby nie bylo ze nie wiem jak zrobić 3 kolumny na DIVach załaczam szkic layoutu ktory chce stworzyc na DIVach.

POwiedzcie mi czy warto meczyć sie dalej z zrobieniem temple na DIV czy wrocic do robienia na table itp.

http://www.magia.boo.pl/Layout.gif

[Viking]

nieprzewidywalność jest raczej funkcją braku wiedzy
standardy (niektóre) wykluczają używanie strukturalnych tabel z kilku prostych powodów które zostały wielokrotnie opisane (liosc danych za kazdym razem transmitowanych z serwera, SEO - wtym odległość głównej treści od początku dokumentu, dostepność, łatwość - więc i koszt - aktualizacji, etc.)

nie potrzebujesz miec tych wąskich divów, wystarczy ze główną treść zamnkiesz w lewy_waski i prawy_waski ;)

<div id="lewy_waski"><div id="prawy_waski">
<div id="tresc">
treść...
</div>
</div></div>

styl CSS:

body
{text-align:center}/* ie uzywa tego do centrowania pozostałe przeglądarki rozumieją automatyczną dlugosc marginesow */

#lewy_waski
{
padding:0 0 0 [szerokość grafiki];
margin:auto 0;
width:760px
background:[color] url(../images/[grafika_lewa]) left top repeat-y;
}

#prawy_waski
{
padding:0 [szerokość grafiki] 0 0;
margin:0; text-align:justify;
background:[color] url(../images/[grafika_prawa]) right top repeat-y;
}
#tresc
{
width:[760-szerokość grafiki(lewa+prawa)]px;
}

....

[/css]

[Subey]

Zrobilem tak jak radziles, teraz mam problem z prawa strona. A dokladniej między "prawym paskiem" a logiem, prawą kolumna i stopka mam przestrzen ok 20px jak domyslam sie cos nie tak z marginesami i nie moge wyłapać.

CSS jest w źrodle stronki pod adresem: http://www.magia.boo.pl/css/moje.html

I nie wiem czy dobrze zrobilem wrzucjac "srodek" i "prawą kolumne" do jednego DIVa a "lewa kolumne" oddzielnie?



<div id="lewy_pasek"><div id="prawy_pasek">

<div id="zawartosc">
<div id="logo">LOGO</div>
<div id="pasek_pod_logo">PPL</div>
<div id="lewa_kolumna">LC</div>
<div id="srode_prawa">
<div id="srodek">
<div id="pasek_miejsca">PM</div>
</div>
<div id="prawa_kolumna">PC</div>
</div>

<div id="stopka">STOPKA</div>


</div>
</div>
</div>


Będe wdzieczny za pokierowywanie do celu ;]

[Viking]

przede wszystkim polecam nie spinać się na strict i używać tansitional tym bardziej że trudno będzie samego Joomla validować w strict
następnie polecam uważnie pisać.. gdzieś tam masz deficyt średnika ;)
na koniec ...nie chciałbym żeby skończyło się tym, że template napisałbym za Ciebie ;D więc basta (znaczy kropka)

[Viking]

no dobra...
zamiast tych paddingów daj margines wewnętrznemu elementowi,
i zamień sobie margin:auto 0; na margin:0 auto; - moja pomyłka ;]

[Subey]

No mniej wiecej juz sie orientuje, wstawilem juz layout do joomli no i wporzadku ale gdy wchodze na pozycje w menu "Joomla Magazyn" (standardowy uklad po instalacji joomli")

To tekst wyjezdza poza DIVa "srodek":
Screen: http://www.magia.boo.pl/css/Image2.jpg

[Viking]

patrz 2 posty wyżej ;p

coś masz nie tak z układem zawartości "środka" zobacz sobie swój "layout" to "PW" jest gdzieś w dziwnym miejscu a powinno wypełniać całość przeznaczonej przestrzeni i zaczynać sie z lewej

nie mam niestety czasu analizować tego co jak i gdzie wyfloatowałeś... na pomoc.joomla.pl jest chyba jeszcze art. Zwiastuna o układzie...

generalnie jak będziesz próbował to ogarnąć to wiedz, że obowiązującym podejściem do układu jest "content first" ze względu na SEO i pamietaj, że content Joomla! jest jak narazie serwowany w tabelach co może przysporzyć problemów i wymagac tricków. moduly można okiełznać częściowo dając im parametr -3 i kombinując z własnościami "overflow" i "width"

tyle dobrego i powodzenia - warto się nauczyć projektować na divach ;) bo coraz blizej dzien gdy bedzie to warunek konieczny. Jak juz nabierzesz bieglosci w CSS odezwij sie na PW to podpowiem gdzie warto jeszcze spojrzec - bo siec jest wielka :)

[Subey]

Poprawilem "srodek" layout mam w porzadku, ale w templatce nie jest juz tak prosto. Pozostaje jednak dalej problem.... gdy wchodze na pozycje w menu "Joomla Magazyn" (standardowy uklad po instalacji joomli")

To tekst wyjezdza poza DIVa "srodek":

LINK do templatki
http://www.magia.boo.pl/joomla/index.php?option=com_content&task=blogsection&id=0&Itemid=9

Tutaj jest CSS i HTML taki sam kod jak wstawiony do templatki
http://www.magia.boo.pl/css/moje.html


Powoli zapal do robienia templatki DIVami mija ;/

[grzenio]

www.impreza.net.pl - masz mojego skina na divach 0- jesli xchcesz moge ci go udostepnic tylko ze on jest na 2 kolumny i nie sa one dynamiczne

[zwiastun]

Szablon na 2 kolumny oparty na divach jest dostępny także w naszej plikowni. I oczywiście dynamiczny

[Subey]

Te "Joomla! - Magazyn (http://www.magia.boo.pl/joomla/index.php?option=com_content&task=blogsection&id=0&Itemid=9)" jest naprawde oprone nawet w templatce " rhuk_solarflare_ii (http://www.magia.boo.pl/joomla/administrator/index2.php?option=com_templates&client=#info)" wyjedza poza wyznaczony obszar ;/ A templatka zbudowany z <table> itd.

Mozna jeszcze raz poprosic o podpowiedz?? :) Ja zazwyczaj lubie sie uczyc na analizujac rożne źródla ale niestety dla <DIV> to sa to raczej przyklady statycznych layoutow ;/

[Viking]

nie widzę żeby było coś nie tak...?