Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Pilonul II - date de piata, tendi...

Geam la baie: va place sau nu va ...

izolație balcon exterior
 Izolatie balcon inchis

Device atasat instalatie PV

Greseala mp - 1/2 - in actul de v...

[CUM] SPV ANAF - Gestionare cont ...
 Presiune gaz scazuta

motocultor progarden 853/854

Am SRL in Romania dar vreau sa ma...

Upgrade Rami Laptop LENOVO IdeaPa...
 Ma dispera Lightroom

Salariu prea mare - ordin de mini...

Servodirectie Massey Ferguson 35x...

Izolare pod casa
 

Tutorial xhtml/css

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

#37
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007
Ei, si ca sa vedeti si voi cu cine aveti de-a face, abia azi am regasit topicul asta!!! Cred ca am nevoie de un hard disk nou! Si nu ma refer la computador...

Buna seara!

#38
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006
http://forum.softped....php?act=Search îți permite să găsești ușor orice cu parametrii corecți.

#39
Jumping Jack

Jumping Jack

    Member

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

View PostOriginalCopy, on Sep 19 2008, 22:31, said:

http://forum.softped....php?act=Search îți permite să găsești ușor orice cu parametrii corecți.

Da, stiu, glumeam. Eu nu il cautam, am dat peste el din intimplare. Daca voiam, il gaseam eu, fii pe pace :)

#40
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
Incerc sa trec si eu de la layout cu tabele la layout cu DIV-uri si am o nelamurire. Care este de fapt rolul clasei "clearfix"?
Am citit de cateva ori si tot n-am priceput. Mi se pare ca are o definitie foarte complicata.

Quote

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Inteleg ca aceasta clasa se foloseste pentru "clearing" in felul asta: <div class="clearfix">...</div>. Asta inseamna ca toate elementele ce urmeaza acelui <div> se vor pozitiona sub el? Nici intr-un caz la dreapta sa strice cumva layout-ul?

Quote

atentie mare la clasa clearfix. Sub nici o forma aceasta nu trebuie sa dispara pentru ca veti avea surprize neplacute [atat pe IE cat si pe FX si alte browsere]. Aceasta clasa inlocuieste clasicul <br style="clear:both"> folosit pt clearing. De ce aceasta clasa si nu <br>? pt ca nu adauga cod suplimentar in sursa.
Daca e doar de asta, de ce nu scriu clasa "clearfix" in felul asta:
.clearfix {clear:both;}
De ce nu e suficient asa?

#41
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 245,290
  • Înscris: 08.10.2015
1) de ce nu e suficient?
Browserele moderne știu mai mulți pseudoselectors. Prin urmare, după clasa clearfix se adaugă un punct caruia i se dă clear both. Altfel spus, clear:both nu se dă clasei ci punctului inserat după
2) cum se folosește?
<div class="clearfix">
<div style="float:left"></div>
<div style="float:right"></div>
</div><!--/.clearfix-->
3) de ce?
păi te scutește de clear:both, care îți poate crea ceva probleme uneori cqnd ai mai multe float-uri unul într-altul

Sper că ai înțeles :)

#42
floryyn

floryyn

    Senior Member

  • Grup: Senior Members
  • Posts: 4,661
  • Înscris: 30.07.2005
Văd că n-a mai postat nimeni pe acest tutorial din noiembrie 2008 și e păcat, pentru că fără CSS nu mai faci nimic în ziua de azi în materie de layout de site-uri. Eu am învățat singur și încă mai învăț și n-am timp pentru câte sunt de învățat în domeniu!

De aceea vin cu ceva util zic eu pentru începătorii într-ale CSS-ului: http://line25.com/articles/15-must-read-articles-for-css-beginners

#43
DacicDracon

DacicDracon

    New Member

  • Grup: Members
  • Posts: 3
  • Înscris: 21.07.2009

View PostJumping Jack, on 4th March 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>

Este ceea ce cautam cu o singura deosebire. Eu as vrea ca imaginea sa se deschida lateral stanga sau dreapta si sa folosesc o imagine care are integrat un frame deoarece as vrea sa evit flash. Ma poate ajuta cineva?

