Jump to content
Sign in to follow this  
Florin_dioda

Probleme Web Design

Recommended Posts

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'... wallbash.gif . 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! thanksjap.gif

Share this post


Link to post
Share on other sites

Folositi codul :

<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

Share this post


Link to post
Share on other sites

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.

Edited by Florin_dioda

Share this post


Link to post
Share on other sites

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???

.post-17100-0-33417700-1342721346_thumb.jpg

Edited by Florin_dioda

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Edited by Florin_dioda

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Desktop.rar

Mai bine asa.

 

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

Edited by Florin_dioda

Share this post


Link to post
Share on other sites

Incearca sa incluzi in tagurile

urmatorul cod:

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

Share this post


Link to post
Share on other sites

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

 

Zic sa lasam pe data viitoare.

 

Numai bine!

Share this post


Link to post
Share on other sites

Asa arata in IE

post-17100-0-16548400-1342780227_thumb.jpg

 

Asa arata in Chrome:

post-17100-0-99234000-1342780247_thumb.jpg

 

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

post-17100-0-97368900-1342780318_thumb.jpg

 

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use cookies and related technologies to improve your experience on this website to give you personalized content and ads, and to analyze the traffic and audience of your website. Before continuing to browse www.tehnium-azi.ro, please agree to: Terms of Use.