Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]ustawienie div'ow
Forum PHP.pl > Forum > Przedszkole
bercow
Witam.

Robię dla koleżanki, całkowicie za darmo, aby nie było tongue.gif stronę i mam następujący problem, nie wiem jak ustawić div pod divem. #belka ma być elementem 10px do powielania aby się strona nie rozciągała, a #przycisk miejscem gdzie będzie przycisk. Chce zastosować cienie i zaokrąglenia, aby w jak największym stopniu pozbyć się grafiki, nawet i tak ekperymentalnie, wiem, ze nie działa to w IE, da się zastosować taki myk aby w IE się wyświetlały obrazki, a w reszcie działał CSS, czy muszę dopasować wszystko,a by wyglądało wszędzie ładnie ?

A wiec blabla1 ma się wyświetlać pod blabla, a blabla2 pod blabla1, domyślenia #belka nie będzie miała żadnych cieni, napisów, będzie czystym polem.

http://optykbartek.pl/style.css
http://optykbartek.pl/


Z góry wielkie thx smile.gif
novy85
co do wyświetlania jeden pod drugim to usuń float:left;, a co do
Cytat
czy muszę dopasować wszystko,a by wyglądało wszędzie ładnie
to jeżeli miałeś na myśli różne przeglądarki to wypadało by, żeby w nich też wszystko "ładnie" wyglądało
sadistic_son
Cytat(bercow @ 18.03.2010, 21:20:23 ) *
wiem, ze nie działa to w IE,
Działa w versji >=7
krzysztof_kf
dla selektora #belka , #przycisk usuń float: left
bercow
No prawie super, tylko nie moge ustawic #tresc tak dobrze, jak dam "float: right;" to i tak element jest osuniety w dol, ew jeszcze można dodać margin-top: -164px; ale chyba jest jakieś inne rozwiązanie, no i zapewne będzie sie krzaczyć na rożnych rozdzielczościach.


Co do IE, to chciał bym zmusić przeglądarkę do wyświetlania obrazków, jeżeli jest to IE, jak nie to normalnie.
novy85
  1. <div id="box">
  2.  
  3. <div id="logo">
  4. </div>
  5. <div id="left">
  6. <div id="belka">
  7. </div>
  8. <div id="przycisk">blabla1
  9. </div>
  10. <div id="belka">
  11. </div>
  12. <div id="przycisk">blabla2
  13. </div>
  14. </div>
  15. <div id="right">
  16. <div id="tresc">
  17. </div>
  18. </div>
  19. <div id="stopka">
  20. </div>
  21. </div>
  22.  

i dla div left i right nadaj float odpowiednie
bercow
oo super, wielkie dzięki, jest o niebo lepiej, chodź nie jest idealnie biggrin.gif na dole są nierówności, i u góry tak samo, tylko teraz według mojego pierwotnego planu, chce aby ramka z tekstem tez była w CSS, a wiec stopka wypadnie, ew. zostanie zamieniona na inna ramkę, okulary będą musiał być osadzone jakoś na stale tak samo logo(obrazek), wiec na razie nierówności można sobie trochę odpuścić, obrazki i tak z stamtąd znikną. Ale pytanie jak ostawić je nieruchomo w punktach konkretnych. Problem mam z tym, ze jak kolwiek je rozmieszczę to na px tylko, inna rozdzielczość i wyglądają inaczej.

http://optykbartek.pl/
novy85
nie rozumiem o co chodzi z tymi rozdzielczościami, jak masz layout zrobiony na px a przynajmniej główny kontener (w Twoim przypadku box) ustawiony z jakąś stałą szerokość to jest to layout statyczny więc przy zmianie rozmiaru okna nie zmniejsza się, może dokładniej opisz jak to ma wyglądać

p.s. a do ustawiania czegoś na stałe używa się w css position: fixed; left: 100px; top:100px; itd.

http://www.kurshtml.boo.pl/css/ustalone,pozycjonowanie.html
bercow
http://optykbartek.pl/

Na kazdym z kompow mam ten element (oko) w innym miejscu, jednego lapka mam 1400x900, drugi PC jest 1024x768, i oko jest praktycznie na srodku.
novy85
  1.  
  2. <div id="logo">
  3. <img src="img/logo.png"/>
  4. </div>


usuni diva o id="baner"
bercow
Tylko jak nie zrobię osobnego div na logo, i okulary, to potem jest problem z ich umieszczeniem, same oko wchodzi super, ale okulary to już problem.

A druga sprawa, cały czas sprawdzam sobie walidacje, i mam problem z trzema błędami

Line 20, Column 12: ID "przycisk" already defined
<div id="przycisk">blabla2
Line 22, Column 12: ID "belka" already defined
<div id="belka">
Line 24, Column 12: ID "przycisk" already defined
<div id="przycisk">blabla3


http://validator.w3.org/check?uri=http://o...ine&group=0

Problemem jest użycie literek "b" i "p", tzn. błąd wywala dlatego, ze one są zarezerwowane jako tagi ?

A druga sprawa to walidacja CSS, pokazuje, ze pewne tagi nie istnieją, chociaż bez nich strona wygląda całkiem inaczej, są to własnie te tagi ozdobne.
http://jigsaw.w3.org/css-validator/validat...&lang=pl-PL.

Co do działania w IE, nie działa mi ani w IE7, ani w IE8 ;/

novy85
co do walidacji to jest tam napisane jak byk "An id is a unique identifier. Each time this attribute is used in a document it must have a different value."
jeżeli używasz kilka razy tego samego id do róznych div'ów aby nadać im jakiś styl css używaj class, co do obrazków to wrzuć gdzieś jakiegoś screena jak to ma ostatecznie wyglądać, bo w taki sposób to w miesiąc tego nie zrobisz, bo nikt nie bedzie wiedział do czego ma dążyć

co do walidacji css, te tagi nie są tagami z oficjalnej specyfikacji tylko jakimiś innymi i dla tego nie są obsługiwane przez wszystkie przeglądarki
bercow
Fakt, <div class="przycisk"> i div.przycisk załatwił sprawę. Ogólnie wyglądać to ma jak najbliżej tego http://bercow.pl/bartek/layout1.jpg Teraz widzę, ze kolumna right nie wiem czemu jest trochę za krotka, i nie można jej rozciągnąć, bo spada na dol. Teraz trochę nad cieniami muszę popracować, by wyglądały jak z PS biggrin.gif
novy85
http://variust.pl/layout1.jpg

okulary trzeba pociąć i uzyskane obrazki ustawic jako tło div'ów i odpowiednio wypozycjonować, dodać parametr no-repeat

http://www.kurshtml.boo.pl/css/pozycja,tlo.html

tylko tak można to zrobić, żeby wszystkie przeglądarki dobrze to obsłużyły
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.