Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: width:100%-200px;
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
radvanced
13.03.2011, 19:35:07
Mam taka zagadkę.
chcę na dole strony dać dwa elementy:
- jeden z zafixowanymi wymiarami, powiedzmy 200x200px, w lewym dolnym rogu.
- drugi obok, ma sie zaczynac od pierwszego elementu i dochodzic do konca strony bez względu na rozmiar okna.

cos w rodzaju width:100%-200px.

da sie? czy sie nie da sie?
oto jest pytanie.

Dzieki z góry
michał
elektrrrus
13.03.2011, 19:50:27
Da się, ale raczej tylko z ustalaniem wymiarów w js. Trzeba tam pobrać rozmiar okna, odjać te 200px i wstawić szerokość do bloku.

Chyba że tak mi przyszło do głowy, oba bloki float, drugi width 100%, a całośc zamknieta w innym ktory miałby width 100% i overflow hidden. Może zadziałać, ale ma ograniczone zastosowanie.
radvanced
13.03.2011, 21:02:03
Dzięki za odpowiedź

sposób z JS znam.
chciałem to zrobic czystym css

najblizsze prawdy było
<div id="zewnetrzny">
<div id="wewnetrzny"></div>
</div>

#zewnetrzny{
width:100%;
padding-left:200px;
}
#wewnetrzny{
width:100%
}

ale ta metoda wywalała mi kawałek wewnetrznego diva za prawą krawedz okna.

kombinuje z procentami i min-width ale to nie daje super rezultatów.

Wracając do JSa. Jest jeszcze sens przejmować się uzytkownikami mającymi wyłączoną obsługę JavaScriptu?
krzywy36
13.03.2011, 22:07:59
jest.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>adsad</title>
  4. <style>
  5. #pierwszy
  6. {
  7. 	width: 200px;
  8.     height: 200px;
  9.     position: fixed;
  10.     bottom: 0;
  11.     left: 0;
  12.     background-color: #ccc;
  13. }
  14. #container
  15. {
  16. 	padding-left: 200px;
  17. }
  18. #drugi
  19. {
  20. 	background-color: #aaa;
  21.     width: 100%;
  22.     height: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="container">
  28. <div id="pierwszy"></div>
  29. <div id="drugi"></div>
  30. </div>
  31. </body>
  32. </html>
[HTML] pobierz, plaintext
Pawel_W
13.03.2011, 22:46:47
wystarczy ustawić display: block i nie musisz z width: 100% kombinować...
krzywy36
14.03.2011, 08:44:14
inne rozwiązanie, jednego diva mniej wink.gif:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>adsad</title>
  4. <style>
  5. #pierwszy
  6. {
  7. 	width: 200px;
  8.     height: 200px;
  9.     position: fixed;
  10.     bottom: 0;
  11.     left: 0;
  12.     background-color: #ccc;
  13. }
  14. #drugi
  15. {
  16. 	background-color: #aaa;
  17.     height: 100%;
  18.     margin-left: 200px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="pierwszy"></div>
  24. <div id="drugi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem dui, laoreet sit amet gravida et, iaculis et dolor. Nullam felis felis, aliquet eget pharetra id, sollicitudin non tortor. Nullam sit amet ligula non enim ultricies commodo. Donec ultrices neque eu justo volutpat ultrices. Cras at tortor lectus. Vestibulum pulvinar sagittis faucibus. Nullam semper lobortis dapibus. Aliquam id augue nisl, et varius lectus. Morbi non orci sed enim gravida cursus vel sed lorem. Donec felis ante, ultrices vehicula ultrices eget, imperdiet vel massa. Nulla sit amet mi mi, nec aliquam metus. In tempor rhoncus justo, pellentesque rhoncus sapien euismod a. Mauris odio tortor, fermentum sed iaculis ac, mollis ut tortor.</div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


@Pawel_W: divy mają domyślnie display block
radvanced
14.03.2011, 18:27:01
jestem pod wrażeniem!
cały wieczór nad tym wczoraj przesiedziałem.

Dzięki Panowie!

----- trochę później----

Testuję powyższego CSSa (drugi przykład).
i odkryłem ze jest w nim mała sztuczka. - kontener #drugi jest wypełniony textem co powoduje rozciągnięcie go do krawędzi okna
jeśli w paragrafie będzie krótki text to #drugi nie bedzie miał odpowiedniej szerokości.

Kombinuję, czy da się zrobić tak, aby #drugi bez wzgledu na zawartosc miał szerokosc od 200px z lewej az do konca strony?

----- jeszcze później----

udało sie:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>adsad</title>
  4. <style>
  5. #pierwszy
  6. {
  7. 	width: 200px;
  8.     height: 200px;
  9.     position: fixed;
  10.     bottom: 0;
  11.     left: 0;
  12.     background-color: #ccc;
  13. }
  14. #container
  15. {
  16. 	padding-left: 200px;
  17. }
  18. #drugi
  19. {
  20. position:fixed;
  21. 	background-color: #aaa;
  22. 	  bottom: 0px;
  23.     width: 100%;
  24.     height: 200px;
  25.  
  26. }
  27.  
  28. </style>
  29. </head>
  30. <body>
  31. <div id="container">
  32.    <div id="pierwszy"></div>
  33.    <div id="drugi"></div>
  34. </div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


Dziękuję Krzywemu36 za rozwiązanie.
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.