[CSS]ustawienie div'ow Opcje

[bercow]

Witam.

Robię dla koleżanki, całkowicie za darmo, aby nie było (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif)

[novy85]

co do wyświetlania jeden pod drugim to usuń float:left;, a co do

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]

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.

Ten post edytował bercow 18.03.2010, 22:06:32

[novy85]

[HTML] pobierz, plaintext 
<div id="box">
 
	<div id="logo">
	</div>
<div id="left">
	<div id="belka">
	</div>
	<div id="przycisk">blabla1
	</div>
		<div id="belka">
	</div>
		<div id="przycisk">blabla2
	</div>
</div>
<div id="right">
	<div id="tresc">
	</div>
</div>
	<div id="stopka">
	</div>
</div>
 
[HTML] pobierz, plaintext 

i dla div left i right nadaj float odpowiednie

Ten post edytował novy85 18.03.2010, 22:12:08

[bercow]

oo super, wielkie dzięki, jest o niebo lepiej, chodź nie jest idealnie (IMG:style_emoticons/default/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

Ten post edytował novy85 18.03.2010, 23:23:17

[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]

[HTML] pobierz, plaintext 
 
<div id="logo">
<img src="img/logo.png"/>
</div>
[HTML] pobierz, plaintext 

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

Ten post edytował novy85 19.03.2010, 00:33:02

[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 (IMG:style_emoticons/default/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