[HTML]Rozszerzanie się komórki po wpływem treści Opcje

[simonX]

Tak jak na górze zawsze mam z tym problem, mam taki układ strony i tylko komórka w miejscu tekst ma się rozszerzać natomiast menu ma pozostać nie tknięte, ma ktoś jakiś pomysł?

[qrzysztof]

Nie bardzo wiadomo o co chodzi. Komórka TREŚĆ ma ograniczone wymiary (na rysunku nie ma) i ma się rozszerzać (w którą stronę). MENU ma zostać nienaruszone, TOP domyślam się też. Troszkę jaśniej jeśli można.

[simonX]

No tak, ponieważ strona oparta jest o tabelke, wieć chcę żeby tylko swoje rozmiary zmieniała tylko ta jedna komórka, właściwie to zeby się dopasowywała do ilości treści na stronie.

[qrzysztof]

Najlepiej zrób to na divach. Tabelki nie są do tego celu. Przy divach ustawisz tylko odpowiednie overflow i będzie hulać.

[bemol]

popieram qrzysztof, zrób na divach, ale jeśli już koniecznie chcesz mieć tabelki to podziel menu na dwie komórki, tresci ustaw

[HTML] pobierz, plaintext 
rowspan="2"
[HTML] pobierz, plaintext 

i tę komórkę, która będzie pod menu daj nie widoczną. (empty-cells: hide;)

[simonX]

Tez próbowałem ale o to chodzi ze jak tne laya w PS-ie i mi dla kazdego diva ustawia pozycjonowanie absolutne i jest lipa, według swojej rozdzielczosci zrobie dobrze ale dla kogos kto ma inna rozdzielczosc monitora bedzie sie zle strona wyświtlała.

[bemol]

to zmień absolutne i juz.
menu i tresc daj

Kod

display:inline;
float:left; //dla menu
float:right; //dla tresci

i problem z głowy

[simonX]

;/ troche dziwnie chyba tak powinno być jak już coś?

[CSS] pobierz, plaintext 
 
#menu{
display:inline;
float:left;
 
}
 
#tresc{
display:inline;
float:right;
 
}
 
 
[CSS] pobierz, plaintext 

[mortus]

Napisz, czy strona ma stałą szerokość i czy ma być wyśrodkowana, czy niekoniecznie? Dobrze by było gdybyś również pokazał layout.

[simonX]

Lay jest w rozdzielczości 950X1000 i chcę właśnie żeby była zawsze wyśrodkowana.

[mortus]

No to co za problem:

[HTML] pobierz, plaintext 
<div id="top" style="margin: 0 auto; width: 950px; height: 50px; overflow: hidden; border: 1px solid #ccc;">LOGO ITP.</div>
<div id="page" style="margin: 0 auto; width: 950px; min-height: 950px; overflow: hidden;">
     <div id="menu" style="width: 250px; height: 100%; border: 1px solid #666; float: left;">MENU</div>
     <div id="content" style="width: 695px; height: 100%; border: 1px solid #666; float: right;">TREŚĆ</div>
     <div style="clear: both;"></div>
</div>
[HTML] pobierz, plaintext 

Pocięty layout możesz wstawić jako background dla div-ów. Oczywiście wysokości topu, menu i treści musisz sobie dopasować do Twojego layoutu. No i osobiście umieściłbym style w pliku css.

[grassmen]

Na tabelkach:

[HTML] pobierz, plaintext 
<table border="1" width="950" height="1000">
<tr><td>TOP</td><tr>
<tr><td>
<table border="1">
<tr><td valign="top">MENU</td>
<td>tresc</td>
</tr></table>
</td></tr>
</table>
[HTML] pobierz, plaintext 

Ten post edytował grassmen 24.02.2010, 13:58:50

[simonX]

No to co za problem:[HTML] pobierz, plaintext

1. <div id="top" style="margin: 0 auto; width: 950px; height: 50px; overflow: hidden; border: 1px solid #ccc;">LOGO ITP.</div>
2. <div id="page" style="margin: 0 auto; width: 950px; min-height: 950px; overflow: hidden;">
3. <div id="menu" style="width: 250px; height: 100%; border: 1px solid #666; float: left;">MENU</div>
4. <div id="content" style="width: 695px; height: 100%; border: 1px solid #666; float: right;">TREŚĆ</div>
5. <div style="clear: both;"></div>
6. </div>

[HTML] pobierz, plaintext
Pocięty layout możesz wstawić jako background dla div-ów. Oczywiście wysokości topu, menu i treści musisz sobie dopasować do Twojego layoutu. No i osobiście umieściłbym style w pliku css.

Myslę że twój pomysł jest niezły, tylko mam problem mam kilka elementów w poziomie pociętych chce zeby 4 divy byly obok siebie stosuje atrybut float, ale jakoś nie działa możesz mi sprawdzić

