Probleme Web Design

Florin_dioda · Iulie 16, 2012

Am deschis acest topic pentru ca m-am lovit de o problema si pentru ca de acum inainte, daca voi mai avea alte nelamuriri am sa postez aici.

Problema mea este urmatoarea:

Vreau sa fac vizibile tagurile html in pagina web, la fel cum sunt vizibile si tag-urile care apar in acest text. (Cele cu rosu). Era o eticheta speciala pentru asa ceva...foarte simplu de utilzat...avea decat 4 litere; dar am uitat-o, iar pe google nu o mai gasesc sa dau cu tunu'... . Am incercat si cu <pre> </pre> ...nu a mers. Daca stiti cumva un tag bun pentru asa ceva, sau daca se poate face ceva folosind css, astept orice raspuns.

Multumesc anticipat!

donpetru · Iulie 16, 2012

Folositi codul <span style="color:#0000cd">...</span>:

<textarea rows="6" cols="50" class="example-code" onclick="this.focus();this.select()"> Cod HTML intr-o pagina HTML: <a href="http://www.tehnium-azi.ro">Tehnium Azi</a> </textarea>

unde:

- rows="6" inseamna numarul de randuri vizibile in fereastra de afisare a codului;

- cols="50" este latimea ferestrei in numar de caractere luand in considerare si grosimea meniului derulant din partea dreapta;

- class="example-code" reprezinta clasa de afisare a ferestrei (in exemplu de mai sus o bordura de 1px de jur imprejur).

- onclick="this.focus();this.select()", parmise dar nu sunt 100% sigur, reprezinta modul si proprietatile de selectare a textului.

Numai bine

Florin_dioda · Iulie 18, 2012

Multumesc...de retinut...dar intr-un final am gasit o metoda mult mai usoara:

<head> </head> este echivalent cu <head> </head>

Adica < = < si > = >

Sunt multe alte simboluri care nu apar pe tastatura ce pot fi scrise cu codul ASCII(chiar si cele ce apar).

Am gasit aici niste coduri; sper sa fie de ajutor celor ce se ocupa cu chestii dastea'. :derisive:

http://www.web-source.net/symbols.htm

Am o curiozitate:

Lucrez de ceva timp la un site (am reusit sa fac decat o pagina :wallbash: ), dar chiar si cu atat, sunt foarte multumit de cum arata. Dar am o MAAARE problema: compatibilitatea cu celelalte browsere. Pagina este realizata predominant cu coduri CSS3 (compatibil doar cu versiunile cele mai noi ale browsere-lor si aproape necompatibil cu IE <<vechea problema>>) dar merge perfect in Mozila. Asta e problema...doar in Mozila. Am reusit sa o fac sa arate foarte bine si cel mai necaz imi e ca am nascocit o metoda de a face un DropDownMenu cu efecte de tranzitie si toate cele doar cu CSS3, de n-ai crede ca nu are un scripturi, dar nu merge decat in Mozila.

Ideea este urmatoarea...este vreun program ceva saaauuu... eu stiu...vreun convertor CSS >>> JavaScript pentru a-l putea face compatibil cu celelalte borwsere? Am fugit de JavaScript ca de ciuma...ca am stiut ca e greu...da'...tot nu am scapat. M-am apucat sa-l invat, dar e foarte greu. Am noroc ca stiu ceva ceva C++ si seamana.

Editat Iulie 18, 2012 de Florin_dioda

Florin_dioda · Iulie 19, 2012

Am observat ca si acest site este realizat cu CSS3. Cum l-ati facut compatibil cu celelalte browsere?

Acel border radius este compatibil doar cu Chrome si Opera in totalitate, iar in rest, IE9+, Firefox 4+, Safari 5+. Ca sa nu mai vorbesc de box shadow???

.

Editat Iulie 19, 2012 de Florin_dioda

donpetru · Iulie 19, 2012

Din punctul de vedere a design-ului CSS/HTML, acest site e mult mai complex decat o uzuala pagina web scrisa in html. Apoi, ceea ce ai vrut sa redai in imaginea de mai sus, acel cod CSS, nu este reprezentat in totalitate asa cum se ragaseste in fisier. Si nu e important numai acel cod.

Am reprezentat mai jos partea din unul din fisierele CSS care corespunde cu bara din pagina index care te intereseaza:

.maintitle {
background: #444 url('{style_images_url}/maintitle.png') repeat-x 50% 50%;
color: #fff;
text-shadow: rgba(0,0,0,0.25) 0px -1px 0px;
padding: 13px;
font-size: 12px;
font-weight: 300;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0,0,0,0.25) 0px 0px 0px 1px inset, rgba(0,0,0,0.3) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 2px 0px;
-moz-box-shadow: rgba(0,0,0,0.25) 0px 0px 0px 1px inset, rgba(0,0,0,0.3) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 2px 0px;
box-shadow: rgba(0,0,0,0.25) 0px 0px 0px 1px inset, rgba(0,0,0,0.3) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 2px 0px;
overflow: hidden;
margin-bottom: 5px;
}

h3.maintitle{ font-weight: bold; }

.maintitle a { color: #fff; }

.collapsed .maintitle {
opacity: 0.2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.collapsed .maintitle:hover { opacity: 0.4; }

.maintitle .toggle {
visibility: hidden;
background: url('{style_images_url}/cat_minimize.png') no-repeat;
text-indent: -3000em;
width: 32px; height: 22px;
margin: -5px -5px -10px 0;
display: block;
outline: 0;
}

.maintitle:hover .toggle { visibility: visible; }

.collapsed .toggle {
background-image: url('{style_images_url}/cat_maximize.png');
}

.category_block.collapsed .border{ opacity: 0; }

Acum, problema de compatibilitate cu browserele web nu tine numai de codul CSS ci si de modul de scriere a template-ului. Dar chiar si asa, mai ales daca folosesti elemente CSS3, asa cum foloseste acest site, pe un browser web mai vechi nu o sa poti sa faci site-ul sa fie redat corespunzator (mai ales efectele de transparenta a unor imagini etc). Desi, in cazul site-ului Tehnium Azi, am auzit sau citit si vorbe care spuneau ca ar fi bine sa fi fost site-ul optimizat pe IE6, 7... Sa stiti ca acest lucru nu se poate face fara a renunta la anumite, sa le zic, "efecte speciale". SI nu prea isi are rost, cu atat mai mult cu cat in urmatorii ani multi utilizatori vor renunta la utilizarea variantelor de browsere web vechi, care sunt uneori destul de inutile.

Si un alt exemplu: de vreo o luna de zile incerc sa repar o mica problema de compatibilitate a pagini index a site-ului Tehnium Azi, pagina unde sunt afisate ultimile articole etc. In browser-ul IE8 nu am reusit in niciun fel sa aduc denumirea articolului si data/numele autorului in partea stanga, sa fie aliniate corect ca in IE9, desi codul e destul de simplu si clar. Numai in IE8 pur si simplu nu vrea. Dar mai caut solutii.

Numai bine

Florin_dioda · Iulie 19, 2012

a:link {color: #001715;}

a:visited {color: #001715;}

a:hover {color: #001715; text-shadow: 0 0 5px #00B6EA;}

a:focus {color: #001715;}

a:active {color: #FFF;}

.bg

{

background-image: url("BG.png");

background-attachment: fixed;

}

#trcont

{

position: absolute;

text-align: center;

line-height: 30px;

overflow: hidden;

width: 110px;

height: 30px;

border-radius: 10px;

moz-border-radius: 10px;

webkit-border-radius: 10px;

o-border-radius: 10px;

background:

-moz-linear-gradient(top, #A5F700, #649600);

-webkit-linear-gradient(top, #A5F700, #649600);

-o-linear-gradient(top, #A5F700, #649600);

transition: height 0.5s;

-moz-transition: height 0.5s;

-webkit-transition: height 0.5s;

-o-transition: height 0.5s;

box-shadow: 5px 5px 5px rgba(182,234,0,0.2);

-moz-box-shadow: 5px 5px 5px rgba(182,234,0,0.2);

-webkit-box-shadow: 5px 5px 5px rgba(182,234,0,0.2);

}

#trcont:hover

{

height: 300px;

}

.HrMenu

{

margin: 0;

width: 90px;

height: 1px;

color: #AAFF00;

}

Am postat aici prima parte din CSS-ul paginii ca exemplu. Nu am sesizat diferente (de formulare ma refer) intre exemplul dumneavoastra si cel postat acum de mine. Imi scapa ceva?

Editat Iulie 19, 2012 de Florin_dioda

donpetru · Iulie 19, 2012

Asa cum am scris mai sus, nu conteaza cand te bine ati scris CSS-ul, ci si modul cum ati scris template-ul (partea cu div-uri....), stiti la ce ma refer. Deci postati si acea parte ca sa putem face o analiza obiectiva.

Florin_dioda · Iulie 19, 2012

Desktop.rar

Mai bine asa.

Imi cer scuze pentru intarziere...nu mergea sa bag direct fisierele txt.

Editat Iulie 19, 2012 de Florin_dioda

donpetru · Iulie 19, 2012

Incearca sa incluzi in tagurile

urmatorul cod:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Florin_dioda · Iulie 19, 2012

Stiu tagul acesta. Am incercat...nu merge...arata tot la fel.

Zic sa lasam pe data viitoare.

Numai bine!

donpetru · Iulie 19, 2012

Am reparat putin fisierele trimise si le-am atasat mai jos:

webpage.rar

Rezultatul il puteti vedea aici:

http://forumelectro.ro/test/index.html

Florin_dioda · Iulie 20, 2012

Asa arata in IE

Asa arata in Chrome:

Si sa inteleg ca ati mai adaugat un div care contine toata pagina? Am observat ca i-ati atribuit clasa pentru background: ???

Multumesc de ajutor!!!

Dar am ajuns la o concluzie:

Nu ai nici o sansa sa faci un site fara JavaScript (asta pentru ca este singura metoda prin care il poti face compatibil cu toate browserele). Prin urmare, continui sa invat JavaScript, si renunt la CSS3. Pana acum am mers pe ideea ca zilnic apar update-uri ale browserelor si pana cand voi termina site-ul browserele vechi vor disparea. Dar nu e chiar asa, mai ales IE...abia ultimele versiuni sunt compatibile cu CSS3.

Numai bine!

donpetru · Iulie 20, 2012

Nu trebuie sa renuntati la CSS3 ci trebuie sa impletiti JavaScript, CSS si HTML, astfel incat paginile web pe care le veti creea sa fie afisate corect de cat mai multe browsere web. Retineti asta.

Editare ulterioara: Orientati-va catre CMS-uri pe care sa le modificati. E mult mai simplu si profesional asa.

Numai bine

Florin_dioda · Iulie 20, 2012

Nu am zis ca renunt detot la CSS, ci doar la codurile noi care nu sunt compatibile cu majoritatea browser-elor. Exemplu: box-shadow, gradient, rgba, transition, border-radius...etc. Pe aceste voi incerca sa le inlocuiesc cu JavaScript. :book2:

Multumesc pentru sfaturi! :thanksjap:

Florin_dioda · August 3, 2012

Am resolvat in mare parte problema compatibilitatii CSS3 cu IE 6/7/8, dar nu gasesc sub nici o forma filtre pentru border-radius. Am gasit tot felul de htc-uri, pe care le lauda toti. La mine nu merg. Imi trebuie vreun plugin ceva ca sa vada fisierele htc?

Astept variante.

Autentificare

Probleme Web Design

Postări Recomandate

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Link spre comentariu

Distribuie pe alte site-uri

Creează un cont sau autentifică-te pentru a adăuga comentariu

Creează un cont

Autentificare

Navigare recentă 0 membri

Doneaza

Ultimele proiecte DonPetru

Informații Importante