CSS pentru toate "varstele"

mare prostie... nu poti face un site numai cu divuri, numai cu CSS etc...

ideea e ca  trebuie folosite impreuna...  ca un tot unitar... poti sa faci si "tabele" in CSS dar de ce sa le faci cand exista < table / > ???

Nu a zis nimeni sa faci site-uri folosind doar HTML sau doar CSS. Ideea este sa il folosesti pe fiecare in scopul in care a fost conceput, si sa separi continutul de prezentare. Nu ai decat de castigat (redesign simplu, cod html frumos si usor de citit pentru motoarele de cautare, informatiile despre prezentare sunt incarcate o singura data si tinute in cache, etc).

<table> se foloseste atunci cand ai tabele. Exemplul stupid care-mi vine acum in gand este tabela cu locatarii unei scari. Daca vrei sa faci website-ul scarii pe care locuiesti n-o sa-ti spuna nimeni sa nu folosesti <table>.

evilone, on May 31 2005, 14:40, said:

as zice XHTML acolo..

addicted, on May 31 2005, 15:55, said:

Si HTML-ul tot la aia foloseste.

http://en.wikipedia.org/wiki/HTML

Quote

true, wiki iti da dreptate:

http://en.wikipedia....yle_and_content

voiam doar sa adaug ca in html chior iti sunt permise pana la un punct formatari. i.e. font, b,i, etc

XHTML 1.0 Transitional este mai permisiv decat HTML 4.01 Strict :)
Si in HTML poti sa realizezi separarea prezentarii de continut.

Intr-adevar, XHTML are avantaje:
1) XHTML, fiind XML este mai usor de parsat.
2) XHTML, fiind XML iti permite sa incluzi alte dialecte de XML (ex: MathML, SVG, etc) folosind XML Namespaces.

Avantajul 1 cade pentru ca 99% din XHTML-ul care se gaseste la ora actuala pe net este servit ca text/html (in loc de application/xhtml+xml), asa ca browser-ul nu-l trateaza ca XML, ci ca pe un HTML mai ciudat scris.
Avantajul 2 este si el inexistent in practica din cauza ca lipseste suportul browserelor.

pan la urma, se fac lucruri frumoase rau in CSS, daca-l cunosti cat de cat si ai putin gust ies niste site-uri extraordinare, nu mai vorbesc de CMS-uri si alte Adminuri :P

abia astept sa iasa IE 7 poate mai invata niste CSS si  iti poti "da drumu" ca sa zic asa... :D

Bun...ce am inteles...obiectul este HTML...deci tot ce vreau eu sa fie in site...tabele, text...etc...le voi avea folosind codul HTML...si ca sa le dau o forma cat mai dragalasa, folosesc stilurile....CSS-ul. Buuuuuuuun. Asta am inteles.

Totusi...pentru a intelege mai bine cum ar trebui sa arate un stylesheet complet...as avea nevoie de un fisier CSS care sa aiba si formatarea textului (text link, text simplu, text pentru sectiunea de News etc) si un exemplu de layout...cu sectiuni separate pentru content...sus, jos, laterale...ei, cred ca intelegeti voi ce vreau sa spun. As vrea sa vad si eu cum arata un cod complet, cu toate astea...si dupa ce l-as studia un pic,  as putea sa imi fac si eu stilurile mele personale. Deocamdata nu prea reusesc, oricat am incercat, decat sa formatez textul, sa imi fac un meniu orizontal sau vertical, dar nimic legat de marginile acelea frumoase pentru fotografii (imagini), nimic legat de un design pe coloane etc.

Nu reusesc sa fac un cod de CSS de la cap la coada, pe care sa il folosesc pentru tot...text, tabele, margini dragute sau chiar umbre la fotografii...parca se pot face si chestii din astea...sau nu?
Chiar vreau sa invat...ceva, ceva am prins eu...dar mai e nevoie de un branci pe care sa mi-l dea cineva ca sa pot sa si folosesc ceea ce am inteles. Se ofera cineva? :P

uite un exemplu mic, il pui intr-un editor CSS cu preview si vezi cam care-i treaba
PS: n-are nici un fel de speciale asta.

