Aliniere DIV-uri pe aceeasi linie

Ca sa aliniati mai multe tag-uri <div> pe aceeasi linie in plan orizontal, puteti folosi aceste doua proprietati CSS: display: inline-block;, sau float (cu valoarea "left", sau "right").
- Pentru un design responsiv, ca elementele <div> sa ramana aliniate si ajustate la lungimea ferestrei browser-ului, folositi valori in procente (%) la lungimea DIV-urilor si margini.

Aliniere elemente Div cu inline-block

In urmatorul exemplu, elementele HTML <div> au proprietatea CSS: display: inline-block;

<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
#left, #center, #right {
 position: relative;
 display: inline-block;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 11em;
}
#center {
 width: 52%;
 height: 14em;
}
#right {
 width: 16.2%;
 height: 11em;
}
</style>
</head>
<body>

<div id="left">
 <div>
 <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/>
 <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/>
 <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/>
 </div>
</div>

<div id="center">
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs</p>
</div>

<div id="right">
 Content in the Div from right side.
</div>

</body>
</html>

Exemplu Aliniere cu float

Daca folositi proprietatea CSS float, adaugati un element HTML cu proprietatea "clear: both;" dupa ultimul DIV care are aplicat "float"; astfel aceasta nu va afecta celelalte elemente din pagina care sunt dupa DIV-urile aliniate.

<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
#left, #center, #right {
 position: relative;
 float: left;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 11em;
}
#center {
 width: 52%;
 height: 14em;
}
#right {
 width: 16.2%;
 height: 11em;
}
.clr { clear: both; } /* to anulate the effect of the float */
#footer {
 position:relative;
 width: 99%;
 height: 5em;
 margin: 1em auto 0.2em auto;
 background: #befbbe;
}
</style>
</head>
<body>

<div id="left">
 <div>
 <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/>
 <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/>
 <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/>
 </div>
</div>

<div id="center">
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs using float:left;</p>
</div>

<div id="right">
 Content in the right side Div.
</div>
<br class="clr" />

<div id="footer">
 Div under the DIVs aligned with "float: left", after the tag with "clear: both;".
</div>

</body>
</html>

<<-Tag-urile iframe si object

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.