[xhtml] div'y obok siebie?? Opcje

[Raven82]

Mam maly problem, chce zbudowac cala stronke na div'ach,

ale JAK DO CH....Y UMIESCIC DWA DIV'y OBOK SIEBIE ???

Mam nastepujacy kod:
[xml:1:5157ac0ae9]
<STYLE>
DIV {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: transparent; display: block; border: none; width: 100%; border: 2px solid #FFFFFF;}

DIV.all {background-image: url("tlo_pens2.jpg"); background-repeat: no-repeat; text-align: center; width: 700px; }

DIV.logo {text-align: center; height: 100px; }

DIV.menu {width: 150px; height: 300px; cursor: default; text-align: left; display: inline; color:#FFFF00; font-size:10pt;}
</STYLE>


<div class="all">
<div class="logo"> Miejsce na logo </div>

<div class="menu">Menu, tez na div'ach </div> <div class="main"; >Tresc</div>

<div>Stopka</div>

</div>
[/xml:1:5157ac0ae9]

Tak mniej wiecej wyglada uproszczony szkielecik stronki, oparte mam wszystko na div'ach i stylach.

Moze czegos nie zauwazylem??

Dopiero zaczynam zabawe z HTML'em i php, a tym bardzeij na div'ach.
Wczesniej wszystro skladalem na tabelach.

[cichy]

Nie wiem czy dobrze myśle bo też dopiero raczkuje w tym temacie.
Ale moze poskutkuje coś takiego: (oczywiście dostosuj sobie)

[xml:1:3b68eb82ff]<STYLE>
DIV {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: transparent;
display: block; border: none; width: 100%; border: 2px solid #FFFFFF;}

DIV.all {background-image: url("tlo_pens2.jpg"); background-repeat: no-repeat;
text-align: center; width: 700px; }

DIV.logo {text-align: center; height: 100px; }
DIV.menu {width: 150px; position:relative; float:left; display: inline; }
DIV.main {width: 150px; position:relative; float:inherit; display: inline; }
</STYLE>


<div class="all">
<div class="logo"> Miejsce na logo </div>
<div class="menu"> Menu, tez na div'ach </div> <div class="main"; > Tresc </div>
<div>Stopka</div>
</div>
[/xml:1:3b68eb82ff]

PS. niektóre częsci styli mogły zostac przez przypadek wy..rzucone..
Generalnie to chodzi chyba o float:left i iherit

Pozdro

[kossa]

znacznik div ma ta wlasciwosc ze lamie linie na koncu tak ze kolejny blok kodu jest w nastepnej lini

aby miec w jednej lini tekst w dwuch znacznikach - do tego sluzy span, ktory nie lamie lini a mozna do niego tak jak do div dodawac wlasne style

Kossa

[Dominik]

aby miec w jednej lini tekst w dwuch znacznikach - do tego sluzy span, ktory nie lamie lini a mozna do niego tak jak do div dodawac wlasne style

Nie, tak nie wolno. Span jest elementem wewnatrzwierszowym wiec jak sama nazw wskazuje moze wystepowac tylko wierszu czyli moze wystepowac w kilku wierszach i nie moze miec wymiarow czyli nie nadaje sie do lajaltow a jedynie do tekstu.

[enceladus]

Ale pokręciliście: w CSS-ie mozemy wyszczegolnic pewne typy elementów definiowane parametrm display, są to:
- block
- inline
- list-item
- none
z kolei tagi htmlowe mają określony domyślny typ i tak np. div to block, span to inline, a to inline itd... ale nic nie stoi na przeszkodzie aby to przedefiniwać:

Kod

div { display: inline; }

span { display: block; }

Rodzaje najlepiej wyrazić rysunkiem:

Kod

--------------------

|##################|

|#####@@@@@@@@@@@@@|

|@@@@@*******&&&&&&|

|&&&&&             |

|                  |

--------------------

Ramka to element blokowy, #,@,*,& - to koleje ciągłe elementy liniowe
Tak jak napisał Dominik nie może mieć wymiarów element liniowy (zawęził jednak tylko do span). Dla elementu blokowego jest to jak najbardziej możliwe.
Aby zobaczyć różnicę warto np. zrobić coś takiego
[xml:1:a223ee0b49]
<div style="border:1px solid #000000; padding: 5px;width: 50px">
<span style="border: 1px solid #FF0000">ssd sad fljfdk fjldf erew rdsfds</span>
<span style="border: 1px solid #00FF00">ssdsad fljf dkfj ldfe rewr dsfds</span>
<span style="border: 1px solid #0000FF">ss dsadf ljfdkfj ldfer ewrd sfds</span>
</div>
[/xml:1:a223ee0b49]
Jeśli zaś chodzi o pytanie tytułowe to wystarczy zrobić coś takiego:

Kod

-----------------------------

|-----------    ------------|

||         |    |          ||

||    div1 |    |  div2    ||

||         |    |          ||

|-----------    ------------|

-----------------------------

[xml:1:a223ee0b49]
<style>
div#div1 { float: left }
div#div2 {float: right }
</style>
<div id="div1">Lewy obszar</div>
<div id="div2">Prawy obszar</div>
[/xml:1:a223ee0b49]

[Dominik]

Ale pokręciliście

Ja nie pokrecilem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

w CSS-ie mozemy wyszczegolnic pewne typy elementów definiowane parametrm display, są to:
- block
- inline
- list-item
- none

No nie do konca, jest jeszcze kilka (juz pomijajac skladniki tabeli) to sa jeszcze rzeczy (na pozor) komplikujace typu inline-block (w CSS 2.1).

z kolei tagi htmlowe mają określony domyślny typ i tak np. div to block, span to inline, a to inline itd...

Dokladnie.

ale nic nie stoi na przeszkodzie aby to przedefiniwać

Troche stoi (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) - logika i notki W3C. Oczywiscie na sile dalo by sie to zrobic ale nie ma to absolutnie sensu, nie po to istnieja dwa znaczniki (span i div) zeby sprowadzac je do identycznych wlasnosci.
Displaty zostal przede wszystkim wprowadzony do XML-a well-formated a nie do (X)HTML-a. Bo jak latwo zauwazyc domyslna wartoscia display jest inline a przeciez div jest jest domyslnie inline tylko block. Widac tu maly zgrzyt.
I jeszcze aspekt "trzezwego myslenia", bo nieoszukujmy sie zmiana displaly ma sens gdy ktos chce zeby strona sie wszytywala dluzej (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) ale chyba nie o to chodzi. (dlugosc znacznika sie powieksza i wczytywanie stylow). Ale wlasciwie nie wiem po co komplikowac sprawe i/lub wglebiac sie w dyskusje filozoficznie dlatego proponuje EOT.

[Raven82]

.
Mam zatem jescze pytanko... ;-)
.
Chodzi mi o plusy i minusy stosowania tabel i div'ow do bydowania struktury strony??
Co jest lepsze, szybciej sie laduje itp. ??
.

Stronka ma wygladac mniej wiecej tak:

Kod

------------------------

|          LOGO          |

------------------------

|          |             |

| MENU     |   TRESC     |

|          |             |

------------------------

|         STOPKA         |

------------------------

Chodzilo mi jak umiescic obok siebie menu i tresc (to mi sie juz udalo),
ale mam kolejny problem, poniewaz w logo i menu maja wspulne tlo.
Tlo w logo widac oki w obu przegladarkach, jednal w menu jedna przegladarka (IE) tlo wyswietla,
a w drugiej (Opera) menu traci tlo na rzecz koloru tla BODY.
.
Co jest nie tak, jakaz roznica w interpretacji?? Czy moze cos innego??
.
Wiem, ze moze moje pytania wydaja sie wam glupie i nie na miejscu,
ale na prawde potrzebuje pomocy, bo robie serwisik dla kogos i przy okazji...
chce sie czegos nauczyc ;-))))
.
Niedlugo pojawia sie kolejne pytania ;-)))
Licze na pomoc ;-)))[/b]