[CSS] pobierz, plaintext 
<div id="top" style="margin: 0 auto; width: 950px; height: 230px; overflow: hidden;  border: 1px solid black;">top </div>
<div id="page" style="margin: 0 auto;width: 950px; height: 770; overflow:hidden; border: 1px solid black;">
<div id="menu_top" style="margin-left: 0px auto; width: 950px; height: 44px; overflow: hidden;border: 1px solid black; "></div>
<div id="menu_top" style="margin-left: 0px auto; width: 950px; height: 17px; overflow: hidden;border: 1px solid red; ">asd</div>
<div id="menu_top" style="width: 148px; height: 170px;float: left;border: 1px solid red;">lewa
<div id="menu_top" style="float: right;width: 222px; height: 170px;border: 1px solid red; ">srodkowa komorka</div>
<div id="menu_top" style="float: right;width: 222px; height: 170px;border: 1px solid red; ">prawa komorka</div>
 
</div>
 
 
 
</div>
 
[CSS] pobierz, plaintext 

[mortus]

Przede wszystkim nie możesz mieć pięciu div-ów z takim samym parametrem id, bowiem parametr id to nic innego jak unikalny identyfikator elementu (tagu) html. Nazwij je zatem inaczej i sprecyzuj, które elementy (po id) mają być obok siebie. A najlepiej zaznacz na layoucie linie cięcia, wrzuć obraz na jakiś serwer i zaprezentuj tutaj.

Ten post edytował mortus 24.02.2010, 17:55:38

[simonX]

Tak wiem ze id jest unikalny tutaj po prostu tak na chypcika robiłem, udało mi się zrobić ale i tak mam problem trzy bloki są obok siebie ale 4 już nie

[CSS] pobierz, plaintext 
<div id="index2-01">top </div>
<div id="page" style="margin: 0 auto;width: 950px; height: 770; overflow:hidden; border: 1px solid black;">
<div id="menu_top" style="margin-left: 0px auto; width: 950px; height: 44px; overflow: hidden;border: 1px solid black; "></div>
<div id="menu_top" style="margin-left: 0px auto; width: 950px; height: 17px;overflow: hidden; border: 1px solid red; ">asd</div>
<div id="wysiwtlanie" style="width: 950px; height: 170px;overflow:hidden;border: 1px solid red;">
<div id="1" style="float: left;width: 148px; height: 170px;border: 1px solid blue; ">1</div>
<div id="2" style="float: left;width: 222px; height: 170px;border: 1px solid blue; ">2</div>
<div id="3" style="float: left;width: 431px; height: 170px;border: 1px solid blue; ">3</div>
<div id="4" style="float: left;width: 148px; height: 170px;border: 1px solid blue; ">4</div>
 
</div>
</div>
 
 
[CSS] pobierz, plaintext 

[mortus]

Prosta matematyka. Policzmy szerokość: 148px + 222px + 431px + 148px = 949px, ale do tego mamy jeszcze 4*2px z obramowania, czyli w sumie 957px. Bloki są za szerokie i dlatego ostatni spada niżej. Dlatego od razu musisz sobie odpowiedzieć na pytanie, czy div-y będą miały obramowania, czy też nie. Dopiero wtedy będziesz mógł wszystko ustawić tak, jak trzeba. Ważną rzeczą jest również umieszczenie

[HTML] pobierz, plaintext 
<div style="clear: both;"></div>
[HTML] pobierz, plaintext 

po wszystkich elementach, które mają w stylu ustawiony float. Taki kod zabezpieczy Cię przed opływaniem treści pod tymi czterema divami, w przeciwnym przypadku to co będzie niżej może nachodzić na te cztery div-y.
EDIT:
Warto się też zastanowić, czy layoutu nie można pociąć inaczej, i czy potrzeba tylu div-ów.

Ten post edytował mortus 24.02.2010, 18:36:12

[simonX]

Wszystko udało mi się zrobić tylko mam jeden problem zrobiłem jednego diva wewnątrz którego umieściłem jeszcze dwa jednego na menu drugiego na treść i ustawiłem kolor dla tego nadrzędnego czyli ten sam kolor będzie dla tych dwóch wewnętrznych tylko jest taki problem że pod FF nie działa ;/ ale w edytorze czy IE a nawet w operze wszystko jest OK nie co jest źle może ktoś wpadnie.

[HTML] pobierz, plaintext 
<div id="cialo" style="width:949;height:auto;background-color:#41566b;">
<div id="index-09">MENU</div>
<div id="index-09">TRESC</div>
</div>
 
 
 
 
[HTML] pobierz, plaintext 

Ten post edytował simonX 25.02.2010, 14:35:13

[mortus]

Akurat ten fragment działa w FF.

Pokaż cały kod!

Ten post edytował mortus 25.02.2010, 14:42:46

[simonX]

nie no nie działa mają być bloki obok siebie a nie pod spodem tak jak mi wcześniej podawałeś :|

[mortus]

Jeśli bloki mają być obok siebie, to trzeba zrobić dwie rzeczy:

[HTML] pobierz, plaintext 
<div id="cialo" style="width:949;height:auto;background-color:#41566b;">
     <div id="index-09" style="float: left; width: xxxpx;">MENU</div>
     <div id="index-10" style="float: left; width: xxxpx;>TRESC</div>
     <div style="clear: both;"></div>
</div>
[HTML] pobierz, plaintext 

Div-y muszą mieć określoną szerokość zależną od układu całej strony. Najlepiej wklej cały kod!