Edited by DacicDracon, 18 April 2010 - 10:35.


#44
archaeus5

archaeus5

    The voice of reason

  • Grup: Senior Members
  • Posts: 8,730
  • Înscris: 03.12.2006
Hai fratilor! Nu mai continua nimeni? :worthy:

#45
unu

unu

    Active Member

  • Grup: Members
  • Posts: 1,564
  • Înscris: 05.11.2005
ok, postez eu un exemplu de sablon xhtml/css valabil pt 95% dintre site-uri.
voi include comentariile in codul sursa.

un exemplu live, bazat pe acest sablon, aici.


xhtml, in afara de clase, structura va ramane aceeasi pe intregul site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Titlu</title>
  <style type="text/css">
	@import "style.css";	/* import css pt. compatibilitatea cu browserele antice, care vor afisa doar text (NS, IE5<) */
  </style>
</head>

<body class="fixed col-2-right no-js">
<!-- tipul layoutului, definit in CSS:

	 col-1		 - o coloana (pagina fara bare laterale)
	 col-2-left	- 2 coloane (principala + bara laterala stanga)
	 col-2-right   - 2 coloane (principala + bara laterala dreapta)
	 col-3		 - 3 coloane (principala + bara laterala dreapta + bara laterala stanga)
	 col-3-left	- 3 coloane (principala + 2 bare laterale stanga)
	 col-3-right   - 3 coloane (principala + 2 bare laterale dreapta)

	 fixed		 - latimea paginii fixa (dupa 960gs)
	 fluid		 - latimea paginii elastica (100%), dar tot trebuie limitata in CSS pe la 1400-1600px pt a mentine textul usor de citit si la rezolutii mari

	 no-js		 - aceasta clasa va fi eliminata cu javascript, foarte util daca vrem sa aflam daca utilizatorul are sau nu javascript activat

-->

 <!-- pagina -->
 <div id="page">

	 <!-- antent -->
	 <div id="header">

		 <!-- continutul propriu-zis al antetului -->
		 <div class="page-content clear-block">

		   <h1 id="logo"><a href="#">Titlu</a></h1>
		   <!-- <h1> va fi folosit doar pe pagina principala, pe restul paginilor va fi inlocuit cu <div> din motive ce tin de SEO -->

		   <!-- meniul principal -->
		   <ul class="navigation clear-block">
			 <li class="active"><a href="#"><span class="title">Home</span></a></li>
			 <li><a href="#"><span class="title">About us</span></a></li>
			 <li><a href="#"><span class="title">Contact</span></a>
			   <ul>
				<li><a href="#"><span class="title">Test nivel 2</span></a></li>
				<li><a href="#"><span class="title">Test mai multe nivele</span></a>
				   <ul>
					  <li><a href="#"><span class="title">Test nivel 3</span></a></li>
					  <li><a href="#"><span class="title">etc</span></a></li>
				   </ul>
				</li>
			   </ul>
			 </li>
			 <!-- am folosit <span>-uri pt. a lasa posibilitatea designer-ului sa creeze un meniu mai complex dpdv grafic (de exemplu "tab"-uri) -->

		   </ul>
		   <!-- /meniul principal -->

		 </div>
		 <!-- /continutul propriu-zis al antetului -->

	 </div>
	 <!-- /antet -->

	 <!-- coloanele principale -->
	 <div id="main">

		<!-- continutul propriu-zis al coloanelor principale -->
		<div class="page-content clear-block">

		  <!-- coloana principala -->
		  <div id="primary-content">
			 <div class="blocks">
			   coloana principala
			 </div>
		  </div>
		  <!-- coloana principala -->

		  <!-- coloana 2 -->
		  <div id="sidebar">

			  <!-- "blocuri", o lista cu widgets -->
			  <ul class="blocks">
				 <li>- bloc din bara latera</li>
				 <li>- bloc din bara latera</li>
			  </ul>
			  <!-- /blocuri -->

		  </div>
		  <!-- /coloana 2 -->

		  <!--
			loc pentru coloana 3 (vizibila doar pe col-3, col-3-left, col-3-right)
			aceeasi structura ca si coloana 2, se schimba doar ID-ul cu "sidebar2"
		  -->


	   </div>
	   <!-- /continutul propriu-zis al coloanelor principale -->
	 </div>
	 <!-- /coloanele principale -->


	 <!-- subsol -->
	 <div id="footer">
		 <!-- continutul propriu-zis al subsolului -->
		 <div class="page-content">
		   subsol
		 </div>
		 <!-- /continutul propriu-zis al subsolului -->
	 </div>
	 <!-- /subsol -->


 </div>
 <!-- /pagina -->

