Dreamweaver, vertikalno centriranje, i divljanje rolovovera sa promenom rezolucije

[Osensej]

Cao ljudi,krenuo sam da pravim burazeru sajt,da napomenem
da sam pocetnik, i da mi ovo dodje kao vezbanje,
radim u dreamweveru i naisao sam na problem,

pocetnu ili home stranicu sam kreirao ovako
http://i281.photobucket.com/albums/k...j/1pocetna.jpg

prvi problem je sa centriranjem stranice, sve ja to lepo HORIZONTALNO centriram u DW pomocu css panela, ONDA UBACIM ROLOVORER slicice
i u live viewu DW sve to lepo izgleda
ali kada pogledam u IExploreru rolovorei su se pomerili u stranu potpuno
to izgleda ovako
http://i281.photobucket.com/albums/k.../pomeranje.jpg
ili kada stavim jos vecu rezoluciju ode jos vise ispod
mislio sam da u desnom uglu stavim i mali televizor u kome ce da ide
flesh video ali i ovaj video bezi kada se nacentrira stranica

kada ne centriram ovu web stranicu koja iznosi
w 945
h 613
onda je sve normalno i lepo radi
ali je priblizeno levoj stranici sto je za ovako zamisljenu stranicu veoma ruzno,
inace mi je monitor rez 1024x768 pa se najvise cimam kako li ce izgledati na wide monitorima, takodje voleo bih i da stranica vude i vertikalno centrirana i u sredini,gledao sam to po netu da je tesko,mada nema veze prezivelo bi se to vazno je ovo sa roloverima

 

[djurinica]

predji na modelovanje, bate
Maya ima nekoliko odljičnih verzija

 

[Superiška]

Cao ljudi,krenuo sam da pravim burazeru sajt,da napomenem
da sam pocetnik, i da mi ovo dodje kao vezbanje,
radim u dreamweveru i naisao sam na problem,

pocetnu ili home stranicu sam kreirao ovako
http://i281.photobucket.com/albums/k...j/1pocetna.jpg

prvi problem je sa centriranjem stranice, sve ja to lepo HORIZONTALNO centriram u DW pomocu css panela, ONDA UBACIM ROLOVORER slicice
i u live viewu DW sve to lepo izgleda
ali kada pogledam u IExploreru rolovorei su se pomerili u stranu potpuno
to izgleda ovako
http://i281.photobucket.com/albums/k.../pomeranje.jpg
ili kada stavim jos vecu rezoluciju ode jos vise ispod
mislio sam da u desnom uglu stavim i mali televizor u kome ce da ide
flesh video ali i ovaj video bezi kada se nacentrira stranica

kada ne centriram ovu web stranicu koja iznosi
w 945
h 613
onda je sve normalno i lepo radi
ali je priblizeno levoj stranici sto je za ovako zamisljenu stranicu veoma ruzno,
inace mi je monitor rez 1024x768 pa se najvise cimam kako li ce izgledati na wide monitorima, takodje voleo bih i da stranica vude i vertikalno centrirana i u sredini,gledao sam to po netu da je tesko,mada nema veze prezivelo bi se to vazno je ovo sa roloverima

E druže...to ume da bude zesce cimanje, pozicioniranje elemenata na strani. Trebalo bi da bude jednostavno, ali zahvaljujući raznim čudnim ponašanjima browsera - posebno IE - to moze sve da ti deluje kao uzas, posebno u pocetku...naravno, postoji i ona druga strana koja se zove nedovoljno poznavanje CSS-a i kako on stvarno funkcionise...ali naravno sve se savlada, najbolje kroz praksu...a sad bi mogao i nesto korisno da kazem

Preview iz dreamweavera je koristan ali ga ne treba uzimati zdravo za gotovo - pravo testiranje kako ti izgleda stranica radis u browserima. Recimo stranicu koju radis otvoris u mozilli, i refreshujes kad nesto promenis, to ti je bolji preview. Ne koristi IE za testiranje, koristi bilo koji drugi browser, najbolje mozillu, pa kad bude izgledalo kako treba onda proveravaj u IE, i primenjuj neke eventualne popravke da bi i u njemu radilo kako treba (a za IE to uvek treba, ali uvek)

koristan link za svaki put kad imas ovakve probleme:

http://positioniseverything.net/

A sto se tice konzistentnog izgleda stranice na razlicitim rezolucijama, to ti je tzv.
liquid design, tj. tečan
evo opet dobrog linka:

http://www.cssliquid.com/

i treća fora...css panel je kul, ali mislim da nije lose probati da rucno cukas CSS...bolje ces ga i shvatiti, a i imati direktniju kontolu nad svime sto se desava...

