learning CSS
Pagini: 1, 2


RDORDO


Salutare

Cine imi poate recomanda si mie niste resurse pentru invatarea aprofundarea lucrului cu css??
(si asupra stilului de lucru cu CSS)


Multumesc mult
add
http://www.w3schools.com/css/default.asp
 
again
http://manuale.sn.com
RDORDO
Oau, that was fast.....MULTUMESC MULT
ma pun pe citit...

dar daca mai ai timp as mai avea o intrebare:

am ceva de genul:


reportstitle {
..........
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#5566ff;
......

}


si apoi

<div class="reportstitle" align="left">
Un Scris Aici
</div>



Daca as vrea pentru cuvantul "SCRIS" sa am o alta culoare....este bine :

<div class="reportstitle" align="left">
Un <font color="#000099">scris </font> aici
</div>

sau e mai bine tot cu un div?

Meri mult inca o data
aolex
scrisul ala il faci paragraf sau header sau ce vrei tu ...

cat despre <div align='left'> , de ce mai folosesti css ?

#div {
text-align:left;
}
add
fara tagul FONT ... pune <span style="..."> </span>
evilone
Și mai bine ar fi să folosești tag-uri gen <em> sau <strong> și eventual să le aplici ălora CSS.
 
RDORDO
OK...am pricipit....acum revin la citit, invatat si la pus in practica....

multumesc mult inca o data

si tot respectul pentru calitate si rapiditate...respect!
Evil's Toy
uite si aici un curs accelerat de css smile.gif . e foarte bun pentru inceput si nu te pierzi in detalii plictisitoare.
RDORDO


Salut

Va mai deranjez cu o mica problema, daca aveti putin timp:
am in style.css :


.reportstitle {
width:600px;
height:25px;
vertical-align:bottom;
margin-top:30px;
margin-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#990000;
border-bottom-width:1px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#5566ff;
text-indent:0px;
}

.reportsBox
{
width:600px;
margin-left:70px;
margin-bottom:30px;
border-bottom-style:solid;
border-bottom-color:#990000;
border-bottom-width:3px;

}


iar in pagina:

<div class="reportsBox">
<div class="reportstitle">
Titlu aici
</div>
</div>



