Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Szerkosc środkowego diva
Forum PHP.pl > Forum > Przedszkole
po
Mam problem ze środkowym divem:

  1. <div id="content">
  2. <div class="top_navl">&nbsp;</div>
  3.  
  4. <div class="top_navc"><ul class="left">
  5. text text text text text text text text text
  6. </div>
  7. <div class="top_navr">&nbsp;</div>
  8.  
  9. </div>
  10.  
  11.  
  12.  
  13. #content {
  14. width: 100%;
  15. margin: 0 auto;
  16. text-align: center;
  17. border: 1px solid #CCC;
  18. min-width:790px;
  19. max-width:1100px;
  20. display: block;
  21. }
  22.  
  23. div#content{width:expression(document.body.clientWidth < 770? "768px" : document.body.clientWidth > 1110? "1100px" : "auto");}
  24.  
  25.  
  26. .top_navl {
  27. background: url('images/ms_01.gif') top left no-repeat black;
  28. width:16px;
  29. height:40px;
  30. display: block;
  31. border: 1px solid #ccc;
  32. float: left;
  33. }
  34.  
  35. .top_navr {
  36. background: url('images/ms_06.gif') top left no-repeat black;
  37. width:16px;
  38. height:40px;
  39. border: 1px solid #ccc;
  40. float: left;
  41. }
  42.  
  43.  
  44. .top_navc {
  45. background: url('images/ms_02.gif') left top repeat-x blue;
  46. color: #fff;
  47. font: 11px tahoma, arial, sans-serif;
  48. vertical-align: top;
  49. text-align: left;
  50. border: 1px solid #ccc;
  51. float: left;
  52. height: 40px;
  53. min-width: 768px;
  54. width: 100%;
  55. }


Problem polega na tym że jak ustawie dla top_navc szerkosc w procentach, boczne divy wywala na dół.
Chcę żeby topnavc był szeroki na całą szerokość strony

Mam jeszcze pytanie dotyczace rozdzielczości. Jak wiadomo funkcjonuje max - min width, tyle ze IE nie czyta tego. W jaki inny sposób mogę ustawić szerokość strony pod konkretną rozdzielkę ekranu?
barthpl
No tak to jest już divami. Jak środkowemu ustawisz szerokość na 100% to nie będziesz miał miejsca na pozostałe i dlatego przechodzą one do osobnych linii. Ustawiając divy musisz wszystko wyliczyć w pikselach (albo procentach) - tak aby na wszystkie divy było miejsce w nadrzędnym obiekcie.

Wydaje mi się że tak jak masz to zrobione to za pomocą samego CSS'a się nie uda. Moim zdaniem powinieneś albo zdecydować się na jedną szerokość i ewentualnie ją zmieniać korzystając z JS i funkcji onLoad().
po
No to jest chore.

Super div-y. Myślałem to zrobić inaczej w content dać background 02, a boczne dać jako obrazki w divie i może wtedy będzie okey. A jak nie uda się to na tabele się przeniose lub poczekam na html 5.0
ferrero2
Cytat

Super div-y. Myślałem to zrobić inaczej w content dać background 02, a boczne dać jako obrazki w divie i może wtedy będzie okey. A jak nie uda się to na tabele się przeniose lub poczekam na html 5.0



OMG smile.gif

Tabele służą do wyświetlania danych tabelarycznych (ile razy i w ilu miejscach było to już cytowane).

W odpowiedzi na Twoje pytania :

ad1:

Jeśli używasz procentów w divach wewnątrz kontenera to i sam kontener musi mieć wielkość w procentach. Masz dwie możliwości ułożenia strony albo dajesz kontenerowi width 100% (pamiętając o zależnościach że width to jest szerokość części tekstowej a nie diva, na szerokość składa się jeszcze margin, border i padding które należy wyzerować jeśli się z nich nie korzysta) albo body,html dajesz na 100% i następnie np na 95 % ustawiasz diva kontener. Następnie wszystko trzeba dokładnie przeliczyć i krok po kroku dodawać kolejne divy. Najlepszy sposób to wstawić sobie dwa pierwsze i każdemu nadać inny background abyś widział ile rzeczywiście dany div zajmuje.

ad2:

Dostosowanie strony do konkretnej rozdzielczości ekranu zazwyczaj wykonuje się przy szablonach stałych określanych w pixelach nie w procentach. Dla przykładu jeśli przyjmiesz że minimalna rozdzielczość ekranu przy której nie ma się pojawiać poziomy scroll to 1024/768 to ustawiasz szerokość na 1003 (dostosowując do 3-ech przeglądarek OPERA ff i IE). Można samemu sobie sprawdzić kiedy dokładnie pojawi się pasek przewijania w danej przeglądarce, wystarczy zmniejszać z rozdzielczości wyjściowej o 1px i podpatrywać efekt.
Na płynnych szablonach jeśli będziesz chciał dostosowywać pod różne rozdzielczości ekranu to trzeba zainteresować się takim czymś jak skalowanie grafik. Pamiętaj że czcionka 12px będzie inaczej wyglądała dla użytkownika przy różnych rozdzielczościach ekranu. Ewentualnie pomyśleć nad dwoma plikami CSS i poprzez JS za pomocą funkcji pobierzesz rozdzielczość od użytkownika i podmienisz plik style_1260.css na style_1024.css.

Moim skromnym zdaniem stałe szablony dają dużo ładniejsze efekty.

PS

jak poczekasz na html 5.0 to IE i tak coś zpier... w tej kwestii smile.gif

Pozdrawiam
Mariusz
JoShiMa
Cytat(po @ 19.08.2008, 12:39:41 ) *
Problem polega na tym że jak ustawie dla top_navc szerkosc w procentach, boczne divy wywala na dół.
Chcę żeby topnavc był szeroki na całą szerokość strony

Skoro div top_navc ma być na całą szerokość strony to po co Ci dwa dodatkowe divy po bokach? Wyjaśnij co chcesz uzyskać a wtedy napiszemy ci jak zgodnie ze standardami (bez użycia tabelek) należy to zrobić.
po
Po bokach mam mieć zaokrąglone rogi. Dlatego tak chcę ustawić.

No tak już to słyszałem że tabele służą do czego innego, tzn to w wersji xhtml.
JoShiMa
Jeśli koniecznie chcesz mieć zaokrąglone rogi załatw to jednym divem na całą szerokość strony znajdującym się nad top_navc, albo dwoma diwami po bokach, ale wtedy top_navc nie może mieć 100%, tylko wszystkie trzy w sumie muszą mieć 100%.



PS:

Możesz również załatwić to wszystko w samym top_navc

dajesz w stylach:
  1. .top_navr {
  2. background: url(image-url.gif) no-repeat #ffffff;
  3. padding: 10px;
  4. width:16px;
  5. height:40px;
  6. border: 1px solid #ccc;
  7. float: left;
  8. }


image-url.gif jest wąskim paskiem tła z zaokrąglonymi rogami a zamiast #ffffff wpisujesz kolor pasujący do tła obrazka. Padding (w moim przykładzie 10px) powinien byc taki, jak szerokość zaokrąglenia.
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.