Вы находитесь на странице: 1из 4

Codul HTML

<html> <head> <title>Exemplu pozitionare CSS absolut</title> <link rel="stylesheet" href="style.css" > </head> <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ornare enim. Duis a rhoncus eros. Aenean condimentum Duis fermentum imperdiet sem vitae cursus. Etiam eros nisi, vulputate sed mattis sit amet, fringilla vitae erat. Quisque tortor orci, suscipit vitae condimentum nec, molestie at lorem. Donec mattis eleifend orci, et elementum quam rutrum at. Sed orci nulla, rhoncus ut euismod eu, auctor eget nunc. Aliquam accumsan libero ac lacus ultricies id mollis tellus varius. </p> <p> Vivamus pulvinar, risus non facilisis tincidunt, ante est euismod mi, nec condimentum urna mauris nec eros. Maecenas augue accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed a consectetur orci. Cras in massa quis erat consequat eleifend a et nulla. </p> <div id="parinte"> <div id="copil"> La data acestui articol abia aflasem de 2 luni despre tehnica asa. </div> </div> <p> Nunc velit a lorem. Curabitur neque nisl, condimentum sed commodo at, auctor et nisi. Pellentesque eu augue diam. Curabitur quis velit in neque iaculis porttitor. Aenean eros erat, dapibus sit amet tristique ac, rutrum et magna. </p> <p> Phasellus et neque a justo bibendum facilisis. Sed </p> </body> </html>

Codul CSS 1
#parinte{ border: 1px solid red; width: 600px; height: 150px; } #copil{ width: 250px; height: 50px; background: red; color: white; font-weight: bold; }

Codul CSS 2
#parinte{ border: 1px solid red; width: 600px; height: 150px; } #copil{ width: 250px; height: 50px; background: red; color: white; font-weight: bold; position: absolute; bottom: 0px; left: 0px;

Codul CSS 3
#parinte{ border: 1px solid red; width: 600px; height: 150px; position: relative; } #copil{ width: 250px; height: 50px; background: red; color: white; font-weight: bold; position: absolute; bottom: 0px; left: 0px; }

Codul CSS 4
border: 1px solid red; width: 600px; height: 150px; position: relative; } #copil{ width: 250px; height: 50px; background: red; color: white; font-weight: bold; position: absolute; bottom: -40px; left: 0px; }

<div style="width:250px; background:#aaee88; border:1px solid blue;"> <form action="" method="post"> Nume: <input type="text"></input><br> E-mail:<input type="text"></input><br> <input type="submit" value="Trimite"></input> </form> </div> Alt DIV <div style="width:180px; background:#88aafe; border:5px outset #888888;"> <ul> <li>Linie 1</li> <li>Linie 2</li> <li>Linie 3</li> </ul> </div> <div style="position:relative; font-size:21px;"> <div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu - Exemplu</div> </div> Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe MarPlo.net. <html> <head> <title>Titlul</title> <style type="text/css"> span { border:2px solid red; padding:1px; color:#1111fe; } </style> </head> <body> <h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4> <ul> <li>Linia 1</li> <li><span> Linie 2, in span </span></li> <li>Linia 3</li> <li><span> Linie 4, in span </span></li> <li>Linia 5</li> </ul> </body> </html>

<div style="border:1px solid #fe1111;"> Fraza pe mai multe linii, <br> continua cu linia a doua, <br> se termina cu linia a treia.

</div> <br> - Acum cu SPAN:<br><br> <span style="border:1px solid #fe1111;"> Fraza pe mai multe linii, <br> continua cu linia a doua, <br> se termina cu linia a treia. </span>