[css] pozycjonowanie

Tworze/usuwam sobie dynamicznie selecty wykozystujac js i mam taki oto problem: jak ustawic przycisk submit aby byl z prawej strony selectow, Ponizej kod kawalek kodu html

...
 <form name="form" id="form" method="POST" action="test.php">
      <div id="sdiv" name="sdiv" style="width: 400px;">
      <!-- tu wstawiane sa dynamicznie selecty jeden obok drugiego-->
      </div>
<!-- submit wstawiany jest zawsze ponizej:( -->
	    <input type="submit" value="szukaj" id="szukaj">
   </form>
...

Wydaje mi sie ze najprosciej zrobic to za pomoca styli ale nie wychodzi mi to. Ostatecznie myslalem ze zrobie tak , iz przy kazdym dodaniu/usunieciu selecta bede tworzyl inputa ale to ostatecznosc.

zakończenie div-a powoduje przejście do nowej lini więc wychodziłoby na to iż musisz je postawić za <input... /> albo zabawić się w pozycjonowanie ale przewaznie dziwnie to wychodzi :P

dodaj do styli DIVa cos takiego float: left;

Probowalem wlasnie tego float:left i nawet dziala to ale czy bylo by mozliwe zrobienie czegos takiego ze przycisk szukaj by sie przesuwal w raz z iloscia selectow, tzn zeby byl w stalej odleglosc od ostatniego selecta niezaleznie ile ich jest (docelowo moze byc ich mysle ze do 5..) ? bo w tym rozwiazaniu mam ustawiona stala szerokosc div'a i float:left ustawia przycisk na koncu diva (od 400 px ), natomiast umieszczajac przycisk w divie jest on zawsze pierwszym elementem od lewej a chce zeby byl ostatnim elementem i zmieniam pozycje (przesuwal sie w lewo/prawo w zaleznoci od ilosci selectow). Wiem ze jest metoda w js insertBefore ale dziala ona z tego co jest napisane w w3cschools tylko w ie(niech go ....).

nie do konca rozumiem o co Ci chodzi ale moze wywal width: 400px; z diva... ??

Wlasnie mi o to chodzilo. Wielkie dzieki wszystkim

ps. glupota nie boli..:)

ssnake napisał(a)

dodaj do styli DIVa cos takiego float: left;
oki, a co z FireFoxem?? Bo chcialem tez zrobic cos takiego, ale FF sobie niezbyt poradzil ze stronka, bo DIV ktory w IE jest po prawej stronie (tak jak powinno byc) pokazywany jest POD nim, czyli tak jak jest standardowo :-/

desperat mozesz przykład podać ?

ssnake napisał(a)

desperat mozesz przykład podać ?
Na przyklad cos takiego:

<div style="width:600px; background-color:#dddddd;">
  <div style="width:100px; background-color:#eeeeee; float:left;">w jendej linii</div>
  <div style="width:150px; background-color:#eeeeff;">i tej samej</div>
  <div style="width:250px; background-color:#ffeeee;">A to juz inaczej</div>
</div>

"Troszke" inaczej wyglada pod IE i pod FF [???]

w ten sposob sa w jednej lini i wyswietlone tak samo na operze ie i ff

to ja jeszcze dodam 3 grosze, mozna tak:

<style>
.float { float: left; padding: 5px; } 
.clear { clear: both; }
</style>
poczatek
<div class="clear"></div>
<div class="float" style="background: red">tekst</div>
<div class="float" style="background: green">tekst<br />tekst<br />tekst</div>
<div class="float" style="background: blue">tekst<br />tekst</div>
<div class="clear"></div>
koniec

Fakt - BOX Model jest zupełnie inaczej rozumiany w tych przeglądarkach, dlatego wydaje mi się, że bardziej adekwatnym rozwiązaniem tutaj byłaby po prostu tabela z trzema komórkami w jednej linii.

P.S.
Jestem zwolennikiem budowanie stron na DIVach, ale bez przesady - tabela nie jest niczym złym...

ale na DIVa możesz później wygodniej zmienić np. układ strony, wystarczy lekko zmodyfikowac plik ze stylami a strona przybierze całkiem innego wyglądu...

grizzly3 napisał(a)

tabela nie jest niczym złym...
Masz racje, ale ponoc IE "gubi" sie jesli masz za duzo zagniezdzonych tabel.
Nie wiem od czego to zalezy, ale osobiscie tez to zauwazylem ze jesli mam zagniezdzone 5-6 tabel to niezawsze pokazuje jak trzeba, nie zawsze szerokosci sa takie jak powinny :-/
Dlatego tabele sa dobre, ale jak nie jest ich za wiele ;)

grizzly3 napisał(a)

tabela nie jest niczym złym...

Nie jest. Pod warunkiem, że masz w niej dane tabelaryczne. Układ strony buduje się na CSS.

Problem w tym, że nawet proste layouty na tabelach zachowuja się o niebo lepiej niż na divach. Dlatego lepiej wrzucić tabelę i mieć poprawny wygląd niż divy i go nie mieć.

Jakoś dziwnie już nie jedną stronę zbudowałem na DIV'ach i wyglądają jak należy. Są sytuacje, w których trzeba się pomęczyć, żeby uzyskać żądany efekt, ale to sporadyczne przypadki.

Miałem layout z 4 głównych bloków. Siedziałem nad tym ja, Qyon i jeszcze 3 innych ludzi, którzy znają się na rzeczy.
Wynik: stracone kilka godzin.
Wykonanie na jednej tabeli - na IE doskonale, na FF prawie doskonale, czas: kwadrans.
Sorry, ale divy nie zawsze są dobre, przeskakują przy zmianie wielkości okna, co jest porażką.

