Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Tabela w CSS, problem z odzieleniem kodu tabeli od reszty html
d4nny
post 1.07.2009, 19:31:32
Post #1





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

Witam, mam taki kod tabeli w css:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div>Tabela
  3. 		<div>
  4. 			<div>Jeden</div>
  5. 			<div>Dwa</div>
  6. 		</div>
  7. 		<div>
  8. 			<div>Trzy</div>
  9. 			<div>Cztery</div>
  10. 		</div>
  11.           </div>
  12. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div
  2. {
  3. 	border-style: solid;
  4. 	border-color: red
  5. }
  6. body > div
  7. {
  8. 	display: table;
  9. 	border-style: solid;
  10. 	border-color: blue
  11. }
  12. body > div > div
  13. {
  14. 	display: table-row
  15. }
  16. body > div > div > div
  17. {
  18. 	display: table-cell
  19. }
[HTML] pobierz, plaintext



Jak odzielic kod tabelki aby reszta divow na stronie nie dziedziczyla wygladu ustalonego w css dla tabeli?

Ten post edytował d4nny 1.07.2009, 19:32:58
Go to the top of the page
+Quote Post
bobo168
post 1.07.2009, 19:49:33
Post #2





Grupa: Zarejestrowani
Postów: 201
Pomógł: 9
Dołączył: 23.08.2006

Ostrzeżenie: (0%)
-----

Nadać im id bądź classe.
Go to the top of the page
+Quote Post
sadistic_son
post 1.07.2009, 19:57:39
Post #3





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="tabela">Tabela
  3. <div>
  4. <div id="jeden">Jeden</div>
  5. <div id="dwa">Dwa</div>
  6. </div>
  7. <div>
  8. <div id="trzy">Trzy</div>
  9. <div id="cztery">Cztery</div>
  10. </div>
  11. </div>
  12. </body>
[HTML] pobierz, plaintext



to co ma sie tyczyc w css tylko do tabeli:
[HTML] pobierz, plaintext 
  1. #tabela{
  2. xxxxxx
  3. }
[HTML] pobierz, plaintext


albo klase:
<div class="tabela">
w ccsie:
.tabela{
xxx
}

Ten post edytował sadistic_son 1.07.2009, 20:00:06


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
d4nny
post 2.07.2009, 09:08:20
Post #4





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

na tyle żeby utworzyć klasy lub nadać nazwy warstwom jestem zorientowany, problem w tym, że to nie dziala

dokladnie spójrzcie na kod css...np. to

[HTML] pobierz, plaintext 
  1. body > div > div > div
  2. {
  3. 	display: table-cell
  4. }
[HTML] pobierz, plaintext


jak tu zastosowac to o czym mowicie?

nikt nie pomoże?

Ten post edytował d4nny 1.07.2009, 20:08:25
Go to the top of the page
+Quote Post
osl
post 2.07.2009, 09:25:29
Post #5





Grupa: Zarejestrowani
Postów: 260
Pomógł: 41
Dołączył: 6.04.2009
Skąd: Gdańsk/okolice

Ostrzeżenie: (0%)
-----

może napisz co i jak nie działa? a najlepiej wrzuć kod na jakiś serwer...
[HTML] pobierz, plaintext 
  1. body > div > div > div
[HTML] pobierz, plaintext

takie rzeczy wykluczają użytkowników IE6, który nie obsługuje takich selektorów, a tych użytkowników jeszcze troche jest niestety...

utwórz klasy, tak jak przedmówcy radzili, np. div.table-row, div.table-cell i dodaj tam odpowiednie wartości z css-a. Nawet jak odziedziczą cokolwiek możesz to przecież nadpisać.
I jeszcze jedno - Firebug Twoim przyjacielem winksmiley.jpg
Go to the top of the page
+Quote Post
d4nny
post 2.07.2009, 10:48:13
Post #6





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

problem rozwiązałem, lecz szcerze mówiąć wasze porady nie przydały mi się a zwłaszcza te pierwsze...

kod HTML

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="tabcss">Tabela
  4. <div id="tabcss">
  5. <div id="tabcss">Jeden</div>
  6. <div id="tabcss">Dwa</div>
  7. </div>
  8. <div id="tabcss">
  9. <div id="tabcss">Trzy</div>
  10. <div id="tabcss">Cztery</div>
  11. </div>
  12. </div>
[HTML] pobierz, plaintext


kod CSS

[HTML] pobierz, plaintext 
  1. #tabcss
  2. {
  3. 	border: 1px solid #999999;
  4. 	padding: 10px;
  5. }
  6. body > #tabcss
  7. {
  8. 	display: table;
  9. 	border: 1px solid #333333;
  10. }
  11. body > #tabcss > #tabcss
  12. {
  13. 	display: table-row;
  14. }
  15. body > #tabcss > #tabcss > #tabcss
  16. {
  17. 	display: table-cell;
  18. 	margin-left: 5px;
  19. }
  20.  
  21. </body>
[HTML] pobierz, plaintext


chodziło o to ze kazda warstwa musiala miec te samą nazwę, bo w htmlu są one zagniezdzone, wstawiam kod po to aby ktos kto bedzie mial podobny problem skorzystal z tego, dzieki wszystkim za chec pomocy

a tak to wyglada online http://finaldesign.pl/tabcss/tabela.html

Ten post edytował d4nny 2.07.2009, 10:50:00
Go to the top of the page
+Quote Post
webber
post 2.07.2009, 11:09:45
Post #7





Grupa: Zarejestrowani
Postów: 107
Pomógł: 19
Dołączył: 30.10.2007

Ostrzeżenie: (0%)
-----

A potrzebne to było? Nie lepiej było użyć normalnej tabeli skoro to dane tabelaryczne jak mniemam tam będą? smile.gif


--------------------
"CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way."
Go to the top of the page
+Quote Post
osl
post 2.07.2009, 11:17:03
Post #8





Grupa: Zarejestrowani
Postów: 260
Pomógł: 41
Dołączył: 6.04.2009
Skąd: Gdańsk/okolice

Ostrzeżenie: (0%)
-----

brawo, nadałeś 7-miu divom takie samo id, a to niewiele ma wspólnego z poprawnym rozwiązaniem...
dokładnie to samo można osiągnąć przez stosowanie klas a nie id...
Go to the top of the page
+Quote Post
d4nny
post 2.07.2009, 12:43:38
Post #9





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

proszę bardzo mądralo - zrob to na roznych klasach lub roznych divach, będę wdzięczny.
Go to the top of the page
+Quote Post
viking
post 2.07.2009, 12:49:11
Post #10





Grupa: Zarejestrowani
Postów: 6 378
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

A kiedy wreszcie zrozumiesz że masz tabelę? Już ci to webber próbował uzmysłowić. Pierwszy z brzegu przykład z sieci:

[HTML] pobierz, plaintext 
  1. <table>
  2. 	<thead>
  3. 		<tr>
  4. 			<th>header1</th>
  5. 			<th>header2</th>
  6. 		</tr>
  7. 	</thead>
  8. 	<tfoot>
  9. 		<tr>
  10. 			<th>footer1</th>
  11. 			<th>footer2</th>
  12. 		</tr>
  13. 	</tfoot>
  14. 	<tbody>
  15. 		<tr>
  16. 			<th>data1</th>
  17. 			<th>data2</th>
  18. 		</tr>
  19. 	</tbody>
  20. </table>
[HTML] pobierz, plaintext

Opcjonalnie <caption>.

I przeczytaj jakiś kurs np http://kurs.browsehappy.pl jeśli to nie przerasta twoich możliwości.

PS. Jaka postawa taka odpowiedź.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
osl
post 2.07.2009, 12:56:14
Post #11





Grupa: Zarejestrowani
Postów: 260
Pomógł: 41
Dołączył: 6.04.2009
Skąd: Gdańsk/okolice

Ostrzeżenie: (0%)
-----

ależ jesteś przekonany o tym, że jesteś nieomylny. prosze Cię bardzo, dosłownie 3 minuty roboty z zegarkiem w ręku, specjalnie dla Ciebie.
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.  div
  5. {
  6. border: 1px solid #999999;
  7. padding: 10px;
  8. }
  9. .table
  10. {
  11. display: table;
  12. border: 1px solid #333333;
  13. }
  14. .table .table-row
  15. {
  16. display: table-row;
  17. }
  18. .table .table-row .table-cell
  19. {
  20. display: table-cell;
  21. margin-left: 5px;
  22. }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="table">Tabela
  27.             <div class="table-row">
  28.                 <div class="table-cell">Jeden</div>
  29.                 <div class="table-cell">Dwa</div>
  30.             </div>
  31.             <div class="table-row">
  32.                 <div class="table-cell">Trzy</div>
  33.                 <div class="table-cell">Cztery</div>
  34.             </div>
  35.         </div>
  36.     </body>
  37. </html>
[HTML] pobierz, plaintext


a na przyszłość, przynajmniej udawaj uprzejmość i staraj się przyjąć do wiadomości, że ktoś inny może mieć racje.

Ten post edytował osl 2.07.2009, 12:58:20
Go to the top of the page
+Quote Post
d4nny
post 2.07.2009, 16:02:30
Post #12





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

viking