</body>

</html>

css:

/* reset la spatii la toate elementele */
*{
  margin:0;
  padding:0;
}

html,body{
  min-height:100%;  /* pt ca "div.subsol" sa fie la subsolul paginii :) */
}

/* evident se schimba in functie de design */
body{
  font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size:14px;
  font-style:normal;
  color:#4e4e4e;
}

/* pagina ("wrapper") */
#page{
  width: 100%;
  height: 100%;
  min-height: 800px; /* se va schimba in functie de design, daca acest div va avea o imagine ca fundal... */
}


/* continutul propriuzis  */
.page-content{
  max-width:1600px;	 /* nu mai mult de 1600 de pixeli pt ca face pagina greu de citit la rezolutii mari */
  min-width:780px;	  /* nu mai puti de 780px (minim 800x600), pt ca poate distruge design-ul */
  margin:0 auto;		/* centram continutul (nu merge in IE 5.5 si mai jos) */
  position: relative;   /* in caz ca adaugam elemente absolute, ele trebuie pozitionate in functie de pozitia acestui div) */
}


/* tipul paginii */
/* latime fixa */
body.fixed .page-content{width:980px;} /* 960gs - detalii pe http://960.gs/  */

/* marimea implicita a coloanelor (se defineste mai jos pt toate situatiile) */
body.fixed #primary-content{width:670px;}
body.fixed #sidebar{width:310px;}
body.fixed #sidebar2{width:230px;}

/* o singura coloana, bare laterale ascunse */
body.fixed.col-1 #primary-content{width:980px;left:0;}
body.fixed.col-1 #sidebar, body.fixed.col-1 #sidebar2{display:none;}

/* 2 coloane, bl stanga */
body.fixed.col-2-left #primary-content{left:310px;}
body.fixed.col-2-left #sidebar{left:-670px;}
body.fixed.col-2-left #sidebar2{display:none;}

/* 2 coloane, bl dreapta */
body.fixed.col-2-right #primary-content{left:0;}
body.fixed.col-2-right #sidebar{right:0;}
body.fixed.col-2-right #sidebar2{display:none;}

/* 3 coloane - doua bl stanga si dreapta */
body.fixed.col-3 #primary-content{left:230px;width:520px;}
body.fixed.col-3 #sidebar{right:0px;width:230px;}
body.fixed.col-3 #sidebar2{left:-520px;}

/* 3 coloane - doua bl stanga */
body.fixed.col-3-left #primary-content{left:460px;width:520px;}
body.fixed.col-3-left #sidebar{left:-750px;width:230px;}
body.fixed.col-3-left #sidebar2{left:-290px;}  /* se calculeaza ca si 960px - bl1 - (bl1+bl2) */

/* 3 coloane - doua bl dreapta */
body.fixed.col-3-right #primary-content{left:0;width:520px;}
body.fixed.col-3-right #sidebar{left:0;width:230px;}
body.fixed.col-3-right #sidebar2{left:0;}



/* latime elastica */
body.fluid .page-content{padding:0 10px;width: auto;} /* 100%-10px (10 pixeli spatiu) */

/* marimea implicita a coloanelor (se defineste mai jos pt toate situatiile elastice) */
body.fluid #primary-content{width:70%;}
body.fluid #sidebar{width:30%;}
body.fluid #sidebar2{width:25%;}