In IE si Opera imi apare cum as fi vrut (adica scris Titlu aici subliniat cu 2 linii)......dar in Firefox apare sris textul fara nici o formatare .....de ce???? (sunt si eu la inceput in css asa ca fiti blanzi va rog worthy.gif


multumesc mult
i0nutzb
cred că ai o problemă w00t.gif la mine arată la fel și în ie și în ff: titlu albastru, subliniat cu două linii...
hint: în loc de
CODE
border-bottom-style:solid;
border-bottom-color:#990000;
border-bottom-width:3px;

poți scrie
CODE
border-bottom:3px solid #990000;
wink.gif
RDORDO
Salut

Da, ai perfecta dreptate....problema era: atat timp cat aveam fisierul .css deschis in editor, in FF nu se vedea bine...cand am inchis fisierul din editor si-a revenit si in FF si de atunci merge bine w00t.gif

Multumesc mult si scuzati problema inexistenta

Si multumesc pentru hint
BoInG
Daca vrei ceva mult mai simplu pentru a invata CSS si ai si ceva viteza la download, iti recomand un tutorial video - il casesti pe torenti cautand dupa "css 2.0 lynda" ( 300mega )
RDORDO
Salutare

Revin si eu cu o intrebare, proabil stupida dar careia nu am reusit sa-i dau de cap huh.gif

Presupunem o pagina nou complet goala. As vrea sa afisez un text, inconjurat de un chenar in centru paginii, folosind css

Am reusit textul coolspeak.gif , chenarul si alinierea pe orizontata....M-am poticnit la alinerea pe verticala...Deci cum as putea sa fac astfel incat toata smecheria sa fie centrata pe mijlocul paginii, vertical? (banuiesc ca si la resize fereastr browser ramane centrata, nu? )


10q
aolex
cu div-uri e ceva mai greu folosind DOAR css dar din moment ce pe orizontala merge cu margin:0 auto;, un margin:auto; ar trebui (!!teoretic!!) sa faca acelasi lucru si pe verticala... incearca smile.gif!
RDORDO
Salut

Multumesc mult de tot pentru raspunsuri...dar sunt la inceputuri rau de tot asa ca m-ai cam pierdut prin ceata
Am incercat cu margin si din pacate nu am reusit . La partea cu alianiatul pe orizontala eu folosisem text-aling:center....ceea ce dupa cum zici nu era calea corect

Asa ca daca mai aveti putin timp:
1. Care este calea CORECTA de a realiza alinierea in centrul paginii, nu trebuie neaparat sa fie numai css, ci cum ati face voi daca ar trebui sa aveti o casuta de log in de exemplu asezata in centru paginii

2. @aolex....daca ai putin timp sa-mi explici mai clar la ce te-ai referit, mie personal cu margin nu mi-a mers nici un fel de aliniere sad.gif(

Multumesc mult de tot
aolex
pai hai sa vedem... un exemplu banal:

in css, avem un atribut cu valori. sa luam de exemplu padding.

padding:5px;

din moment ce avem doar 1 valoare, ea se aplica celor 4 (top, right, bottom si left). daca vrem padding de 5 px sus si jos, iar in dreapta si stanga de 10px, punem asa:

padding:5px 10px;

daca vrem padding diferit in toate 4 directile, putem folosi:

padding:top right bottom left;

si anume:

padding:25px 10px 3px 101px;

nu uita, valorile merg in directia ceasului... incepi cu sus (ora 12), continui cu dreapta (ora 3) , mai departe ajungem jos (ora 6) si in sfarsit stanga (ora9)! acuma, sa revenim la margin... daca vrei sa centrezi un div pe orizontala (de la dreapta la stanga), un margin:0 auto; e de ajuns. sa vedem codul:

0 reprezinta marginile pentru top si bottom iar auto reprezinta valorile pentru stanga si dreapta pentru ca avem doar 2 valori, iti aduci aminte?

din moment ce codul de mai sus centreaza un div pe verticala, acest cod ar putea sa il centreze si pe orizontala:

margin:auto;

care este egal cu:

margin:auto auto;

care este egal cu:

margin:auto auto auto auto;

nu stiu daca merge (lene sa testez) dar teoretic ar trebui...
i0nutzb
pe verticală nu merge...
aș avea ceva completări...

margin:0 1px 2px;
înseamnă că ai 0 px top , 1 left&right și 2 bottom
margin 0 1px;
înseamnă că ai 0 top&bottom și 1 left&right

cred că cea mai simplă cale de a alinia vertical este să pui o imagine de 1px lățime și 100% înălțime...
RDORDO
Salut

Multumesc mult pentru raspuns si pentru rapiditate...adica la doar 10 minute toata explicatia aia, tot respectul


Partea proasta e ca tot nu am reusit....am inteles ce ai zis dar din pacate nu mi-a mers....a mers pe orizontala dar pe verticala tot nu merge

Un test scris nu prea frumos dar care ilustreaza este

<body>

<div style="margin:auto; width:200px; height:200px;">

Cucu Rigu

</div>

</body>

Chestia asta imi centreaza pe mijlocul paginii, dar numai pe orizontala....pe verticala este in partea de sus a paginii
aolex
inseamna ca nu se poate, cu toate ca teoretic... biggrin.gif.
RDORDO
Aha, ok.....
dar atunci care ar fi solutia? un tabel cu height de 100% si vertical align pe mijloc?

10x a lot
i0nutzb
CODE
<body>

<div style="vertical-align:middle;">
<img src="spacer.gif" width="1" height="100%" alt="" align="middle" />
<div style="margin:auto; width:200px; height:200px;">

Cucu Rigu

</div>
</div> <!-- /wrapper -->
</body>


așa ar trebui să meargă... smile.gif să existe spacer.gif în directorul html smile.gif
sebulbus
spacer.gif degeats the purpose of css.

ok, nu merge centrarea pe verticala din urmatorul motiv:
priviti pagina ca ceea ce se vede prin viewportul browserului. dar de fapt pagina trebuie privita ca rola de banda dintr-o caseta, tu vezi portiunea curenta (presupunem ca esti la un capat) dar se poate derula in jos, aducand o alta portiune in vizibil.

ca atare, mijlocul a ce? si astfel s-a elimintat alinierea verticala.

daca vrei un surogat de centrare pe verticala, da-i un padding-top sau un margin-top si un height fix. tinteste pe rezolutia cea mai folosita si hope for the best.
aolex
sau lucreaza in procente...
RDORDO
Salut

si o ultima intrebare legata de problema:

Care dintre urmatoarele 2 solutii ar fi mai "buna"(in concordanta cu noile "standarde", directii)???

1. cea propusa de ionutzb SAU
2.

<body>
<table height="100%">
<tr>
<td valign="middle">
<DIV style="margin:auto; border:2px; width:120px;">
Cucu bau
</DIV>

</td>
</tr>
</table>

</body>

Multumesc mult

@sebulbus: in varianta propusa de tine, pe langa rezumarea la o singura rezolutie, in momentul redimensionarii ferestrei browserului nu se mai pastreaza pozitionarea centrara, nu?
Pagini: 1, 2
Aceasta este o versiune simplificată a paginii originale. Pentru a vizita versiunea originala click aici.