Nie musisz demonstrować tego iż nie umiesz czytać ze zrozumieniem... to pokazuje tylko jak bardzo jesteś ograniczony. Prosiłem o rozwiązanie problemu z tabelką w CSS a nie o to jak wstawić dane żeby było najszybciej i najprosciej.


osl

przecież inne warstwy znajdujące się na stronie odziedziczą to
[HTML] pobierz, plaintext 
  1. div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext


jak nie z tego układu co jest teraz to z tego, że zamierzam oddzielać CSS od HTML, czyli kod znajdzie się w pliku *.css wraz z resztą kodu CSS.
Go to the top of the page
+Quote Post
Crozin
post 2.07.2009, 17:01:30
Post #13





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----

@d4nny: a mógłbyś napisać co jest w ogóle Twoim celem? Bo kod jest kompletnie bez sensu.
Go to the top of the page
+Quote Post
d4nny
post 2.07.2009, 17:55:23
Post #14





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

Moim celem jest tabelka zbudowana na CSS przy czym kod CSS tabelki nie może kolidować z pozostałym kodem CSS a raczej kod CSS tabelki nie moze wplywac na wyglad pozostalych warst lub klas na stronie, i tylko tyle.

ps. czyj kod jest bez sensu? ze moj jest niepoprawny to wiem...

Ten post edytował d4nny 2.07.2009, 17:55:56
Go to the top of the page
+Quote Post
Crozin
post 2.07.2009, 19:50:27
Post #15





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Nie o to mi chodziło - chodziło mi o to co ten kod (html) będzie miał reprezentować? Czy jest to układ strony, dane tabelaryczne czy coś innego?

A co do pierwotnego pytania: elementowi, który jest kontener dla pozostałych (tutaj ten z display: table) nadajesz identyfikator. Potem w regułach CSS odnosisz się poprzez: #identyfikator [reszta reguł jak jest]
Go to the top of the page
+Quote Post
d4nny
post 5.07.2009, 12:36:59
Post #16





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
-----

tabela to ma być treść podstrony, w środku tekst ale nie tylko

[HTML] pobierz, plaintext 
  1. div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext


ten kod będzie nadawał wygląd każdemu DIVowi na stronie... czy nie tak ? chodzi mi o to aby zbudować tabele tak aby kod CSS odnosił sie tylko i wyłącznie do tej tabeli

no i co taka cisza?

zaśmieciliście temat banalnymi i nieprzydatnymi rozwiązaniami, niektórzy nawet durni z siebie zrobili a ja nadal nie mam tego o co prosiłem..
Go to the top of the page
+Quote Post
Sky_walker
post 5.07.2009, 12:50:37
Post #17





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. .tabela div
  2. {
  3. border: 1px solid #999999;
  4. padding: 10px;
  5. }
[HTML] pobierz, plaintext

^ tylko divy w tabeli.

Edit: Tak na marginesie, piszesz "Moim celem jest tabelka zbudowana na CSS" - to jest absurdalny pomysł. To tak jakby przerabiać <span> na <div> albo <strong> na <em> w CSSie. Czegoś takiego sie nie robi. Do tabel są tabele, tak jak do pogrubień sa strongi/boldy.

Ten post edytował Sky_walker 5.07.2009, 12:53:13


--------------------
Pomogłem? Kliknij poniżej.
Dzięki! :D
Go to the top of the page
+Quote Post
d4nny
post 5.07.2009, 12:59:44
Post #18





Grupa: Zarejestrowani
Postów: 49
Pomógł: 0
Dołączył: 31.12.2007

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. .table div
[HTML] pobierz, plaintext


no i o to chodzilo, jest świetnie teraz, mniej kodu HTML niż w przypadku tradycyjnej tabelki, łatwiej zmieniać wygląd i jest więcej możliwości
Go to the top of the page
+Quote Post
Sky_walker
post 12.07.2009, 16:53:57
Post #19





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
-----

Kodu jest nieporównywalnie więcej niż w tradycyjnej tabeli (tam masz tylko td i tr, a tu divy, definicje klas i ich długie nazwy), wygląd zmieniać jest jeszcze trudniej (musisz pamiętać o odpowiednim display dla każdego elementu - w zwykłej tabelce masz to z głowy), a możliwości masz tyle samo co zawsze... strasznie naciągane to robienie tabelek z divów winksmiley.jpg


--------------------
Pomogłem? Kliknij poniżej.
Dzięki! :D
Go to the top of the page
+Quote Post
Hazel
post 12.07.2009, 19:52:38
Post #20





Grupa: Zarejestrowani
Postów: 492
Pomógł: 33
Dołączył: 16.08.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Co poradzisz, takie są trendy.


--------------------
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.07.2025 - 20:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn