[es] - CSS pomoc (border) ....

varginjo
Atila Varga
Čoka

Član broj: 25671
Poruke: 258
*.pyrotherm.co.yu.

Sajt: rs.linkedin.com/in/atilav..

+1 Profil

CSS pomoc (border) ....

^{02.11.2007. u 15:33 - pre 200 meseci}

Na ovom linku se nalazi test stranica http://testlayout.awardspace.com/

Problemi su sledeci:

- U Firefoxu je sve kako treba da bude , znaci ceo layout dizajna izgleda kako treba,
onaj beli border i mouseHover radi odlicno ( sto predstavlja problem u drugim browserima,
a navescu u daljem tekstu..)

- U Operi border takodje funkcionise, a problem predstavljaju 3 slike gde ne reaguje na mouseHover

- U IE nema belog bordera, a takodje predstavlja problem mouseHover

Za CSS sam sve probao ali ne znam zasto IE pravi problem oko toga i kako bih to mogao resiti?

Sto se tice slika , tu koristim Javascript sa Dynamicdrive-a i mozete pogledati u kodu i
da li je moguce da taj Javascript ne radi u Operi i IE , ako je tako, zamolio bih preporuku
za neku drugu skriptu koja obavlja isti zadatak.

U sledecem kodu se nalazi CSS za layout...

Code:

/* standard elements */
* {
    margin: 0;
    padding: 0;
}
a {
    color: #999;
    text-decoration: none;
}
body {
    background: #FD7802;
    color: #555;
    font: normal 0.7em sans-serif,Arial;
    margin: 0px 0;
    text-align: center;
}
ul {
    margin: 12px 0;
}
li {
    list-style: url(img/li.gif);
    margin-left: 18px;
}

cite {
    background: url(img/quote.gif) no-repeat;
    color: #9A9A9A;
    display: block;
    font: normal 1.1em "Lucida Sans Unicode",serif;
    margin-bottom: 12px;
    padding-left: 28px;
}

/* main structure */
.main {
    background: White;
    border: 10px double White;
    border-color: #141414 #202020 #222 #202020;
    margin: 20px auto 4px auto;
    text-align: left;
    width: 600px;
}

/* header */
.gfx {
    background: #222 url(img/logo.jpg) no-repeat;
    height: 130px;
}
.gfx h1 {
    color: #EDEDED;
    font: normal 2.6em Tahoma,sans-serif;
    padding: 50px 20px;
}

/* menu */
.menu a {
    background: #000 url(img/bgmenu.png) repeat-x;
    border-right: 1px solid #222;
    border-top: 1px solid #1A1A1A;
    color: #FC8602;
    float: left;
    font-size: 1.2em;
    padding-top: 10px;
    width: 119px;
    height: 20px;
}
.menu a span {
    padding-left: 30px;
}
.menu a:hover {
    background-position: left bottom;
    color: White;
}
.menu a#last {
    border-right: none;
    width: 150px;
}

.img {
  padding:4px;
  border:1px solid #ddd;
  }

/* content */
.content {
    background: #1A1A1A;
    border-top: 1px solid #1A1A1A;
    clear: both;
}
.content h1 {
    color: #A67413;
    font: bold 1.1em sans-serif,Arial;
    margin: 0 0 4px;
}
.content p {
    margin: 0 0 12px;
    color: Silver;
}
.item {
    background: #030303 url(img/bgitem.gif) repeat-x;
    padding: 20px 10px;
}
.item1 {
    background: #030303 url(img/bgitem.gif) repeat-x;
    padding: 20px 33px;
}
.item3{
    background: #030303 ;
    padding: 20px 33px;
}

/* footer */
.footer {
    background: #0A0A0A;
    color: #666;
    padding: 5px;
}

Odgovor na temu

tandarela
Beograd

Član broj: 152717
Poruke: 48
*.eunet.yu.

Profil

Re: CSS pomoc (border) ....

^{02.11.2007. u 16:17 - pre 200 meseci}

Pozdrav

Što se tiče postavljanja opacityja preko JavaScripta, probaj ovako :

Code:

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity) // ff
cur.style.MozOpacity=strength
else if (cur.style.filter) // ie
cur.style.filter = "alpha(opacity="+(strength*100)+")";
else if (cur.style.opacity) // opera
cur.style.opacity = strength
}