BODY {
	background-color: #FFFDF6;
	margin-left: 20px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
a:link    {color:#cc3333; background-color:transparent}
a:visited {color:#cc3333; background-color:transparent}
a:active  {color:#F68427; background-color:transparent}
a:hover   {color:#F68427; background-color:transparent}
.table_main {
	border-RIGHT: #656565 1px solid;
	border-LEFT: #656565 1px solid;
	border-BOTTOM: #656565 1px solid;
	border-TOP: #656565 1px solid;
	background-color: #FFE4C4;
}
.top_men {
    background-color: #faf8ed;
    padding-left: 15px;
    border-RIGHT: #656565 0px dotted;
	border-LEFT: #656565 0px dotted;
	border-BOTTOM: #656565 0px dotted;
	border-TOP: #656565 1px dotted;
    font: bold small-caps 900 12px arial;
    color: #FF9900;
     }
.nav {
    padding: 2px;
	margin-left: 0px;
    border-RIGHT: #656565 0px dotted;
	border-LEFT: #656565 0px dotted;
	border-BOTTOM: #656565 0px dotted;
	border-TOP: #656565 0px dotted;
    font: small-caps 900 10px arial;
    color: #49657C;
     }
.pret_table {
    border: #656565 1px dotted;
    padding: 2px;
    color: #49657C;
}
.text_header{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: Maroon;
}
.text{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Maroon;
}
.field {
	border-TOP: 1px solid #F08080;
	border-RIGHT: 1px solid #F08080;
	border-LEFT: 1px solid #F08080;
	border-BOTTOM: 1px solid #F08080;
	padding-left: 4px;
	background: #eaeaea;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000099;
	background-color: #ffffff;
}
.tr_border{
    border-bottom: 1px #a2a2a2 solid
}
.table_cell_dotted {
	border-RIGHT: #656565 1px dotted;
	border-LEFT: #656565 1px dotted;
	border-BOTTOM: #656565 1px dotted;
	border-TOP: #656565 1px dotted;
	color: #4768a6;
	background-color: #E9A97A;
}
.footer {
	border-RIGHT: #C9C9C9 1px solid;
	border-BOTTOM: 1px solid #C9C9C9;
	border-LEFT: #C9C9C9 1px solid;
	border-TOP: #C9C9C9 1px solid;
	padding: 2px;
	color: #49657C;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}
.error{
	font-family:Arial, Helvetica, sans-serif;
	color:#ff0000;
	font-size: 12px;

}
.border_solid_bottom{
	border-bottom: #990000 1px solid;
}
.border_solid_botom_sides{
	border-bottom:  #990000 1px solid;
	border-left:  #990000 1px solid;
	border-right: #990000 0px solid;

}

}

Sau o chestie facuta de mine acum cateva zile:

http://www.c-ovidiu.tk/test/admin/

Vezi cum arata fara CSS :)

Ce sa  zic @add...asa  branci rapid mai zic si eu...chiar acum ma apuc sa studiez...
Ma uit acum si la site-ul tau @evilone...

Dar cum pot avea un preview la codul pe care mi l-ai dat @add?...eu folosesc Dreamwever...si pana nu dau ceva informatii in HTML si apoi sa aplic codul nu imi dau seama...se pot vedea stilurile si altfel decat asa? Sau asa se face...cod in html si apoi aplicat CSS-ul?
Pentru ca la mine e dezactivata la stiluri partea de preview...asa cum e la html-urile obisnuite...

no iti trebuie un CSS Editor cu preview, eu am Top style, vezi ca are si o varianta lite, free care isi face treaba.

OK, il caut acum ...si ce ma mai chinuiam eu...da-i, si lupta, si da-i, si lupta si Dreamwever-ul saracutul...ce putea sa faca el...ok...acum il caut...multumesc.

Cum vine asta...de preferat sa lucrezi cu div-uri si nu cu tabele? Adicatelea...???

Adicalea tabelele se folosesc atunci cand ai ... tabele. Nu se folosesc pentru a aranja diverse chestii in pagina.

Edit: vezi pagina asta.

Edited by evilone, 01 June 2005 - 10:55.

@evilone: am inteles multe pornind de la site-ul pe care mi l-ai recomandat.

Si totusi...ce cod as putea folosi la css si la html...ca sa pot avea o pagina care sa arate in felul urmator:

sus - poze cu borduri diferite
sus - navigation menu
stanga - caseta cu margini in care sa pot introduce text
mijloc - caseta cu margini in care se afla textul principal
dreapta - alta caseta cu margini

Sau ceva de genul asta:http://www.glish.com/css/#resources

Sa nu ma bombaniti...asa e cu incepatorii astia...le dai un deget...si ei nu vor toata mana ci mai multe maini de ajutor.
:P

Sa inteleg ca ar trebui sa imi iau la revedere de la topicul asta...gata, nu mai e nimeni interesat in ajutorarea unui suflet de CSS ratacit? Dom'le...eu tot astept un raspuns la intrebarea precedenta...sau macar inca niste link-uri noi-noute...

E ceva ce imi scapa dupa ce am studiat site-urile cu tutoriale. Am inteles cam cum sta treaba cu codurile din css...dar ma incurc cand vine vorba in html sa fac un cod la care sa pot aplica CSS-ul si apoi sa iasa totul cum vreau. In unele site-uri cu tutoriale am gasit codul CSS si alaturi codul HTML la care trebuia aplicat CSS-ul...ei, cam asa ceva caut  pentru a putea intelege pana la capat.
Deci...se ofera cineva? :)

piscotel2004, on Jun 3 2005, 12:36, said:

Pai ideea e ca scrii cod care sa aiba sens. Adica: ai titluri, folosesti <h1> - <h6>; ai un meniu, folosesti un <ul>; ai text, folosesti <p>; vrei sa formatezi textul din interiorul paragrafului ala, folosesti <strong>, <em> or whatever. Poti sa folosesti <div>-uri ca sa structurezi documentul in sectiuni gen header, content, footer, etc.

Dupa ce ai scris HTML-ul, te apuci sa-l formatezi cu CSS. Fiecare declaratie CSS are un selector (care poate fi un nume de tag, o clasa, un id al unui element din HTML) si o lista de proprietati care definesc cum arata obiectul selectat.

Mai departe, nu stiu ce lamuriri as putea sa-ti dau. In principiu trebuie sa studiezi specificatiile CSS. Pentru pozitionare studiaza in special chestii gen display, float, margins, paddings, etc.

Succes :)