/* o singura coloana, bare laterale ascunse */
body.fluid.col-1 #primary-content{width:100%;left:0;}
body.fluid.col-1 #sidebar, body.fluid.col-1 #sidebar2{display:none;}

/* 2 coloane, bl stanga */
body.fluid.col-2-left #primary-content{left:30%;}
body.fluid.col-2-left #sidebar{left:-70%;}
body.fluid.col-2-left #sidebar2{display:none;}

/* 2 coloane, bl dreapta */
body.fluid.col-2-right #primary-content{left:0;}
body.fluid.col-2-right #sidebar{right:0;}
body.fluid.col-2-right #sidebar2{display:none;}

/* 3 coloane - doua bl stanga si dreapta */
body.fluid.col-3 #primary-content{left:25%;width:50%;}
body.fluid.col-3 #sidebar{right:0;width:25%;}
body.fluid.col-3 #sidebar2{left:-50%;}

/* 3 coloane - doua bl stanga */
body.col-3-left #primary-content{left:50%;width:50%;}
body.col-3-left #sidebar{left:-75%;width:25%;}
body.col-3-left #sidebar2{left:-25%;}  /* se calculeaza ca si 100% - bl1 - (bl1+bl2) */
body.col-3-left #primary-content .blocks{margin-left:10px;}

/* 3 coloane - doua bl dreapta */
body.fluid.col-3-right #primary-content{left:0;width:50%;}
body.fluid.col-3-right #sidebar{left:0;width:25%;}
body.fluid.col-3-right #sidebar2{left:0;}
body.fluid.col-3-right #primary-content .blocks{margin-right:10px;}


/* proprietatile coloanelor */
/* foarte important - desi pare ca n-are sens, float:left si position:relative ne permit sa folosim aceeasi structura html pt tipurile diferite de pagini de mai sus */
#primary-content, #sidebar, #sidebar2{
  top:0;
  position:relative;
  float:left;
  z-index:0;
  overflow:hidden;
  min-height: 150px;
}

#main{
  padding: 20px 0;
}


/* logo (titlul paginii) */
#header #logo{
  margin: 0;
  padding: .5em .25em;
  font-weight: bold;
  font-size: 400%;
  letter-spacing: -0.06em;
  font-variant: small-caps;
  line-height: normal;
}

#header #logo a{
  text-decoration: none;
}


/*** meniul principal ***/

/* doar un exemplu, evident se schimba in functie de design */
ul.navigation, ul.navigation li{
  margin: 0;
  padding:0;
  list-style-type: none;
}

ul.navigation{
  background: #ddd;
  display: block;
}

ul.navigation li{
  float: left;
  position: relative;
  z-index: 10;
}

ul.navigation li a{
  display: block;
  text-shadow: #fff 0px -1px -1px;
  font-size: 115%;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

body ul.navigation li a:hover, ul.navigation li.active a{
  background: #eee;
  color: #CC0000;
}

/* nivel 2 si mai sus */
ul.navigation ul{
  list-style-type:none;
  position:absolute;
  display:none;
  width:250px;
  top:40px;
  left:0;
  margin:0;
  padding:4px;
  line-height:normal;
  background-color:#fff; /* pt ie */
  background-color:rgba(255,255,255, 0.75); /* transparent, doar in opera 10.5+, ff 3.6+ ... */
  box-shadow:0px 8px 14px rgba(0,0,0,0.3);  /* umbra */
  border-bottom-right-radius:8px;		   /* colturi rotunde */
  border-bottom-left-radius:8px;
}

ul.navigation li.active ul,
ul.navigation li.active-parent ul,ul.navigation li.active-ancestor ul{
  background-color:#000;
  border-bottom:1px solid #333;
  border-left:1px solid #333;
  border-right:1px solid #333;
}

ul.navigation ul li{
  float:none;
  margin:0;
}

ul.navigation ul li a{
  min-height:1px;
  height:auto;
  padding:0;
  text-align:left;
  text-transform:none;
  line-height:normal;
  font-size: 100%;
}

ul.navigation ul li a span.title{
  padding: 10px 10px 4px 10px;
  display: block;
}
ul.navigation li.active ul a{background:none;}

ul.navigation ul li.active a{color:#f8b013;}
ul.navigation ul li.active li a{color:#dedede;}

ul.navigation ul ul{left:240px;top:10px;border-radius:8px;}
ul.navigation li:hover ul ul,ul.navigation li:hover ul ul ul,ul.navigation li:hover ul ul ul ul{display:none;}
ul.navigation li:hover ul,ul.navigation li li:hover ul,ul.navigation li li li:hover ul,ul.navigation li li li li:hover ul{display:block;}


/* subsol, pozitionat jos chiar daca nu avem suficient continut */
#footer{
  position: absolute;
  bottom: 0;
  width: 100%;
}

#footer .page-content{
  border-top: 1px solid #ccc;
  padding: 20px 0;
}


/* "clearfix" - inlocuieste <br clear="both" /> */
.clear-block:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}

