Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...
 Rezultat RMN

Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor
 Discuții despre TVR Sport HD

Cost abonament clinica privata

Tremura toata, dar nu de la ro...

Renault Android
 Recomandare bicicleta e-bike 20&#...

Bing-Content removal tool

Nu pot accesa monitorulsv.ro de l...

Cum sa elimini urmele de acnee?
 

Tutorial xhtml/css

- - - - -
  • Please log in to reply
62 replies to this topic

#19
gumball3000

gumball3000

    ...

  • Grup: Senior Members
  • Posts: 49,649
  • Înscris: 24.09.2006
crede ca scrie destul de clar ce erori ai: http://validator.w3....e...ine&group=0

#20
DoruDM

DoruDM

    New Member

  • Grup: Members
  • Posts: 5
  • Înscris: 09.02.2007
Salut, nu stiu dak postez unde trebue da am o problema legata de css si de bug-urile IE-ului poate ma puteti voi ajuta.
In principiu IE-ul nu tine cont de un margin, codu este urmatorul:
#stylefour{
margin-left:16px;
width:893px;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(img/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #00b2d9; }

Attached Files



#21
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostDoruDM, on Mar 20 2008, 17:24, said:

Salut, nu stiu dak postez unde trebue da am o problema legata de css si de bug-urile IE-ului poate ma puteti voi ajuta.
In principiu IE-ul nu tine cont de un margin, codu este urmatorul:
#stylefour{
margin-left:16px;
width:893px;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(img/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #00b2d9; }


Salut, nu ai dat destule date ca sa imi dau seama despre ce este vorba. Cu doua poze si o declaratie css nu e mult de spus. Incearca sa dai tot css-ul si html-ul. Da-le pe PM, daca nu vrei sa le postezi.

Verifica Doctype-ul, este posibil ca ie7 sa functioneze in quirksmode, si se comporta ca ie5.5.

#22
techgen

techgen

    New Member

  • Grup: Members
  • Posts: 2
  • Înscris: 21.02.2008
In speranta ca nu voi devia de la subiectul topicului, imi voi exprima si eu nedumerirea vis-a-vis de div-uri si css-uri. Nu pot spune ca ma incadrez in categoria programatorilor web, daram facut si eu 3 site-uri. Pana acum am lucrat cu frame-uri. Darcand e vorba sa le promovezi intr-un motor de cautare, apar probleme. Motoarele de cautare nu se impaca, cu frame-urile. Si atunci a trebuit sa caut o solutie alternativa. Aceasta poate fi div-ul si css.
Asa cum au aratat xnoise si jumping jack in exemplele lor, am creat si eu (intr-un scop didactic) un site personal bazat pe divuri si css-uri: http://silviugorea.techgenium.ro . Si functioneaza. Problema unde apare: linkul din meniu catre divul content. Fiind in necunostinta de cauza, eu am creat cate o pagina pentru fiecare link in care am copiat toate informatiile din pagina index, mai putin contentul. Acesta fiind diferit pt fiecare pagina. Sa fie oare acesta modul de lucru cu divuri? La 100 de linkuri se creeaza 100 de pagini in care difera doar contentul? Din cate stiu eu, target accepta doar frameul si iframeul. Nu si divul.

#23
wirus

wirus

    New Member

  • Grup: Members
  • Posts: 9
  • Înscris: 03.10.2006

View PostJumping Jack, on Mar 4 2008, 16:53, said:

Afisarea unei poze la hover peste un cuvint.

hehe... Am gasit adineauri o problemuta pe un alt topic, si m-am gindit sa postez aici rezolvarea. Este vorba de afisarea unei poze la mouseover (hover, de fapt).  Adica, o poza incarcata in sursa sa nu fie aratata decat la hover peste un cuvint. Iata mai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>dropdown list</title>
<style type="text/css">
* {margin:0;padding:0; list-style:none;border:none}
body {font:normal 62.5%/1.4 verdana, arial, helvetica, sans-serif;color:#000;background:#fff}
a:link,a:visited,a:hover,a:active {outline:0}
a {text-decoration:none;color:#c33}
#wrapper {height:500px;position:absolute;left:50%;top:50%;margin:-250px auto auto -460px;width:920px;font-size:120%;background:#ccc}
a.poze{position: relative;}
a.poze:hover {background-color: transparent;z-index: 50;} /*nu scoateti background:transparent, altfel nu mai functioneaza in ie6 */
a.poze span{ position: absolute;background-color: #fff;padding: 0;left: -1000px;visibility: hidden;text-decoration: none;}
a.poze:hover span{ visibility: visible;top: 0;left: 70px;text-decoration:none;background:#fff;color:#000}
a.poze span img{ border: 1px solid #aaa;}
</style>


</head>
<body>

<div id="wrapper">
<p> Lorem Ipsum is simply dummy text <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>
Lorem Ipsum is simply dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body></html>




deci ITI MULTUMESC DIN INIMA !!!!!!!!!!! CAUTAM CHESTIA ASTA DE 1 SAPTAMANA!!! dar am o singura intrebare!? Cum pot face ca poza care o arata sa vina dupa mouse. eu fac ca sa apara poza marita de la o poza mai mica si am nevoie ca poza marita sa vina dupa mouse. ITI MULTUMESC INCA O DATA

#24
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
@techgen : un link pointeaza catre o pagina noua, niciodata catre un div (sau un element), exceptand cazurile de named anchors. Acum: daca ramai strict a HTML, trebuie sa faci 100 de pagini separate ca sa ai 100 de pagini pe site. Ca sa nu faci chestia asta, s-au inventat limbajele de programare web (ASP, PHP, JSP, ROR-asta e un framework, don't mind it). Prin intermediul unui limbaj de programare poti pastra un singur schelet al paginii (sa zicem totul in afara de continut) si pe baza a ce tasteaza utilizatorul in bara de adresa din browser sa ii servesti alt continut pentru acelasi schelet. De ex userul poate tasta: http://www.tc.com/page.php?x=1 [se afiseaza o pagina] si http://www.tc.com/page.php?x=2 [se afiseaza alta, pastrand scheletul paginii anterioare]

#25
wirus

wirus

    New Member

  • Grup: Members
  • Posts: 9
  • Înscris: 03.10.2006
am si eu problema asta deci in Firefox cand tin mosu pe poza imi apara poza marite mai in jos decat ar trebui dar daca ma duc in IExplore 6.0 cand tin cursoru pe poza imi apare unde trebuie!! unde am gresit??

Attached Files



#26
techgen

techgen

    New Member

  • Grup: Members
  • Posts: 2
  • Înscris: 21.02.2008
Multumesc xnoise pentru explicatii. Credeam ca si html e un limbaj de programare. Oarecum. Poate ca m-am inselat. Pana aici mi-am cam dat si eu seama de faptul ca site-ul este construit pe un schelet, vazand ca nu se schimba pagina, ci doar referinta continutului din ea. Dar daca vreau sa inserez si pagini php in site, atunci trebuie sa-mi contruiesc tot scheletul pe php ? Neavand experienta, stiti cumva un editor web care are si template-uri de site-uri construite pe un astfel de schelet ? In felul acesta e mult mai usor sa inveti practic, vazand ce se intampla in codul sursa, decat sa citesti de nebun o carte intreaga. Eu prefer sa citesc o carte si sa caut in dictionar cuvintele necunoscute, decat sa iau dictionarul si sa-l invat de la a la z, cuvant de cuvant. Pierdere de vreme si energie. ;)

#27
The_recruit

The_recruit

    Member

  • Grup: Members
  • Posts: 276
  • Înscris: 29.08.2005
Daca tot suntem la capitolul de la A la Z la construirea unui website, m-am gandit ca trebuie expuse si lucrurile de care se tin cont in domeniul optimizarii pe internet la constructia unui website, la inceputul si pe parcursul acestuia. (de aceea am considerat sa postez aici si nu la aria SEO a forumului)
Pentru SEO sau search engine optimization nu exista o reteta a succesului, dar e recomandat sa tii cont de optimizarea websiteului tau chiar de la inceput, asta daca urmaresti sa apari pe prima pagina a unui motor de cautare, lucru care in mod sigur majoritatea il doreste.
Inainte sa incepem as vrea sa dau o scurta definitie a Keywordului sau in traducere libera "cuvant cheie":Keyword (in cautarea pe Internet), este un cuvant sau o fraza folosita pentru a gasi rezultate utile in cautarile pe internet, (cf. Wikipedia.com).

La inceputul constructiei unui website trebuie sa dai nume relevante la paginile pe care le creezi, exceptie facand pagina de intrare care are intodeauna numele de index.html, iar la celelate e mai bine sa le dai nume friendly cum ar fi "contact", "despre", "portofoliu" etc.
Totusi dpdv SEO e recomandat ca paginile sa aibe nume mai sugestive cum ar fi "contact_numefirma", "despre_masini" sau orice cuvant care are o semnificatie puternica in legatura cu continutul paginii. Personal folosesc semnul "_" pentru a uni cuvintele dar "-" este a fel de potrivit, si asta din cauza pe care cu totii o stim, cum ca nu este permisa spatierea cand la fisierele ce vin uploadate pe internet.

De asemenea e importanta secventa in care vin elementele in sectiunea HEAD si cum urmeaza: TITLE Tag prima data, META DESCRIPTION Tag al doilea si META KEYWORDS META Tags la urma.

Si acum sa vorbim putin despre elementele de mai sus:

TITLE Tag
Este unul dintre cele mai importante elemente deoarece este cel care apare ingrosat (si sare in ochi implicit) in cautari pe motoarele de cautare iar acestea il iau ca pe un element foarte important. Este recomandat ca titlul sa fie cuprins intre 6 si 12 cuvinte, toate sa fie cuvinte cheie si sa aibe suport, adica sa le regasesti in cuprinsul paginii.
Exemplu:
<title>Nume companie - scurta descriere</title>
sau
<title>Nume website -keyword 1, keyword 2, keyword 3</title>
si lista poate continua dar e suficient ca sa va faceti o imagine.

META DESCRIPTION Tag
Acest element este si el important deoarece in cautari pe search engine apare chiar sub Title tag si poate oferi utilizatorului o scurta descriere despre ce este pagina si poate sa-si faca o idee daca este ceva ce il intereseaza sau nu (a se citi: daca iti viziteaza site-ul sau nu)
Exemplu:
 <meta name="description" content="Descrierea este recomandat sa fie intre 12 si 24 de cuvinte.">

META KEYWORDS META Tags

In ultimul timp se vorbeste ca marile motoarele de cautare cum ar fi Google nu mai tin cont de cuvintele cheie specificate in Keywords tag, dar este puternic incurajat ca acestea sa se foloseasca deoarece nu ai nimic de pierdut doar de castigat. Deci le folosim.
Aici trebuie sa faci research, sa se regaseasca in continut, sa fie cuprinse intre 0 - 48 cuvinte. Delimitarea intre ele se face prin virgula urmat de spatiu.
Exemplu:
<meta name="keywords" content="cuvant, cuvant cheie, cuvinte cheie cautate">
De remarcat ca mai sus sunt 6 cuvinte dar numai 3 secvente de cautare.

CONTINUTUL
Dintre toate continutul pe care il oferi este cel mai important din toata afacerea. Continutul nu este obligatoriu text, sa nu uitam aici de one milion dolar page unde sunt doar reclame dar acela poti zice ca face o exceptie. De asemenea poti avea imagini, web tools sau mai stiu eu ce, dar fara text suport este greu sa reusesti. De acceea textul pe care il ai sa fie scris pentru utilizatori si nu pentru motoarele de cautare. Totusi un text bine gandit prin care sa ai keywords face diferenta de multe ori.

Orice motor de cautare nu poate citi imaginile si flash! Deci evita sa ai un website in care continutul este plasat in imagini si/sau flash. Imaginile dau viata websiteului iar flash-ul nefolosit in exces poate creea lucruri minunate. De accea imaginile pe care le folosesti trebuie ca atributele TITLE si ALT sa fie descriptive si la obiect, conform Google.
Exemplu:
<img src="iamgine.jpg" alt="text alternativ">
in cazul acesta textul alternativ tine loc unei imagini cand aceasta nu apare.
<img src="iamgine.jpg" title="textalternativ" alt="text alternativ">

aici apare si cand tii mouse-ul deasupra.
TITLE se foloseste si la alte elemente cum ar fi:
<a href="#" title="Populatia Romaniei - numar locuitori, demografie">Populatia Romaniei</a>
pentru unele motoare de cautare care interpreteaza textul din TITLE ca si continut,
ceea ce ajuta mult la densitatea cuvintelor cheie dorite.

Un lucru care este important dupa terminarea unui website este subscrierea la motoarele de cautare cunoscute, urmata de link building. La link building este importanta calitatea nu cantitatea, si ca websiteurile unde il subscrii sa aiba minim page rank egal cu cel pe care il ai tu si continut relevant cu cel al websiteului tau. Nu ajuta cu aproape nimic daca cineva intra pe un website de reparatii televizoare si iti vede reclama cum ca tu instalezi faianta.
Cu astea in minte cand faci un website, un design si continut pe masura poti sa fi asigurat ca o sa ai vizitatori de pe marile motoare de cautare. E bine de stiut si  de serviciul adsense de la google sau alte websiteuri asemanatoare prin care poti pune reclame pe websiteul tau si sa fii platit cand cineva da click. De asemenea cu cat e mai popular este websiteul tau cu atat  mai multe persoane vor vrea sa le faci reclama prin bannere sau alte metode.

Toate se leaga acuma: daca ai un site optimizat si promovat corespunzator o sa ai parte de vizitatori multi si venit pe masura din reclame si/sau serviciile oferite. Succes!

#28
cristi12300

cristi12300

    Junior Member

  • Grup: Members
  • Posts: 92
  • Înscris: 13.11.2006

View PostJumping Jack, on Mar 4 2008, 17:53, said:

Afisarea unei poze la hover peste un cuvint.

hehe... Am gasit adineauri o problemuta pe un alt topic, si m-am gindit sa postez aici rezolvarea. Este vorba de afisarea unei poze la mouseover (hover, de fapt).  Adica, o poza incarcata in sursa sa nu fie aratata decat la hover peste un cuvint. Iata mai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>dropdown list</title>
<style type="text/css">
* {margin:0;padding:0; list-style:none;border:none}
body {font:normal 62.5%/1.4 verdana, arial, helvetica, sans-serif;color:#000;background:#fff}
a:link,a:visited,a:hover,a:active {outline:0}
a {text-decoration:none;color:#c33}
#wrapper {height:500px;position:absolute;left:50%;top:50%;margin:-250px auto auto -460px;width:920px;font-size:120%;background:#ccc}
a.poze{position: relative;}
a.poze:hover {background-color: transparent;z-index: 50;} /*nu scoateti background:transparent, altfel nu mai functioneaza in ie6 */
a.poze span{ position: absolute;background-color: #fff;padding: 0;left: -1000px;visibility: hidden;text-decoration: none;}
a.poze:hover span{ visibility: visible;top: 0;left: 70px;text-decoration:none;background:#fff;color:#000}
a.poze span img{ border: 1px solid #aaa;}
</style>


</head>
<body>

<div id="wrapper">
<p> Lorem Ipsum is simply dummy text <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>
Lorem Ipsum is simply dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body></html>




in Firefox merge, in opera NU ...

#29
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View Postcristi12300, on May 3 2008, 11:27, said:

in Firefox merge, in opera NU ...

Ai dreptate. :(

Multam de obesrvatie.

Am gasit si ceea ce il facea sa nu mearga in opera, insa nu am inteles inca de ce... Se pare ca lui Opera nu-i placea faptul ca div#wrapper era pozitionat absolut. Pina si saracia de ie6 executa chestia asta corect, si EL este cel care are bube-n cap la capitolul positioning, nu Opera. Am modificat declaratia pentru #wrapper, asa:

#wrapper {height:500px;margin:100px auto;width:920px;font-size:120%;background:#ccc}

si arata poza si in opera. Insa tot are un bug: Uneori este taiata poza la limita lui #wrapper. O sa mai cercetez si revin cu o solutie.




View Postwirus, on Apr 5 2008, 20:27, said:

am si eu problema asta deci in firefox cand tin mosu pe poza imi apara poza marite mai in jos decat ar trebui dar daca ma duc in IExplore 6.0 cand tin cursoru pe poza imi apare unde trebuie!! unde am gresit??

Arata codul (css si html), eu nu stiu unde ai gresit numai vazind cele doua poze.

#30
cristi12300

cristi12300

    Junior Member

  • Grup: Members
  • Posts: 92
  • Înscris: 13.11.2006

View PostJumping Jack, on May 4 2008, 22:06, said:

Ai dreptate. :(

Multam de obesrvatie.

Am gasit si ceea ce il facea sa nu mearga in opera, insa nu am inteles inca de ce... Se pare ca lui Opera nu-i placea faptul ca div#wrapper era pozitionat absolut. Pina si saracia de ie6 executa chestia asta corect, si EL este cel care are bube-n cap la capitolul positioning, nu Opera. Am modificat declaratia pentru #wrapper, asa:

#wrapper {height:500px;margin:100px auto;width:920px;font-size:120%;background:#ccc}

si arata poza si in opera. Insa tot are un bug: Uneori este taiata poza la limita lui #wrapper. O sa mai cercetez si revin cu o solutie.






Arata codul (css si html), eu nu stiu unde ai gresit numai vazind cele doua poze.

da... e greu sa multumesti toate browserele ... sper ca nu te-ai suparat ca am zis ... dar m-am gandit ca e bine de stiut .. in fine.. nu multa lume foloseste opera .. :)

#31
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 398,226
  • Înscris: 08.10.2015
Cred că se potrivește aici.
Am făcut un video-tutorial în care am arătat cum procedez eu când tai un site. Este primul meu video-tutorial și încă mai am de învățat ce și cum. Desigur, am nevoie de ceva feedback :)

Aștept întrebări fie aici fie pe blog (doar în limba engleză). Enjoy!

#32
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
foarte tare @ionutz. :P nu mai scrisese nimeni de mult pe aici. Eu incerc sa pun pe picioare site-ul de articole legate de html/css/js dar mai am de lucru. :) sper sa revin in 1-2 luni cu un beta.

#33
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 398,226
  • Înscris: 08.10.2015
Well.. între timp eu tot adaug articole pe wedeveloper blog. Scriu în engleză deoarece românii ce nu știu decât limba natală (și aia vorbită în doi peri) preferă să intre pe forumuri fără să se deranjeze să folosească vreun motor de căutare, așteptând totul mură în gură :)

#34
nick_bz

nick_bz

    Junior Member

  • Grup: Members
  • Posts: 57
  • Înscris: 11.12.2007
sal am si eu o intrebare imi fac o pagina html in Notepad pt la sc, si vreau ca din pagina mea sa pot accesa o alata pagina, ce tag trebuie sa folosesc?

Edited by nick_bz, 01 June 2008 - 11:01.


#35
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
pentru "linking" se foloseste tagul <a> [ancora]. Mod de folosire: <a href="link_ul catre noua pagina">Numele noii pagini</a>

#36
nick_bz

nick_bz

    Junior Member

  • Grup: Members
  • Posts: 57
  • Înscris: 11.12.2007

View Postxnoise, on Jun 1 2008, 12:45, said:

pentru "linking" se foloseste tagul <a> [ancora]. Mod de folosire: <a href="link_ul catre noua pagina">Numele noii pagini</a>

Multumesc

Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

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