[wassago]

roznica miedzy divami a tabelami jest taka, iz tabele wychodza z uzytku i nie powinno sie ich stosowac - tak bedzie bardziej zgodnie ze specyfikacja xHTML. poza tym przy divach stosujesz mniej kodu co idze z tym ze stronka bedzie sie szybciej ladowala (przy duzych serwisach).

[Kocurro]

wybaczcie, że zrobię mały OT...ale mam pytanie

piszecie, że tabelki wychodzą z użycia...a ja mam taki problem...w mojej stronie tabelki są użyte by dostować jej wielkość do rozmiarów całej dotępnej przestzreni...jest to zrobione tak...z lewej strony komórka o stałej szerokości, z prawej takze, obie mają nowrap...a pomiędzy nimi komórka o szerokosc 100% w któej znajduje się dowolnie rozciagany (bo ma długość 1 px) rysunek...

Mówicie, ze należuy tworzycteraz na ivach - powiem szczerze, że chętnie bym z tego skorzystał, bo jak mam połaczone tabelki z divami to mi czasami mrugnie coś- tylko jak przenieść moje rozwiazanie na divy (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

z góry dzięki za pomoc

[Raven82]

.
.
.
A gdzie mozna znalezc cos wiecej i dokladniej o div'ach,

bo wszystko zo znalazlem do tej pory to tylko bardzo ogolne info ???
.
PS. Najlepiej PL
.
.
.

[Seth]

http://php.pl/viewtopic.php?t=9084&highlight=div
http://php.pl/viewtopic.php?t=8812&highlight=div

[Citral]

coś nie chodzą te linki

[Kocurro]

przed php.pl daj forum czyli

forum.php.pl

i będzie działać..

[dooshek]

.
.
.
A gdzie mozna znalezc cos wiecej i dokladniej o div'ach,

bo wszystko zo znalazlem do tej pory to tylko bardzo ogolne info (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) ?
.
PS. Najlepiej PL
.
.
.

Po polsku moze byc ciezko ale po angielsku z przykladami to prosze bardzo:

http://www.bluerobot.com/web/layouts/
http://www.glish.com/css/
http://www.positioniseverything.net/

Polecam rowniez poguglanie np. "div positioning" "div layout" itp.