Šta je novo?
Od:
Filteri

Pozadina web strane "proklizava"

H

Hannibal

Čuven
Učlanjen(a)
01.12.2002
Poruke
185
Poena
619
Predpostavljam da je pitanje banalno al posto nisam vican web design-u meni pravi problem. Postavio sam test stranicu za layout sajta gde mozete videti o cemu govorim: http://hannibal.on.neobee.net/test.htm

Uradjeno je Frontpage-om bez mnogo ceprkanja po kodu (posto ko sto rekoh nisam vican). Stranica je sa pozadinskom slikom i tabelom sirine 1000px centriranom na stranicu. Problem nastaje kad se prozor browser-a smanjuje po horizontali. Kad se prozor smanji na sirinu manju od 1000px pozadina pocne da "proklizava" tj stalno je centrirana u odnosu na sirinu prozora pa slike u tabeli vise ne odgovaraju slici pozadine. Problem se javlja u Firefox-u i Operi dok IE6 prikazuje stranicu kako treba. Ima li neko ideju kako da resim problem?

Hvala.
 
Ako sam dobro shvatio, pokušavaš da napraviš samo zatamnjenje tom slikom koja je pozadina tabele? Jesi li probao da umesto Main.jpg koristiš .png, i da ga napraviš sa transparencijom? U smislu, da taj .png ne sadrži zatamnjenu kopiju slike, već samo sloj koji će da zatamni šta god je ispod njega. Onda ti ne bi zavisilo od lokacije, jedini problem bi bio što IE6 ne podržava png - za to već postoji fix.


Hannibal je napisao(la):
http://hannibal.on.neobee.net/test.htm

Uradjeno je Frontpage-om bez mnogo ceprkanja po kodu (posto ko sto rekoh nisam vican). Stranica je sa pozadinskom slikom i tabelom sirine 1000px centriranom na stranicu. Problem nastaje kad se prozor browser-a smanjuje po horizontali. Kad se prozor smanji na sirinu manju od 1000px pozadina pocne da "proklizava" tj stalno je centrirana u odnosu na sirinu prozora pa slike u tabeli vise ne odgovaraju slici pozadine. Problem se javlja u Firefox-u i Operi dok IE6 prikazuje stranicu kako treba. Ima li neko ideju kako da resim problem?

Hvala.
Kliknite za proširenje...
 
Poslednja izmena:
Sad sam probao png i desava se kao sto si rekao. Stranica je ok u Firefoxu u Operi al je ocajna u IE. S obzirom da IE6 dolazi default sa XP-om a korisnici sajta ce biti raznih profila (i IT pismenosti) ne mogu da ocekujem da updateuju IE ili traze fixeve.
Plus sto ce problem ostati oko menija kad ga napravim kako treba a ne samo kao probnu sliku istog. Ideja je dobra al ne resava sve probleme. Hvala svakako.

Garant ovo moze da se resi nekim html ili css kodom. Samo, ko sto rekoh, nisam im vican. Ako neko jeste molio bih za pomoc.

P.S. evo koda stranice. Mozda pomogne.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body bgcolor="#000000" background="images/Background.jpg" style="background-repeat:no-repeat; background-position:center top" topmargin="50">

<div align="center">
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td rowspan="2">
<img border="0" src="images/Logo.jpg" width="340" height="160"></td>
<td height="120"> </td>
</tr>
<tr>
<td><img border="0" src="images/Menu.jpg" width="660" height="40"></td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td colspan="2" background="images/Main.jpg" height="510">
<p align="center"><font color="#FFFFFF">Main Text</font></td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td colspan="2" background="images/Footer.jpg" height="40">
<p align="center"><font color="#FFFFFF">Footer</font></td>
</tr>
</table>
</div>

</body>

</html>
 
Ne, ne, fix za IE se dodaje u html-css kod, i resava problem sa providnoscu png fajlova nezavisno od korisnika. Pogledaj ovde: http://www.twinhelix.com/css/iepngfix/

Ne znam kako si zamislio meni (niz slicica, niz teksta...?), ali verujem da i to moze da se sredi sasvim lepo.

Sto se tice html+css resenja, postoje atributi za transparenciju i u firefoxu i u IE, (opacity i filter(alpha), respektivno) - i to radi, a zaobljene ivice koje imas zapravo predstavljaju problem: opet postoje atributi i za to, ali nisam siguran koliko su efikasni. Druga stvar je sto imas visebojnu pozadinu, pa ne mozes ni da simuliras zaobljene coskove sitnim slicicama u uglovima. Negde sam video i resenje gde se ide na usitnjavanje uglova malim div-ovima tako da izgledaju kao zaobljena ivica, ali ni to nije bilo savrseno resenje. Da je sve cisto u ovom smislu, odmah bih ti preporucio css :)

Glupi IE. :D
 
Probao sam fix. http://hannibal.on.neobee.net/test2.htm
Radi za slike koje su ubacene direkt u tabelu (Logo.png) al ne radi za slike koje su stavljene kao pozadine polja u tabeli kako bi mogao tekst da ide preko njih (sve ostale). Verovatno i to moze da se sredi, al kad pokrenem stranicu jedan od browsera mi je izbacio upozorenje o activex-u i blokira skript dok ga ne dozvolim rucno tako da ova opcija otpada.

Guglajuci problem nadjoh ovo: http://www.htmlcodetutorial.com/help/viewtopic.php?t=13041&start=0
Al nisam bas siguran dal tip ima isti problem kao ja, i jos gore, kod kojim je problem resen mi krajnje nije jasan. Moze li neko da ga rastumaci.

Hvala
 
U liniji gde imas:

img, div { behavior: url(iepngfix.htc) }

zameni sa:

img, div, td { behavior: url(iepngfix.htc) }

Ovo ce resiti problem sa uglovima u celiji tabele. Sto se tice ActiveX upozorenja, primetio sam da IE8 kuka, ali njemu ovaj fix nije ni potreban. Za ovo mozes da iskoristis uslovni komentar, ovako:

<!--[if IE 6]>
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

Ovo bi trebalo da obezbedi da samo IE6 vidi i iskoristi ovaj deo koda, a on nece da se zali na ActiveX. Naravno, onaj <script> iz heada treba izbrisati. Ne mogu da probam ovo jer IE6 kod mene nesto zeza, ali bi trebalo da radi.
 
Ovo je resilo problem slika u tabeli. Sve svuda izgleda dobro.

Hvala puno na pomoci.

P.S.
IE6 i dalje kuka i blokira activex, al samo kad teram stranicu s harda. Uploadovanu na net za probu otvara bez upozorenja. hm?
 
Mozda je do podesavanja vezanih za security u okviru IE, pogledaj pod tools->internet options, drugi tab sa leve strane bi trebalo da je security, pa vidi kako su podesene local intranet i internet. Meni se sa default podesavanjima ne zali.

Srecno sa tim :)
 
Posto me i dalje jedio taj security warning nastavio sam da guglam temu. Nakon sto su mi oci ispale citajuci kojesta i probajuci razne kodove resih problem.
Samo treba dodati

padding: 0; margin: 0; width: 100%; display: table;

u

<body bgcolor="#000000" background="images/Background.jpg" style="padding: 0; margin: 0; width: 100%; display: table; background-repeat:no-repeat; background-position:center top">

i izbaciti

<meta name="Microsoft Border" content="b, default">

iz head-a i sad radi sa jpeg-ovima u svim browserima i bez ikakvih warninga. Weeee:banana:
 
Morate se prijaviti ili registrovati da odgovorite ovde.
Vrh Dno