Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 2 div'y kolo siebie?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
eS...
20.12.2004, 17:20:27
witam, zamieniam wlasnie tabelki na div'y ale nie moge juz z nimi smile.gif
czy ktos moze mi powiedziec jak to zamienic??
[HTML] pobierz, plaintext 
  1. <tr>
  2. <td>1</td><td>2</td>
  3. </tr>
[HTML] pobierz, plaintext

na div'y??
dzieki
edit
wziołem z posta wczesniej coś takiego
[HTML] pobierz, plaintext 
  1. <div id="w1">Lorem ipsum</div>
  2. <div id="w2">dolor sit amet</div>
  3. <div id="w3">consectetur adipisicing elit</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. #w1,#w2,#w3{
  2.    width:100px;
  3.    background-color:red;
  4.    display:inline;
  5. }
  6. #w2,#w3{
  7.    background-color:green;
  8.    margin-left:5px;
  9. }
  10. #w3{
  11.    background-color:blue;
  12. }
[HTML] pobierz, plaintext

ale dalej nie dziala divy nie sa kiło siebie tylko pod sobą sad.gif
EDIT
ok udało sie smile.gif
teraz powiedzcie czy to dzieki dilplay:inlinequestionmark.gif
eS...
20.12.2004, 19:40:33
dzieki zaraz to sprawdze jak cos nie wyjdzie napewno bede pisal smile.gif

a co do display to masz racje pod firefoxem kicha a pod IE działa smile.gif
EDIT
no to niewiele powalczyłem sad.gif
wkleje html i css a potem napisze co nie gra

[HTML] pobierz, plaintext 
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <title>TEST XHTML ^ DIV</title>
  6. <link rel="stylesheet" type="text/css" href="css.css" />
  7. </head>
  8. <body>
  9. <div id="center">
  10. <div id="top">
  11. lalala
  12. </div>
  13. <div id="logo">
  14. logo :)
  15. </div>
  16. <div id="menu">
  17. menu 1 menu 2 menu 3 mwnu 4 lalal sranie w banie tratatatatatatatata
  18. </div>
  19. </div>
  20. <div id="w1">
  21. a dfgsdfkl ewj dweoijd oisajdoi jwqd jsaoidj oqoqoq
  22. a dfgsdfkl ewj dweoijd oisajdoi jwqd jsaoidj oqoqoq
  23. a 
  24. </div>
  25. <div id="w3">
  26.  jwqd jsaoidj oqoqoq
  27. a dfgsdfkl ewj dweoijd oisajdoi jwqd jsaoidj oqoqoq
  28. a dfgsdfkl ewj dweoijd oisajdoi jwqd jsaoidj oqoqoq
  29. a dfgsdfkl ewj dweoijd oisajdoi jwqd jsaoidj o
  30. </div>
  31. </body>
  32. </html>
[HTML] pobierz, plaintext

teraz css
[HTML] pobierz, plaintext 
  1. body{
  2. margin-top:0px;
  3. font-family:Verdana, arial, Helvetica, sans-serif;
  4. font-size:11px;
  5. }
  6.  
  7. #center{
  8. text-align:center;
  9. vertical-align:top;
  10. font-family:Verdana, arial, Helvetica, sans-serif;
  11. font-size:11px;
  12. }
  13. #top{
  14. text-align:right;
  15. width:800px;
  16. height:17px;
  17. border:1px solid gray;
  18. padding:2px;
  19. font-family:Verdana, arial, Helvetica, sans-serif;
  20. font-size:11px;
  21. }
  22. #logo{
  23. text-align:left;
  24. width:800px;
  25. height:150px;
  26. border-left:1px solid gray;
  27. border-right:1px solid gray;
  28. padding:2px;
  29. font-family:Verdana, arial, Helvetica, sans-serif;
  30. font-size:11px;
  31. }
  32. #menu{
  33. height:17px;
  34. text-align:left;
  35. width:800px;
  36. padding:2px;
  37. border:1px solid gray;
  38. font-family:Verdana, arial, Helvetica, sans-serif;
  39. font-size:11px;
  40. }
  41. #w1,#w3{
  42. border-left:1px solid gray;
  43. float:left;
  44. padding:2px;
  45. }
[HTML] pobierz, plaintext


top i menu wyświetla sie elegancko, po srodku okna przegladarki na długość 800px. Niestety gdy pod spodem chce dodać te 2 div'y obok siebie z float:left *lub right) wszystko sie rozjezdza sad.gif

Probowalem to wszystko wlozyc w <div id="center">{tutaj reszta diwów}</div> właśnie w tym celu żeby wszystko było po śrdku okna przeglądarki, niestety efekt jaki chciałem uzyskac, czyli 2 div'y koło siebie nie wychodzi. Owszem są obok siebie ale nie maja długości 800px ani nie sa wyśrodkowane w oknie przegladarki.

Jeśli ktoś jest w stanie (a raczej zna lepiej CSS) prosze o pomoc smile.gif
eS...
21.12.2004, 14:56:18
ok thx, tylko znowy mam problem bo cala strona ma byc wysrodkowana (<center></center>) a nie jest jest z lewej strony
Liko
21.12.2004, 16:14:55
Cytat(eS... @ 2004-12-21 14:56:18)
ok thx, tylko znowy mam problem bo cala strona ma byc wysrodkowana (<center></center>) a nie jest jest z lewej strony

To chyba źle masz link do pliku css. Bo mi pod FF i pod IE dobrze wyświetla czyli wyśrodkowane. Sprawdź nazwę pliku css.
eS...
21.12.2004, 16:53:16
niestety ani prolog ani link do css'a sad.gif chyba zostane przy html'u biggrin.gif

chociaz pod firefoxem wszystko jest ok, tylko ten IE nawala sad.gif
Liko
21.12.2004, 17:59:23
Cytat(eS... @ 2004-12-21 16:53:16)
niestety ani prolog ani link do css'a sad.gif chyba zostane przy html'u biggrin.gif

chociaz pod firefoxem wszystko jest ok, tylko ten IE nawala sad.gif

Zamień w pliku CSS ten kawałek: 
[HTML] pobierz, plaintext 
  1. body{
  2. margin: 0;
  3. padding: 0;
  4. font-family:Verdana, arial, Helvetica, sans-serif;
  5. font-size:11px;
  6. }
  7. #center{
  8. border: 1px solid gray;
  9. margin: 0 auto;
  10. width: 800px;
  11. border-width:1px;
  12. }
[HTML] pobierz, plaintext


Na taki:
[HTML] pobierz, plaintext 
  1. body{
  2. margin: 0;
  3. padding: 0;
  4. font-family:Verdana, arial, Helvetica, sans-serif;
  5. font-size:11px;
  6. text-align: center;
  7. }
  8. #center{
  9. border: 1px solid gray;
  10. margin: 0 auto;
  11. width: 800px;
  12. border-width:1px;
  13. text-align: left;
  14. }
[HTML] pobierz, plaintext
eS...
21.12.2004, 21:12:31
dzięki, jeżeli coś napotkam nie zrozumiałego to dam znać
jeszcze raz dzięki aarambo.gif
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.