/* clasa ajutatoare pt efectul fadeIn/Out cu jQuery
   nefolosit in acest exemplu - voi posta si codul jQuery daca e necesar */
.fadeThis{position:relative;z-index:1;}
.fadeThis span.hover{
  position:absolute;
  top:0;
  left:0;
  display:block;
  height:100%;
  width:100%;
  z-index: 5;
}

/* spatiu intre imagini alineate la stanga/dreapta dintr-un articol */
img.alignleft,img.alignright{padding:3px;margin-top:4px;margin-bottom:4px;border-radius:4px;}

/* la fel, dar pt alte elemente */
.alignleft{float:left;margin-right:8px;}
.alignright{float:right;margin-left:8px;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center;}



/*** stilul pt imprimanta, trebuie dezvoltat in functie de design (eliminate imaginile si de pe alte elemente)  ***/

@media print {

*{font-family: "Helvetica Neue", Arial, Helvetica, "Lucida Grande", sans-serif;}

body {
  line-height: 1.5;
  color:#000;
  background: none;
  font-size: 10pt;
}


#page{
  background: none;
}

hr {
  background:#ccc;
  color:#ccc;
  width:100%;
  height:2px;
  margin:2em 0;
  padding:0;
  border:none;
}

code { font:.9em "Courier New", Monaco, Courier, monospace; }

a img { border:none; }

blockquote {
  margin:1.5em;
  padding:1em;
  font-style:italic;
  font-size:.9em;
}

a:link, a:visited {
  background: transparent;
  font-weight:700;
  text-decoration: underline;
}

/* afiseaza href, invizibil pe web */
a:link:after, a:visited:after {
  content: " (" attr(href) ")";
  font-size: 90%;
}

}

bafta si intreaba-ti-ma orice nu intelegeti :)

Edited by unu, 15 May 2010 - 14:44.


#46
meaby

meaby

    Junior Member

  • Grup: Members
  • Posts: 131
  • Înscris: 26.07.2010
Intrebarea mea este de ce se lasa spatiu la lista .De ce se face asa :
[font="Comic Sans MS"][font="Arial Black"]
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

si asa :
<body>
<div id="wrapper">
<ul id="navi">
<li><a href="#">Un link</a></li>
<li><a href="#">Un link cu sublinks</a>
	 <ul>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>		   
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>

	 </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un alt link cu sublinks</a>
<ul>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>		   
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>

	 </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
</ul>
</div>
</body></html>[/code]
[/quote]
[/font][/font]



si nu asa :
<body>
<div id="wrapper">
<ul id="navi">
<li><a href="#">Un link</a></li>
<li><a href="#">Un link cu sublinks</a>
<ul>
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>		   
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>
</ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un alt link cu sublinks</a>
<ul>
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>		   
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>
</ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
</ul>
</div>
</body></html>[/code]
[/quote]
[/font][/font]


#47
Gunar

Gunar

    Member

  • Grup: Members
  • Posts: 503
  • Înscris: 02.01.2007
Foarte, foarte misto topicul. Academic. Am invatat multe  (unele care credeam ca le stiu)...

#48
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009

Quote

Ok, l-am facut Sticky...
Este o buna sursa de invatare pentru cei care sunt la inceput de drum.
Din contra. Este cel mai prost explicat tutorial care l-am citit vreodata.Ca sa ii faci pe ceilalti sa inteleaga pe deplin,trebuie sa te pui in locul lor,ca si cand n-ai sti nimic.Vei observa ca iti pui intrebari.Tot tu vei si raspunde la ele.Formuland raspunsul intr-un mod mai pe intelesul tuturor + diferite explicatii (de unde se nasc intrebarile) + exemple  rezulta un tutorial.
Ala a luat-o cu doctype cu xhtml strict etc.  Ma omule da de unde sa stie oamenii ce e ala un element,ce e ala un tag,atribut.Nici nu stiu unde tre sa scri toate astea.
PS: Nu stiu ce ai vrut sa spui cu  

Quote

..desi ne asteptam ca cei care vor citi cele de aici sa aibe o bruma de cunostinte de baza.
dar daca vi cu ceva de genul:" Eu le-am spus ca trebuie sa stie cate ceva la inceput."    Pai eu iti voi spune ca in tutorial trebuie sa INVETI pe ceilalti ,daca tu le pui conditia sa stie deja ceea ce ar trebui sa le explici tu ,atunci de ce sa mai citeasca tutorialul(care deja nu mai e tutorial) daca ei stiu deja?

#49
Jumping Jack

Jumping Jack

    Member

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

View PostAndrey77, on 1st August 2011, 21:51, said:

Din contra. Este cel mai prost explicat tutorial care l-am citit vreodata.Ca sa ii faci pe ceilalti sa inteleaga pe deplin,trebuie sa te pui in locul lor,ca si cand n-ai sti nimic.Vei observa ca iti pui intrebari.Tot tu vei si raspunde la ele.Formuland raspunsul intr-un mod mai pe intelesul tuturor + diferite explicatii (de unde se nasc intrebarile) + exemple  rezulta un tutorial.
Ala a luat-o cu doctype cu xhtml strict etc.  Ma omule da de unde sa stie oamenii ce e ala un element,ce e ala un tag,atribut.Nici nu stiu unde tre sa scri toate astea.
PS: Nu stiu ce ai vrut sa spui cu    dar daca vi cu ceva de genul:" Eu le-am spus ca trebuie sa stie cate ceva la inceput."    Pai eu iti voi spune ca in tutorial trebuie sa INVETI pe ceilalti ,daca tu le pui conditia sa stie deja ceea ce ar trebui sa le explici tu ,atunci de ce sa mai citeasca tutorialul(care deja nu mai e tutorial) daca ei stiu deja?


Pai da, ar trebui sa citesti ce scrie prin tutorialul asta, ca sa iti intre ceva in cap. Sau tu probabil te astepti sa incepi sa te uiti in gol la un ecran timp de 10 minute si PAC! sa stii tot?


Despre DOCTYPE si alea -alea, este destul de clar explicat ce si cum si unde, insa nu te-ai obosit sa cauti.
Citez:
"In conformitate cu standardul w3c, un doctype (document type declaration, sau DTD) informeaza browserul despre ce versiune de (X)HTML se foloseste, pentru ca acesta sa stie care va fi modul de interpretare a paginii. El arata astfel - pentru xhtml 1.0 strict: etc etc "

#50
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009

View PostJumping Jack, on 21st September 2011, 14:46, said:

Pai da, ar trebui sa citesti ce scrie prin tutorialul asta, ca sa iti intre ceva in cap. Sau tu probabil te astepti sa incepi sa te uiti in gol la un ecran timp de 10 minute si PAC! sa stii tot?


Despre DOCTYPE si alea -alea, este destul de clar explicat ce si cum si unde, insa nu te-ai obosit sa cauti.
Citez:
"In conformitate cu standardul w3c, un doctype (document type declaration, sau DTD) informeaza browserul despre ce versiune de (X)HTML se foloseste, pentru ca acesta sa stie care va fi modul de interpretare a paginii. El arata astfel - pentru xhtml 1.0 strict: etc etc "
Nu asta e problema ,stiind deja html am inteles ce vrea sa spuna cu doctype dar daca tot se numeste tutorial,sa invete oamenii html. Gandeste-te ca un om care nu foloseste calculatorul decat pentru mail ,muzica,filme si google vrea sa invete programare web.Si omul e profesor de matematica,e destept,si ar putea intelege. Dar daca tu ii zici din prima despre doctype,te asigur ca nu ar intelege..Puteai macar sa zici ceva de genul:HTML e un limbaj de marcare care se scrie in orice editor de text.Toate cuvintele sunt "traduse"(sau nu) de catre browser in ce vezi zi de zi,site-urile.Declaratia DOCTYPE este "propozitia" de la inceputul oricarei pagini XHTML,care indica versiunea HTML sau XHTML folosita.Dar nu ori ce fel de propozitie,ci una in limbajul HTML.E ca si cand ai specifica la inceputul unei prezentatii ce limba este folosita ex.:Engleza /romana etc... (XHTML Transitional /XHTML Frameset etc...)
Ma rog,poate nu e prea corect ce am spus dar macar il face sa inteleaga pe cititor bazele.Bine,acum o sa zici ca prea caut nod in papura si cer prea multe,da m-a enervat ca se numeste tutorial.Parca tutorialele invatau oamenii ceea ce vroiau sa stie cap coada,fara sa sara peste ceva.Bn acm nu mai are rost,nu mai continui ca mi-e lene sa-ti explic,continuq-ti tutorialul,si apropo daca era ceva gen articol html sau "imbunatatiti-va cunostintele HTML" ,atunci era super tare,avand in vedere ca cei care stiu deja au ce invata de aici,insa nu si pentru cei care acum vor sa invete.

#51
w3room

w3room

    Senior Member

  • Grup: Senior Members
  • Posts: 2,085
  • Înscris: 22.09.2010
Nici mie nu-mi place tutorialul, dar cinste vouă ca l-ați făcut și p-ăsta.

Prima greșeală ar fi ca ați bătut apa in piuă cu prea multă teorie, și nici aia intreagă, doar pentru niște taguri amărâte. Am văzut secționarea div-urilor aiurea și id in id, sau poziționarea background-ului la modul "background:url(limagine.jpg) no-repeat 1px 1px" și alte facilități din-astea care nu ar trebui să arate așa pentru un începător. Greșeli sunt destule, că de n-ar fi, topicul ăsta ar fi avut acum peste 100 de pagini. Repet, măcar v-ați dat silința și pentru ăsta. Bravo vouă.

@Andrey77, ție nu ți-aș zice nimic că te cheamă ca pe mine, dar te asigur că nici tu nu ști ce e ăla doctype, diferența dintre strict, basic și celelalte, sau ce rol are in documentul html. Deci, încă nu știm html. Cred că ar trebui să lăsăm tutorialul așa cum e. Măcar unu tot a prins ceva din el.

#52
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009

View Postw3room, on 14th October 2011, 03:49, said:

Nici mie nu-mi place tutorialul, dar cinste vouă ca l-ați făcut și p-ăsta.

Prima greșeală ar fi ca ați bătut apa in piuă cu prea multă teorie, și nici aia intreagă, doar pentru niște taguri amărâte. Am văzut secționarea div-urilor aiurea și id in id, sau poziționarea background-ului la modul "background:url(limagine.jpg) no-repeat 1px 1px" și alte facilități din-astea care nu ar trebui să arate așa pentru un începător. Greșeli sunt destule, că de n-ar fi, topicul ăsta ar fi avut acum peste 100 de pagini. Repet, măcar v-ați dat silința și pentru ăsta. Bravo vouă.

@Andrey77, ție nu ți-aș zice nimic că te cheamă ca pe mine, dar te asigur că nici tu nu ști ce e ăla doctype, diferența dintre strict, basic și celelalte, sau ce rol are in documentul html. Deci, încă nu știm html. Cred că ar trebui să lăsăm tutorialul așa cum e. Măcar unu tot a prins ceva din el.
I-am zis eu sa modifice tutorialul?Am spus doar ca nu trebuie sa se numeasca tutorial.Si de unde sti tu ca eu nu stiu ce e ala doctype?Esti bun,sti multe,n-am nimic cu tine,dar nu-ti mai da cu parerea fara sa gandesti sau sa ai dovezi.Chiar daca era asa cum spuneai,pun pariu ca nici tu la varsta mea nu stiai ce e ala doctype.Si nici cu initiatorul nu am nimic.Doar ca m-am saturat sa gasesc pe net asa zisele tutoriale care nu te invata complet.Nu ii cer nimic,doar mi-am dat cu parerea.Chiar daca "tutorialul" nu este menit sa ii invete pe incepatori,este f util pentru ceicare vor sa invete mai mult si in detalii.Deci pe de o parte este si foarte bun.

#53
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007
Bai, daca io eram bun de prof, scriam o carte, nu un tutorial online. Ideea initiala a tutorialului asta era de a da o serie de raspunsuri la intrebarile cele mai des intilnite pe forum. Ca eram (eu cel putin) satul de probleme legate de proasta intelegere a box modelului si erori elementare, gen tag-uri inchise aiurea si lipsa de doctype.
De altfel, este un topic deschis, fiecare este liber sa contribuie, daca crede ca are ceva de completat. Dar de ce sa construim ceva, daca putem arunca cu caramizi in altii? Ca asa e pe la noi!

Evident ca daca era sa o luam de la zero absolut, altfel suna toata polologhia aia. Insa cei care vin pe forumul asta cu probleme de design nu sint nici bucatarese si nici controlori RATB (nu ca as avea ceva cu tagma lor), ci oameni care au pus deja mina pe un editor si le-a iesit ceva de pus pe ecran, insa au uitat sa se documenteze in prealabil intr-un manual de specialitate (sau tutoriale de pe web, ca pute locul de ele), ca deh, este vorba de html si css, chestii simple, nu-i asa?

PS: Nu e complet, pentru ca mai avem si altele de facut, scuze. Dar revin la invitatia de mai sus catre cei care sint dispusi sa contribuie. Ca doar nu o sa punem copyright pe el!

@Andrey77: Conform definitiei de pe Wikipedia, un tutorial este: "A tutorial is one method of transferring knowledge and may be used as a part of a learning process. More interactive and specific than a book or a lecture; a tutorial seeks to teach by example and supply the information to complete a certain task."

Nu este nicaieri specificat ca un tutorial trebuie sa inceapa de la zero absolut. Asta e o idee pe care tu ti-o asumi, si cind vezi ca nu e cum ai crezut, Zbang! dai verdict ca e naspa.

Eu cred ca titlul de tutorial se potriveste destul de bine subiectului in cauza. Ca nu e perfect, OK, se admite, insa pina la a spune ca este cel mai "prost tutorial" este mai lung drumul. Pe de alta parte te cred ca este "cel mai prost explicat tutorial care l-am citit vreodata", pentru ca nu stiu ce ai citit pina acum. Poate vii cu exemple mai bune.

Peace!  :peacefingers:

Edited by Jumping Jack, 22 October 2011 - 23:28.


#54
adi94

adi94

    Junior Member

  • Grup: Members
  • Posts: 190
  • Înscris: 06.11.2011
Nu stiu daca poastez unde trebuie dar am si eu o problema cu un css...am cautat peste tot pe net dar nu am gasit ce cautam.
Vreau ca in dreapta situ-lui sa-mi inserez o imagine oblica...nu dreapta ...ceva ca-n exemplul de aici   aici ...uitati-va la imaginea din dreapta cu online
Multumesc:)

Edited by adi94, 06 November 2011 - 11:36.


Anunturi

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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