Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Deparazitare externa pisici fara ...

Seriale turcesti/coreene online H...

Merita un Termostat Smart pentru ...

Sfat achizitie MTB Devron Riddle
 Problema mare cu parintii= nervi ...

switch microtik

Permis categoria B la 17 ani

Sfaturi pentru pregatirea de eval...
 Crapaturi placa

cum imi accesez dosarul electroni...

Momentul Aprilie 1964

Sursa noua - zgomot ?
 A fost lansat Ubuntu 24.04 LTS

Pareri apartament in zona Berceni?

Free streaming SkyShowtime de la ...

Skoda Fabia 1.0 TSI (110 CP)- 19 ...
 

Lamurire CSS

- - - - -
Last Updated: Feb 21 2013 15:41, Started by zypa , Feb 13 2013 00:17  
  ·  
  • Please log in to reply
10 replies to this topic

#1
zypa
Posted 13 February 2013 - 00:17

zypa

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 13.02.2007
Salutare,

Mi-am realizat un "template" basic pentru a realiza site-uri cat mai rapid fara sa declar mereu tipul de doctype, html, meta-uri, fav-icon-uri etc. In acelasi html am facut referinta la 2 css-uri.
Primul se refera la un reset.css standardizat iar al 2-lea la cel style.css ce are rol de overwrite.

Avand la dispozitie la birou doar de IE6 si ultimul Firefox intotdeauna exista probleme de afisaj. Insa am observat un lucru ciudat, pentru care as avea nevoie de ajutorul vostru. Daca in reset declar o serie de elemente, desi le "overwritez" in style.css, IE6 nu le ia in considerare. De asemenea nu le ia in consdierare daca le declar intr-un singur CSS. Este normal?

Va dau un mic exemplu:

Reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

STYLE. CSS

body
{
font-family: tahoma;
font-size: 67%;
}

Normal ar fi ca daca declar body separat, sa nu tina cont de "font-size: 100% si nici de font: inherit, insa nu se intampla asa.


si 2)

Unde pot gasi un template curat cu toate declaratiile standard, lasand liber doar area <body> pentru a fi completata? Ma refer pentru easy editing, poate al meu este gresit realizat.

Va multumesc anticipat

#2
Andrey__
Posted 13 February 2013 - 00:48

Andrey__

    Member

  • Grup: Members
  • Posts: 426
  • Înscris: 30.06.2012
1. Regulile css sunt luate in considerare după cum sunt puse in fișierul css. Dacă elementul body are declarat in css (fie și in fișiere diferite) de două ori font-size, cel de-al doilea este luat in considerare, lucru care mi se pare normal.

Totuși, dacă ții morțis pe niște reguli, cele din reset.css, atunci poți adăuga comanda, instrucțiunea sau cum vrei tu să-i spui !important. Astfel că font-size (de ex) devine font-size:100% !important.

Deci cea care are !important nu poate fi inlocuită de alta comandă, decât dacă și cea de-a doua are !important.

2. Nu-ți ințeleg intrebarea. Te referi la un template in html ? Nu știi elementele de bază ale unui document html ? Astea le poți găsi pe w3schools. Tot acolo ai tipul doctype-urilor șamd.

Dacă te referi la un template - css, deși nu știu dacă il putem numi chiar template, atunci există pe net css-uri gata resetate, chiar compatibile cu IE 5.

Edited by Andrey__, 13 February 2013 - 00:48.

#3
danutz0501
Posted 13 February 2013 - 01:36

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
HTML 5 boilerplate http://html5boilerplate.com/ , cu toate ca nu e prea recomandabil sa incepi sa te joci cu el tinand cont de nivelul tau de cunostinte. Intai e recomandabil sa inveti cat de cat css si html si deabia dupa sa cauti framework-uri de genul asta. Marea majoritate o sa fie framework-uri pt css care o sa includa un reset, un grid si cateva elemente de stilizare. Pt html nu prea exista asa ceva tinand cont ca structura fiecarui site e diferita.
Si in legatura cu rescrierea, sper ca al doilea link catre fisierele css era cel in care doreai sa rescri, nu? De obicei link-uri catre fisierele css pt versiuni 6 si mai jos de css se pun intre :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
ele fiind pline de asa zisele "css hack-uri. IE 6 nici macar nu suporta css 2.1 total, asa ca sa nu te miri de ce o regula de css merge in toate browserele si in IE 6 nu se intampla nimic.
IE 6 nu e cel mai bun browser in care ai vrea sa te apuci de web coding, crede-ma IE 6 (si doamne ajuta ca a murit Posted Image ) le da dureri de cap pana si unor "veterani" in front end.
Ce inveti, invata folosind Firefox, si nu te mai chinuii cu IE6. E mort si lasa-l sa se odihneasca.

