Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> width:100%-200px;, jak to poustawiać?
radvanced
post
Post #1





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 16.08.2010

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

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ł
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
elektrrrus
post
Post #2





Grupa: Zarejestrowani
Postów: 175
Pomógł: 18
Dołączył: 11.06.2007
Skąd: Koszalin/Poznań

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

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.

Ten post edytował elektrrrus 13.03.2011, 19:51:42
Go to the top of the page
+Quote Post
radvanced
post
Post #3





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 16.08.2010

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

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?
Go to the top of the page
+Quote Post
krzywy36
post
Post #4





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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


Ten post edytował krzywy36 13.03.2011, 22:11:51
Go to the top of the page
+Quote Post
Pawel_W
post
Post #5





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

wystarczy ustawić display: block i nie musisz z width: 100% kombinować...
Go to the top of the page
+Quote Post
krzywy36
post
Post #6





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

inne rozwiązanie, jednego diva mniej (IMG:style_emoticons/default/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

Ten post edytował krzywy36 14.03.2011, 08:46:25
Go to the top of the page
+Quote Post
radvanced
post
Post #7





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 16.08.2010

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

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.

Ten post edytował radvanced 14.03.2011, 18:40:14
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 22.08.2025 - 17:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn