Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Zmienna szerokosc diva
Forum PHP.pl > Forum > Przedszkole
kkuubbaa88
powiedzmy ze mam dwa divy na formie obok siebie:

  1. <div class="div_1"></div>
  2. <div class="div_2"></div>


a style ich sa nastepujace:

  1. .div_1 {
  2. margin:0px;
  3. max-width:690px;
  4. min-width:500px;
  5. float:left;
  6. background-color:#fff000;
  7.  
  8. }
  9.  
  10. .div_2 {
  11. margin:0px 0px 0px 15px;
  12. float:right;
  13. width:493px;
  14. height:100px;
  15. background-color:#ff0000;
  16. }


problem polega na tym, ze jak zmieniam wielkosc okna to pierwszy div zamiast zmieniac swoja szerokosc to pozostaje bez zmian, natomiast drugi div owszem trzyma sie prawej strony, ale wskakuje pod diva pierwszega i rusza sie pod nim... dlaczego ? co mam zle, ze ten pierwszy div nie chce zmieniac swojej pierwotnej szerokosci, a drugi by zostawał na swoim miejscu ?
Gryf
hmm a nie kazałeś mu zawsze mieć daną szerokość
Kod
width:493px;
kkuubbaa88
tak ten po prawej czyli div_2 ma miec stala szerokosc, a pierwszy div czyli div_1 ma sie zmieniac...
erix
IMHO floatem tego nie zrobisz.

Ja bym proponował coś takiego:
  1. <div id="parent"><div id="content"></div><div id="col"></div></div>

Kod
parent: position relative
content: margines prawy o szerokości kolumny
col: position absolute i przyklejasz do prawej strony
kkuubbaa88
cos nie za bardzo chce dzialac... po dodaniu "position absolute" prawy div przelecial na lewa strone i za nic nie chce sie stamtąd ruszyc...
erix
Pozycja dla parent też jest ważna. [;
kkuubbaa88
rowniez byla ustawiona, a mimo to div_2 jest przy lewym marginesie, a div_1 nadal nie zmienia szerokosci... czemu tak sie dzieje ?
erix
Pokaż, co ustawiłeś.
kkuubbaa88
calosc wyglada w ten sposob:

  1. <div style="margin:0px 10px 0px 10px;">
  2.  
  3. <div style="float:left;margin:0px;height:1000px;background-color:#f0ff00;">
  4.  
  5. <div class="margin:0px 0px 0px 0px;float:left;max-width:690px;min-width:500px;background-color:#fff000;">
  6.  
  7. kashdkajhaksdjh dskjhsd kjlash askdjhaskjashasdk jlash askjl sh fakjsl ha fkjlash asdjk hasdkjh asdkjadhaksjd hadskj hkjasdhadkj hdkj ahdskl ajdsh adksj hasdkj hadsj khf jkadsh adskjhkjsdh akdsjhadsk jasdhasdkj hsd kjdsh dsk jhdskj sdh asdkjl hdaskj adsh adkjfha kjasdhfdskjh asdkj hasdkj adhskj hjkds hdskj hdskjlhsdksjadh dskj hdasjk h
  8.  
  9. </div>
  10.  
  11. </div>
  12.  
  13. <div style="float:right;margin:0px;height:1000px;background-color:#00fff0;">
  14.  
  15. <div style="margin:0px 0px 0px 0px;float:left;width:493px;height:100px;background-color:#ff0000;">
  16.  
  17.  
  18. </div>
  19.  
  20. </div>
  21.  
  22. </div>


ale ciagle nie hula...
seth-kk
class w 3cim divie?
prosciej bedzie tak:
  1. <div id="div2" style="padding-left: 492px; overflow: hidden;">
  2. <div id="div1" style="float: left; margin-left: -492px; _margin-left: -246px;">lewy div ze stala szerokoscia</div>
  3. to co po prawej ze zmienna szerokoscia
  4. </div>
nitek
Prosty, działający przykład:

Kod
<html>
<head>
<style>
#menu {
  position: absolute;
  width: 200px;
  right: 20px;
  background-color: #f5f5f5;
}
#content {
  margin-right: 200px;
  background-color: #888888;
  overflow: auto;
}
</style>
</head>

<body>
<div id="menu">
Lorem ipsum
</div>

<div id="content">
Lorem ipsum 2
</div>


</body>
</html>


Inspiracje w takich sytuacjach polecam czerpać np. stąd: http://www.smashingmagazine.com/2007/01/12...-and-templates/ trochę własnego wysiłku i masz to o co ci chodziło.. smile.gif
seth-kk
@nitek: moze i prosty ale dziala tylko w okreslonych sytuacjach winksmiley.jpg
nitek
Cytat(seth-kk @ 29.06.2009, 23:52:28 ) *
@nitek: moze i prosty ale dziala tylko w okreslonych sytuacjach winksmiley.jpg


Ok, ale dlaczego? IE + FF dobrze dają sobie radę, Chrome i Safari też nie powinny mieć problemu (akurat nie mam pod ręką).
Jeśli gdzieś to nie działa, chętnie poszerzę swoją wiedzę ;]
seth-kk
obiekty z position absolute nie rozpychaja sie wiec ciezko cos obok nich umiescic (choc to zalezy od sytuacji)
nie okresliles position dla obiektu nadrzednego dla tego z position absolute - dopuki jest nim body mozna tego niezaowazyc ale w pozostalych przypadkach polozenie obiektu moze byc inne niz oczekiwane
ps. zakladam ze w doctype jest xhtml;)
kkuubbaa88
dzieki, ale te odpowiedzi nie bardzo sa mi w stanie pomoc. Probowalem to podpiac do mojego projektu, ale niestety nie bardzo sie da. Na stronie musze miec taki uklad div'ow i musze sobie z tym poradzic. Dla pomocy zamieszczam obraz, ktory przedstawia problem:



dlatego podalem taki kod wczesniej, a ten class to byl blad przy kopiowaniu. Jak teraz widac musze zrobic, aby to wlasnie lewa kolumna byla z automatyczna szerokosscia. Dla przypomnienia moj kod z przykladowymi kolumnami i po jedyn divie w srodku wyglada tak:

  1. <div style="margin:0px 10px 0px 10px;">
  2.  
  3. <div style="float:left;margin:0px;height:1000px;background-color:#f0ff00;">
  4.  
  5. <div style="margin:0px 0px 0px 0px;float:left;max-width:690px;min-width:500px;background-color:#fff000;">
  6.  
  7. kashdkajhaksdjh dskjhsd kjlash askdjhaskjashasdk jlash askjl sh fakjsl ha fkjlash asdjk hasdkjh asdkjadhaksjd hadskj hkjasdhadkj hdkj ahdskl ajdsh adksj hasdkj hadsj khf jkadsh adskjhkjsdh akdsjhadsk jasdhasdkj hsd kjdsh dsk jhdskj sdh asdkjl hdaskj adsh adkjfha kjasdhfdskjh asdkj hasdkj adhskj hjkds hdskj hdskjlhsdksjadh dskj hdasjk h
  8.  
  9. </div>
  10.  
  11. </div>
  12.  
  13. <div style="float:right;margin:0px;height:1000px;background-color:#00fff0;">
  14.  
  15. <div style="margin:0px 0px 0px 0px;float:left;width:493px;height:100px;background-color:#ff0000;">
  16.  
  17.  
  18. </div>
  19.  
  20. </div>
  21.  
  22. </div>


Efekt jaki chcialbym uzyskac widac na stronie wykop.pl, tam dokladnie lewa czesc div'ow sie zmienia a prawa jest bez zmian.

pozdrawiam i dzieki za pomoc

moze mi ktos pomoc ?
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.