Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xHTML] div, tlo, table, width?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Pucy
22.09.2006, 13:08:41
Dlaczego <td style="width:666px;"> nie dziala tak samo jak <td width="666"> smile.gif ?

Mam taki kod:

[HTML] pobierz, plaintext 
  1. <table cellspacing="0" cellpadding="0" style="width:100%;height:400px;border:1px solid black;" >
  2. <tr>
  3. <td style="background-color:red;">&nbsp;</td>
  4. <td style="background-color:blue;width:56px;"></td>
  5. <td width="970px">CENTER</td>
  6. <td style="background-color:green;width:58px;"></td>
  7. <td style="background-color:black;">&nbsp;</td>
  8. </tr>
  9. </table>
[HTML] pobierz, plaintext


Dlaczego znow mi spedza to sen z powiek, ze musze meczyc sie by osiagnac ten sam rezultat w standardach xhtml? Dlaczego CSS jest dlam nie czyms bez regul i zasad (lol)?;/ Widzac jak niektorzy proboje pomóc innym w cssie to pisza: "sproboj to, moze zadziala" i nie sa pewni tego co robia... czy to nie powinno byc jak matma? 2+2 ? Jak napisze <div style="width:666px"> to cyz nie powinno to jednoznacznie sie zachowac?

Jak osiagnac taki sam rezultat jak zamieszczonym kodzie html? Chodzi oto by zewnetrze czesci sie ruszaly , a wycentrowana byla stalaa i nic nie moglo jej zburzyc. <td> pomiedzy srodkowym i calkowicie zewnetrznym tez maja swoja stala szerokosc...

[HTML] pobierz, plaintext 
  1. <style type="text/css" title="currentStyle" media="screen">
  2.  
  3. #main {
  4.  
  5. border:1px solid black;
  6.  
  7. width:100%;
  8. margin:0;
  9. padding:0;
  10. overflow:hidden;
  11.  
  12. }
  13.  
  14. #main .center {
  15.  
  16. border:1px solid black;
  17. float:left;
  18. width:970px;
  19. height:400px;
  20. }
  21.  
  22. #main .left {
  23.  
  24. border:1px solid black;
  25. float:left;
  26. padding-bottom:24001px;
  27. margin-bottom:-24000px;
  28. overflow:hidden;
  29.  
  30. }
  31.  
  32. #main .right {
  33. border:1px solid black;
  34. float:left;
  35. padding-right:1001px;
  36. margin-right:-1000px;
  37. padding-bottom:24001px;
  38. margin-bottom:-24000px;
  39.  
  40. }
  41. </style>
  42.  
  43. <body style="padding:0;margin:0;">
  44.  
  45. <div id="main">
  46.  
  47. <div class="left">LEFT</div>
  48. <div class="center">CENTER</div>
  49. <div class="right">RIGHT</div>
  50.  
  51. </div>
  52.  
  53. </body>
[HTML] pobierz, plaintext


Zdaje sboie sprawe ze nie znam cssa, ale ile szukam tyle znajduje i nic co mogloby mi pomoc... Kto mnie przekona? Kto mnie nakieruje? BEde wdzieczny!
revyag
22.09.2006, 13:25:48
Cytat
Dlaczego <td style="width:666px;"> nie dziala tak samo jak <td width="666px">

Jeśli width podajesz jako atrybut html to nie używasz jednostek. Piszesz tak:
[HTML] pobierz, plaintext 
  1. <td width="666">
[HTML] pobierz, plaintext

Te dwa przykłady, w drugim przypadku nie masz użytego css.

Cytat
Dlaczego znow mi spedza to sen z powiek, ze musze meczyc sie by osiagnac ten sam rezultat w standardach xhtml? Dlaczego CSS jest dlam nie czyms bez regul i zasad (lol)?;/

Wybacz, ale pieklisz się o coś czego nie potrafisz używać.
Cytat
Widzac jak niektorzy proboje pomóc innym w cssie to pisza: "sproboj to, moze zadziala" i nie sa pewni tego co robia... czy to nie powinno byc jak matma? 2+2 ?

Najpierw poznaj zasady css i naucz się je stosować, to będziesz odróżniał się od tych innych.

Cytat
Jak napisze <div style="width:666px"> to cyz nie powinno to jednoznacznie sie zachowac?

Jednoznacznie, czyli jak ? Podaj przykład.
Pucy
22.09.2006, 13:37:06
Nie chodzi o przyklad, chodzi o zasade i tu zle napisalem bo nie <div style="width:666px"> tylko np: <td style="width:666px"> dla mnie oznaczalo by ze bedzie mialo szerokosc 666 i zadnej innej. A jezeli chodzi o samego CSSa to zasady staram sie poznac, ale zawsze jak prosze o pomoc i sie troche "przypiekle" to i tak nikt nie jest w stanie wystawic wlasnej argumentacji a tym bardziej mi pomoc? Czy nie mialo byc taniej, prosciej i elastyczniej?
gekon
22.09.2006, 14:57:04
Po pierwsze nie może sie tak zachowywać, bo przeglądarki mają swój domyślny akursz CSS (w każdej prawie taki sam, choc są niewielkie róznice) i nie jest to wina CSSa czy XHTMLa a przeglądarek. Po drugie Box Model. Po trzecie QuirksMode. Po czwarte:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>CSS Example</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  7. </head>
  8. <body>
  9.  
  10. <div id="main">
  11.  
  12. <div id="left">LEFT</div>
  13. <div id="center">CENTER</div>
  14. <div id="right">RIGHT</div>
  15.  
  16. </div>
  17.  
  18. </body>
  19. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #main { width: 900px; height: 400px; margin: 0 auto; }
  2. #left, #center, #right { float: left; height: 100%; margin: 0; padding: 0; }
  3. #center { width: 500px; background-color: red; }
  4. #left, #right { width: 200px; background-color: green; }
[HTML] pobierz, plaintext
Pucy
22.09.2006, 15:19:29
gekon, ok fajnie, ale to nie rozwiazuje mojego problemu, ja mam problem z tymi roznymi trickami jak ujemne marginesy itd... chodzi mi oto zeby lewo i prawo zmienialo szerokosc tak jak <td> w tabeli w zaleznosci od wielkosci okna przegladarki (rozdzielczosci) tutaj jest totalny static, do tego potrafie jeszcze dojsc... znam BOX model , ale nie mowi mi to nic na temat stalych szerokosci i zmieniajacych sie szerokosci
revyag
22.09.2006, 15:29:20
Przejrzyj tą stronę:
http://www.positioniseverything.net/
Pucy
22.09.2006, 15:40:02 
[HTML] pobierz, plaintext 
  1. <div id="main">
  2.  
  3. <div id="left">LEFT</div>
  4. <div id="center">CENTER</div>
  5. <div id="right">RIGHT</div>
  6.  
  7. </div>
[HTML] pobierz, plaintext



Czy moge stworzyc zrobic tak by jako ze blok obejmujący jest tworzony przez najbliższy blok, bedacy przodkiem , czyli szerokosc #right odniesie sie do bloku tworzonego przez #main, a czy moge #center zrobic przodkiem #right zeby byl okreslony tez przez niego?

Ogolnie chodzi mi oto zeby blok obejmujacy okreslony byl przez przodka i element stojacy obok (bedacy bratem) wtedy dajac width:100% rozciagnalbym w zaleznosci od wielkosci okna chociaz prawa czesc...
gekon
22.09.2006, 15:54:47
To nie wystarczy dac % zamiast px, trzeba aż ujemne marginesy?
Pucy
22.09.2006, 15:57:57
wlasnie, dajac procent wywali mi nizej, gdyz blok #right odniesie sie do bloku oplywajacego #main, wiec 100% zrobi szerokosc diva o id="#right" taka sama jak ma #main... a nie oto chodzi, #center ma byc stale a #right ma sie zmieniac po jego prawej stronie
gekon
22.09.2006, 16:05:34
A takie coś pomaga Ci?

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="left">LEFT</div>
  4. <div id="center">CENTER</div>
  5. <div id="right">RIGHT</div>
  6.  
  7. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body { padding: 0 50px; }
  2. #left, #center, #right { float: left; height: 100%; margin: 0; padding: 0; }
  3. #center { width: 50%; min-width: 300px; background-color: red; }
  4. #left, #right { width: 25%; background-color: green; }
[HTML] pobierz, plaintext


Ewentualnie jeżeli nie przeszkadza Ci, że prawa kolumna spadnie na dół (jeżeli okno będzie za małe), to możesz dać dla #center width w px i usunąć min-width.
Pucy
22.09.2006, 16:13:07
gekon nie zbawia mnie to:( ooglnie chce zrobic box strony w srodku jest ciagle staly div o konretnej szerokosci w ktorej jest content strony, po lewej i prawej sa divy ktore zmieniaja sie od 100% width do min-width, gdzie jest background-image bedacy tlem calej strony, i jeszcze bardziej na zewnatrz sa divy ktore rozszerzaja sie do 100% do 0%ogolnie chodzi o przystosowanie tla do rozdzielczosci, spojrz sobie na moj pierwszy kod z tabelmi. Chce identyczny rezultat

I gdyby nie to ze <td width="970"> nie jest w standardzie to bym przystal do rozwiazania z tablea, ale style="width:970px;" nie trzyma konkretnej wielkosci <td>... zmienia ja...

Moze powinienm liczyc procentowe okreslenie szerokosci w zaleznosci od szerokosci przeglardki? ( ale to mi sie mija z celem, gdyz jak cytuje wszystkie dyskusje ZA Cssem : "za jego pomoca sie ustala strukture strony i mozna zrobic wszystko", to dlaczego milbym ingerowac jakims zewnetrznym skryptem?;/ )

Cytat
Ewentualnie jeżeli nie przeszkadza Ci, że prawa kolumna spadnie na dół (jeżeli okno będzie za małe), to możesz dać dla #center width w px i usunąć min-width.


No wlasnie stala szerokosc center jest mi potrzebna, a spadanie diva jest niedozwolone, % okreslenie szerokosci odpada gdyz nie wiem ile % bedize mialy divy jezeli szerokosc centera bedzie 970px pod roznymi rozdzielczosciami, dlatego postawilem na marigny na minusie, co po czesci pozwolilo mi zblizyc sie do celu... ale to nie to:(
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.