Wszystko zależy od tego, jak są wyskalowane. Na mojej stronie, którą aktualnie wykańczam są dwa div'y obok siebie i zeskakują przy szerokości okna poniżej 600 pikseli. Zmniejszenie tej wielkości to tylko kwestia dodania większego zapasu albo likwidacji elementów o stałej szerokości. Zresztą przy pewnych szerokościach jest nawet wygodniej, jak div'y umieszczą się pod sobą, aniżeli jakby miały być tak wąskie, by nic się w nich nie mieściło. No ale to kwestia gustu. Większym problemem jest umieszczenie dwóch div'ów obok siebie tak, by oba miały dokładnie tą samą wysokość (dopasowaną do rozmiarów tego większego). Wtedy faktycznie trzeba się trochę nagimnastykować, aczkolwiek jest to wykonalne.

Adam.Pilorz napisał(a)

przy pewnych szerokościach jest nawet wygodniej, jak div'y umieszczą się pod sobą

To fakt. Chyba źle mnie zrozumieliście - do layoutu moim zdaniem najlepsze są DIVy - ja mam tak zbudowaną stronę i wygląda dobrze zarówno na monitorze LCD w rozdzielczości 1280x1024px jak i na telefonie w rozdzielczości 132x176px :)
W takim wypadku lepiej, że DIVy się przesuwają jeden pod drugi, bo w przeciwnym razie (np. jak na stronie są tabele) nic nie widać...
Zapraszam do obejrzenia układu na mojej najnowszej stronie: <url>www.tibidomine.umk.pl/new/</url>.
Strona jest na DIVach i dostosowuje się do szerokości okna, a żeby zniwelować różnice w wyświetlaniu różnych elementów na stronie (np. marginesów) zastosowałem prosty styl: * {margin: 0; padding: 0} - likwiduje to kilka niezgodności międzi IE i innymi (czyt. normalnymi) przeglądarkami.

//o zgrozo - wywal ten skrypt - nie dosc ze z XHTMLelem nie ma nic wspolnego to jeszcze IE only - m.p :D

Rozmowa sie rozwija... i bardzo dobrze, bo widze ze poruszane sa kewstie ktore czasem mnie trapia :]

Adam.Pilorz napisał(a)

Większym problemem jest umieszczenie dwóch div'ów obok siebie tak, by oba miały dokładnie tą samą wysokość (dopasowaną do rozmiarów tego większego). Wtedy faktycznie trzeba się trochę nagimnastykować, aczkolwiek jest to wykonalne.

No wlasnie... mozesz podac jakis maly przykladzik czegos takiego??
Dwa DIV'y obok siebie, zawartosc kazdego brana z bazy danych, nie wiadomo jaka maja wysokosc a ze maja obramowanie "wypadalo by" zeby mialy ta sama wyskosc zeby ladnie wygladalo. Bede wdzieczny za podanie przykladu na DIV'ach :>

może ja nie wiem o co d o k ł a d n i e biega, ale wyrównanie divów to już chyba nie jest wielki problem

Sorry, ale divy nie zawsze są dobre, przeskakują przy zmianie wielkości okna, co jest porażką.

Też mi się wydaje że to najlepszy system umieszczania obiektów "na sztywno"

piechnat napisał(a)

//o zgrozo - wywal ten skrypt - nie dosc ze z XHTMLelem nie ma nic wspolnego to jeszcze IE only - m.p :D

Oczywiście, że nie ma nic wspólnego z XHTML, bo to CSS. Style są poprawne, więc dlaczego miałbym usuwać z nich ten wpis? Nie rozumiem tego komentarza...

desperat napisał(a)

No wlasnie... mozesz podac jakis maly przykladzik czegos takiego??
Dwa DIV'y obok siebie, zawartosc kazdego brana z bazy danych, nie wiadomo jaka maja wysokosc a ze maja obramowanie "wypadalo by" zeby mialy ta sama wyskosc zeby ladnie wygladalo. Bede wdzieczny za podanie przykladu na DIV'ach :>

Gdzieś kiedyś na spinaczu się o to pytałem... http://www.spinacz.pl/g/www/th/2854 <- tu jest ten wątek. Niestety, jak się właśnie okazało, link do rozwiązania już jest nieaktualny. Poszukam, czy mam u siebie na localu kopię tego i spróbuję wrzucić do siebie.

//Sick, obawiam się, że już nie mam :(

//Hmm... Faktycznie, teraz działa :). Jak pisałem tego posta i sprawdzałem, to dostawałem 404 bodajże :)

http://piotrpotera.com/stuff/dla_dota.html mi ten link działa :|
Jeśli o ten chodzi. Tam widzę rozwiązanie tego problemu.

grizzly3 napisał(a)

Oczywiście, że nie ma nic wspólnego z XHTML, bo to CSS. Style są poprawne, więc dlaczego miałbym usuwać z nich ten wpis? Nie rozumiem tego komentarza...

piszac skrypt mialem na mysli skrypt javascript :]

// Copyright (c) May 2002 by Michał Nazarewicz ([email protected])
// Idea by Michał Jazłowiecki ([email protected])
// This software is free; It's distributed under terms of GNU General Public License

itd...

nav napisał(a)

http://piotrpotera.com/stuff/dla_dota.html mi ten link działa :|
Jeśli o ten chodzi. Tam widzę rozwiązanie tego problemu.
Taa.. bosko to wygląda na IE :D