Kada je u pitanju double border, čini se da IE razmak između te dve linije posmatra kao transparentan, pa tu imaš 2 mogućnosti :
1. da staviš beo layer iza layera klase main ( netestirano )
2. da staviš solid border na main na npr. 3px širine, i ubaciš padding u main od oko 6px sa svih strana kako bi se napravio beo prostor

Odgovor na temu

varginjo
Atila Varga
Čoka

Član broj: 25671
Poruke: 258
*.pyrotherm.co.yu.

Sajt: rs.linkedin.com/in/atilav..

+1 Profil

Re: CSS pomoc (border) ....

^{02.11.2007. u 17:55 - pre 200 meseci}

Probao sam Javascript, ali je isto kao i prvi put.

Odgovor na temu

tandarela
Beograd

Član broj: 152717
Poruke: 48
*.eunet.yu.

Profil

Re: CSS pomoc (border) ....

^{02.11.2007. u 18:08 - pre 200 meseci}

Citat:

varginjo: Probao sam Javascript, ali je isto kao i prvi put.

Ajde postavi na server, pošto skripta koju sam postavio radi kod mene.

Odgovor na temu

varginjo
Atila Varga
Čoka

Član broj: 25671
Poruke: 258
*.pyrotherm.co.yu.

Sajt: rs.linkedin.com/in/atilav..

+1 Profil

Re: CSS pomoc (border) ....

^{02.11.2007. u 19:02 - pre 200 meseci}

evo linka http://testlayout.awardspace.com/test.html

Testirao sam sada i CSS...

1. Firefox i Opera odrade kako treba ali IE ne moze nikako da pozicionira kako treba ,
stalno rasiri u gornjem i donjem delu, aprobao sam sa svim unesenim parametrima.

2. Solid border sam probao ali meni treba bas nesto kao double border, jer sa solid borderom
dobijam samo jedan border bele boje, a taj border bio trebao da ima tanji border crne boje.

Sav sam vise u borderima :)

Odgovor na temu

tandarela
Beograd

Član broj: 152717
Poruke: 48
*.eunet.yu.

Profil

Re: CSS pomoc (border) ....

^{02.11.2007. u 22:50 - pre 200 meseci}

Code:

function makevisible(cur,which){
  strength=(which==0)? 1 : 0.2;
  if (typeof cur.style.filter != "undefined"){ // ie
    cur.style.filter = "alpha(opacity="+(strength*100)+")";
  }
  else if (typeof cur.style.MozOpacity != "undefined"){ // ff
    cur.style.MozOpacity=strength;
  }
  else if (typeof cur.style.opacity != "undefined"){ // opera
    cur.style.opacity = strength;
  }
}

Da bi postavio početni opacity, u Operi nije htelo iz nekog razloga preko CSS-a, pa sam ubacio još jedan JS :

Code:

with(document){
  makevisible(getElementById('s1'),1);
  makevisible(getElementById('s2'),1);
  makevisible(getElementById('s3'),1);
}

Ovaj deo ide posle svih elemenata, a pre </body> taga. Svakoj slici postavi ID i to je to.

Što se tiče ovih bordera, ne znam, i dalje mi nije jasno zašto ti je problem da taj debeli beli border uradiš tako što će pozadina "main" layera da ti bude bela, a border na 3px širine i padding na 6px. Zatim samo unutar njega pozicioniraš layer koji ima 3px border i dobiješ isti efekt ( double border ).

Odgovor na temu

varginjo
Atila Varga
Čoka

Član broj: 25671
Poruke: 258
*.pyrotherm.co.yu.

Sajt: rs.linkedin.com/in/atilav..

+1 Profil

Re: CSS pomoc (border) ....

^{03.11.2007. u 09:57 - pre 200 meseci}

@Tandarela, hvala ti puno :) , uradio sam CSS sada je u svakom browseru OK.
http://testlayout.awardspace.com/test.html

Sto se tice Javascripta, ubacio sam ovaj novi kod sem ovoga, da li mislio da posle svake slike postavim
ovaj kod, ja sam bio postavio pre </body> taga ali tada se ovo pojavljuje u donjem delu ekrana kao tekst...

Code:

  makevisible(getElementById('s1'),1);
  makevisible(getElementById('s2'),1);
  makevisible(getElementById('s3'),1);
}

Hvala ti jos jednom

Odgovor na temu