Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
dannutzza din Mehedinti
 | Femeie
25 ani
Mehedinti
cauta Barbat
25 - 52 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
Mai multe despre modul de afisare a elementelor
Display
Inline
Doua paragrafe vor fi afisate pe acelasi rand in timp ce un div nu va fi afisat deloc
<html>
<head>
<style>
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
<div>And this div section is not displayed!</div>
</body>
</html>
inline face ca anumite elemente cu display block, care sunt afisate unele sub altele, sa fie afisate pe aceeasi linie. Efectul e dat de faptul ca dispare enterul <br>
Block
La span caracteristic e faptul ca nu are nici un fel de display, de aceea e si util – nu modifica cu nimic textul in care e folosit. De multe ori dorim insa sa-l facem vizibil: ii atribuim lui display valoarea block.
<html>
<head>
<style>
span
{
display: block;
border: solid 2px #000;
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span>
<span>distance between two elements.</span>
</body>
</html>
Float
left, right
Float este util pentru modul cum ne ajuta sa pozitionam elementele, de exemplu imaginile. Cu un float: right is spunem imaginii sa mearga in dreapta. Alte imagini consecutive se pozitioneaza de la dreapta spre stanga pe aceeasi linie in timp ce textul le inconjoara. La fel si pentru cazul float:left dar in partea stanga.
In exemplul urmator mai puteti adauga imaginea data de mai multe ori in text si observati pozitionarea.
<html>
<head>
<style>
img
{
float:right
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="logocss.gif" width="95" height="84">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Adaugati o margine pentru imagine:
margin: 20px;
Veti observa va marginea impinge textul in jurul ei
Un alt exemplu in care un element span ce contine o singura litera se alinieza spre stanga cu ajutorul lui float: left
<html>
<head>
<style>
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>
</body>
</html>
Meniu
Iata un exemplu simplu de meniu
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
1 Avem o lista neordonata ul care este fortata sa ocupe toata latimea paginii width:100%
2 Deasemeni este lasata sa mearga spre stanga float:left
3 Link-urile sunt si ele lasate in stanga
4 Pentru ca meniul sa fie pe orizontala liniile li din lista sunt cu display inline (daca erau block ar fi fost unele sub altele)
Practic aceasta ultima proprietate face ca meniul sa fie orizontal dar pentru uniformizare se folosesc si 2 si 3. |
|
|
| |
|