a slike koje si ostavio su sklonjene tako da ne znam koji ti je tacno problem...probaj na guglu css image rollover, ima bezbroj primera, vrlo je lako i mozes to i rucno da odradis...

 

[Osensej]

Superiska, stvarno si superiska,
evo slike http://i281.photobucket.com/albums/kk205/Osensej/pomeranje.jpg


evo i coda

<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #000000;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
	background-color: #000;
}
.oneColFixCtr #container {
	width: 945px; 
	background: #FFFFFF;
	margin: 0 auto; 	
                border: 1px solid #000000;
	text-align: left; 	
}
.oneColFixCtr #mainContent {
	background-color: #000;
	background-image: url(../media/slike/pozadine/4kontakt.jpg);
	width: 945px;
	height: 613px;
	position: relative;
}
#apDiv1 {
	position:absolute;
	width:118px;
	height:36px;
	z-index:1;
	left: 185px;
	top: 121px;
}
#apDiv2 {
	position:absolute;
	width:103px;
	height:73px;
	z-index:1;
	left: 304px;
	top: 121px;
}
-->
</style>
<script type="text/javascript">

prvu stranicu sam odlicno odradio sve odlicno radi
rolovorei su pozicionirani gde zelim i kada menjam rezoluciju sve je na svom mestu i superiska
a to sam postigao tako sto sam oneColFixCtr #mainContent
podesio position: apsolutno, i on je valjda postao parent za ove apdivove u kojima su roloveri, posle sam probao i position: relative; kao sto je gore u codu i opet je radilo,
i mislio sam da su moji problemi reseni, ali kada sam poceo da radim drugu stranicu "posao" opet je pocelo pomeranje van lezista rolovera, cak iako sam
podesavao position: relative ili apsolutan kao u oneColFixCtr #mainContent u predhodnom slucaju na idex.stranici
ovo me je bas zbunilo kako da na jednoj stranici sa potpuno istim codom i css-om (smo sa drugacijom pozadinom) radi, a u drugoj stranici ne

pa imam nekoliko pitanja
- Kako da odredim parent za ove AP DIVOVE najbolje
- Da li je vazno da srodni elemenat bude APSOLUTAN ili RELATIVAN kako bi zapoceo
novi tok i apsolutno pozicionirao APDIV gde mi je rolover
- Moze li neko da kaze o hijerarhiji, autoritetu elemenata za apsolutno pozicioniranje
i o containing blocu, i uzgred sta god vi smatrate da je vazno,
pozz, uzdravlje
-

 

[Superiška]

mali predlog - probaj radi sebe da intuitivnije nazivas klase i ID-e, tipa...

.button
.thumbs
#header

biće ti lakše da skapiraš svoj kod kad mu se kasnije vraćaš - ustvari biće svakom lakše da ga ukapira...

E sad..svaki element ima svoj parent element, osim <html>

Znači, sav kod koji uglaviš između <body> tagova, na njih gi je <body> tatko (potpao sam pod uticaj bata Đoše i oni će od njega nasleđivati stilske osobine. Parent tvojih div elemenata je onaj element koji ih ograđuje - ako ih ništa ne ograđuje onda im je <body> parent. Na fazon

<div>
<span> gtrztztuztukilili </span>
</div>

ovaj div je parent ovom span elementu i span ce nasledjivati od njega stilske osobine
eee...ali koje? samo one koje su nasledne, a koje su to mozes da proveris ovde
(property inheritance)

http://webdesign.about.com/od/css/a/aastylelibrary_2.htm

ovo vazi za css 2, ali tu ces naci i za keca ako ti treba (zastarelo) ili trojku (mislim da je nedovoljno podrzana od browsera i da je najbolje drzati se css 2)

Pozicioniranje:

- relativno pozicioniranje pozicionira element u odnosu na njegov parent element - znaci kad pozicioniras neki element relativno - njegova pozicija zavisi od pozicije parenta i menja se zajedno sa njom - mozda ti se to dogodilo - isti css, ali na jednoj strani tvoj element ima parenta, a na drugoj strani nema istog parenta, ili mu je parent body - e onda ce pri istom kodu biti na potpuno razlicitom mestu i to je kul, znaci da radi ispravno samo treba da pripazis ko je kome parent

- apsolutno pozicioniranje pozicionira element u odnosu na gornji levi ćošak browsera i zanemaruje sve ostale odnose ko je kome parent. Znači ako grunes bilo čemu recimo position:absolute;
left:100px;
top:200px;

to ce da stoji tu gde si mu zadao bez obzira na bilo sta drugo - ako mu se drugi elementi u svom normalnom toku nađu na putu - jednostavno ce doci do preklapanja - a ko ce kog preklopiti i ostati vidljiv, to resis pomocu z-indexa.

 

[Osensej]

hvala SUPERISKA
problem resen