Edited by danutz0501, 13 February 2013 - 01:38.

#4
poadol
Posted 13 February 2013 - 03:50

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
"Tip: To hide all your other stylesheets from Internet Explorer 6, wrap them inside this Conditional Comment.
<!--[if ! lte IE 6]><!-->
/* Stylesheets for browsers other than Internet Explorer 6 */
<!--<![endif]-->
Then add the Universal Internet Explorer 6 stylesheet.
<!--[if lte IE 6]>
<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
<![endif]-->
"

Edited by poadol, 13 February 2013 - 03:52.

#5
andrey_net
Posted 13 February 2013 - 04:20

andrey_net

    Member

  • Grup: Members
  • Posts: 910
  • Înscris: 20.11.2008

View Postdanutz0501, on 13 februarie 2013 - 01:36, said:

IE 6 nu e cel mai bun browser in care ai vrea sa te apuci de web coding, crede-ma IE 6 (si doamne ajuta ca a murit Posted Image ) le da dureri de cap pana si unor "veterani" in front end.
Ce inveti, invata folosind Firefox, si nu te mai chinuii cu IE6. E mort si lasa-l sa se odihneasca.

Poate ca ai vrut sa scri ca e aproape mort. Mai sunt o groaza care inca folosesc IE 6.

#6
danutz0501
Posted 13 February 2013 - 11:35

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Da sigur inca sant milioane de useri care folosesc IE6 Posted Image , gen mamaie si tataie, si firme care nu vor sa plateasca alte licente pt un sistem nou de operare asa ca raman la xp si vechiul ie6.
http://www.bbc.co.uk...nology-16408850 pana si microsoft se bucura de moartea lui, si daca pana si ei incurajeaza web developerii sa inceteze cu suportul pt el cred ca spune ceva despre IE6 si despre cat de mult mai e suportat. Singurul loc unde mai e folosit mult ie6 e china, 25% din piata. Acolo cred ca e groaza aia de useri care zici tu ca il mai folosesc Posted Image
Pe scurt pt autorul threadului nu te chinuii cu stylesheet-uri pt ie6, esti la inceput, invata css si foloseste browsere cat de cat rezonabile, care macar au suport de css 2.1. Deabia dupa apucate de chinuiala cu css hack-uri, pt ca toate browserele au din pacate implementarea lor propie de css(si aici ma refer la layout engines sau cum vreti sa le ziceti http://en.wikipedia....g_Style_Sheets) ) si o sa te vezi nevoit sa introduci o multitudine de mici css hack-uri pt diverse browsere normale (chrome, Firefox, opera, safari si ie9) si destule pt niste browsere anormale (ie7, ie8) .
Si ca sa vezi de ce "!important" nu-ti merge in ie6 poftim http://stackoverflow...ot-works-in-ie6
PS -  imi cer scuze moderatorilor pt acest mesaj daca pare offtopic.

Edited by danutz0501, 13 February 2013 - 11:56.

#7
zypa
Posted 14 February 2013 - 20:32

zypa

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 13.02.2007
danutz0501, Andrey__ , va multumesc pentru lamuriri. Din pacate la servici lucrez in pauza de masa, ca acasa nu prea reusesc. Acolo am calculatorul super protejat si vechi, am doar IE6 si Firefox portable ultima versiune. Stiu ca e bine sa verifici site-ul in cat mai multe browsere si am sa zicem maximum si minimum.
In functie de erorile de afisaj schimb in css cate una-doua.

Danutz, multumesc pentru riff la css. template. Pare prea avansat momentan pentru mine.

In general, in afara de un curs basic de css si html, am inceput sa "refac" site-uri din ce in ce mai complexe, downloadate cu save as. Fiecare site este divers, se vede ca fiecare designer are modul lui de a scrie, ceea ce e destul de enervant cu bug fix-urile mereu diverse.
Pentru inceput am gasit un template si ca sa dau skip direct la html si css input il utilizez in toate proiectele mele. Vezi atasat.

Attached Files


Edited by zypa, 14 February 2013 - 20:33.

#8
danutz0501
Posted 15 February 2013 - 17:29

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Poti sa dai copy-paste, mai ales ca inveti, dar si cand dai copy-paste trebuie sa intelegi de ce ai dat, cu ce te ajuta regulile alea. Exemplu in reset-ul tau: folosesti stilizare pt elemente html 5(ma refer la display block pt section nav etc) cand tu folosesti xhtml. Si tot in legatura cu reset-ul tau nu ai o clasa pt clear fix. Ori folosesti un clear fix clasic in care adaugi inca un element html (gen <br />) ori unul pt containerul parinte.
Uita de cursurile clasice pt html si css sant super usor de invatat. Tot ce trebuie e un pic de engleza sa o intelegi si youtube Posted Image
Cauta thenewboston, phpacademy, adam khoury. Ti-am zis doar 3 canale de youtube care pe langa multe alte  tutoriale de programare, ofera tutoriale si pt html si css. Urmareste tutorialele lor + cateva situri si in 3-4 saptamani(asta depinde si de cat timp esti dispus sa investesti) o sa ai o baza destul de solida de cunostinte in legatura cu css si html
PS: scuze moderatorilor, am deviat cam mult de la subiect, sper sa nu fie considerat offtopic

#9
zypa
Posted 17 February 2013 - 19:41

zypa

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 13.02.2007
Foarte bune site-urile, prezinta, ca multe altele, toate regulile si proprietatile css si html.
Insa in momentul in care realizez un site dupa unul deja existent, fiecare are un "bug fix" unic, fara de care nu iese niciodata si dupa mai bine de 3 luni de trial and error continui sa o iau la nimereala cu clear fix-urile, overflow-ul si in unele cazuri declaratiile fortate de tip float si display:block.

Este destul de enervant sa realizez ca fara sa fac site-ul "aproape 90%" cum l-a gandit ownerul sau, urmarind ceea ce am invatat pe alte site-uri de tutoriale nu iese sub nici un fel.
In momentul respectiv adoptez fix-ul invatat in ultimul site si care, evident, nu functioneaza la urmatorul site... si tot asa!

help!

#10
danutz0501
Posted 19 February 2013 - 10:59

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
In primul rand, uitate la canalele alea de youtube care ti le-am recomandat. Nu ti-am zis sa te uiti la ele degeaba, pe langa faptul ca-ti explica despre css si html vezi si exemple practice.
Tu spui ca float si display sant declaratii "fortate", nu sant deloc crede-ma. Invata despre: pozitionari(ce se intampla cand elementul parinte are pozitionare relativa si elementul copil are pozitionare absoluta), despre box-model, despre box-sizing si cum afecteaza el box-modelu, despre float, despre "clear-fix" si ce rol are el (inlatura flot-ul si mentine inaltimea containerului parinte sa nu se prabuseasca "colapse" peste el), display (block, inline, inline-block fiind cele mai importante) si adugam si overflow aici cu toate ca nu e chiar asa de important.
Tot ce ti-am zis mai sus sant doar pt a construii "layout-ul", sant asa zisele declaratii "fortate" cum le zici tu. Ele sant defapt lucrurile (notinile) de baza pe care tu trebuie sa le intelegi inainte de a te apuca sa construiesti un "layout" in css.
Si invata calumea selectorii: directi(elemente html), clase, id, pseudo clase etc. Evita sa folosesti prea multe id-uri, evita sa folosesti !important.
SI cel mai important lucru, cu care multa "lume" de aici o sa te streseze, invata terminologia (care in css si html e chiar banala, trebuie sa inveti doar cateva notiuni).
Asimileaza notiunile astea si dupa continua cu "refacutul" de situri.

#11
DarkAngelBv
Posted 21 February 2013 - 15:41

DarkAngelBv

    === Proud owner of === ++++ Audi & Opel ++++

  • Grup: Senior Members
  • Posts: 12,747
  • Înscris: 24.03.2006
Totusi, nu a vazut nimeni ca nu suprascrie nicaieri inherit-ul?

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
+
font-family: tahoma;
font-size: 67%;
(nu stiu totusi de ce ai folosi 67% font-size-ul. 62.5 mai ziceam, ca sa ai fonturile in em, dar 67% nu prea are logica :) ).
rezulta minunatul:
margin: 0;
padding: 0;
border: 0;
font-family: tahoma;
font-size: 67%;
font: inherit;
vertical-align: baseline;

Anunturi

Bun venit pe Forumul Softpedia!
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate