Vonalak és keretek!

Mobilváltozat!

---

Asztali változathoz
kattints a képre!

---

Weblap border rádiusz.
Mozilla Firefox.
Safari.
Google Chrome.
Explorer böngészőkben.

Vonalak és keretek

Típusa	Neve	Normál	Rádiuszos
Folytonos	solid	Megjelenése	Megjelenése
Pontozott	dotted	Megjelenése	Megjelenése
Szaggatott	dashed	Megjelenése	Megjelenése
Dupla	double	Megjelenése	Megjelenése
Bemélyített	groove	Megjelenése	Megjelenése
Kidomborodó	ridge	Megjelenése	Megjelenése
Kiemelkedő	outset	Megjelenése	Megjelenése
Süllyesztett	inset	Megjelenése	Megjelenése

---

 

Vonal megjelenítése.

border: 2px solid #fff; Vonal rajz

border-top: 2px solid #fff; Vonal rajz

border-right: 2px solid #fff; Vonal rajz

border-bottom: 2px solid #fff; Vonal rajz

border-left: 2px solid #fff; Vonal rajz

border-top: 2px solid #fff; border-right: 2px solid #fff; Vonal rajz

border-top: 2px solid #fff; border-bottom: 2px solid #fff; Vonal rajz

border-top: 2px solid #fff; border-left: 2px solid #fff; Vonal rajz

border-right: 2px solid #fff; border-left: 2px solid #fff; Vonal rajz

border-right: 2px solid #fff; border-bottom: 2px solid #fff; Vonal rajz

border: 2px solid #fff; border-top: none; Vonal rajz

border: 2px solid #fff; border-right: none; Vonal rajz

border: 2px solid #fff; border-bottom: none; Vonal rajz

border: 2px solid #fff; border-left: none; Vonal rajz

{ border-top: 10px solid white; border-right: 20px solid blue; border-bottom: 30px solid black; border-left: 40px solid red; } Vonalak térbeli megjelenése

 

Rádiusz vagy íves vonal rajzolata

border: 4px solid #fff; Vonal rajz

border-top: 4px solid #fff; Vonal rajz

border-right: 4px solid #fff; Vonal rajz

border-bottom: 4px solid #fff; Vonal rajz

border-left: 4px solid #fff; Vonal rajz

 

Diszítsük weboldalunkat
egyedi vonalakkal.

Emlékeztető

Képet behívó utasítás:
<img src="images/képfájlnév.jpg" width="..." height="..." alt="elnevezés" border="0" />

Háttérkép lekérő utasítás:
#azonosito {width: ..px; height: ..px; background: url(XX / YYYYYYYYY.jpg) no-repeat; }

A div szakasz méretéből adódóan a képet tetszés szerinti pozícióba mozgathatjuk, ha megadtuk a no-repeat utasítást.
A no-repeat utasítást töröljük, akkor a kép annyiszor fog ismétlődni, még e div szakasz területét ki nem tölti

---

Háttérképekből
alsó és felsőkeret.

Képek mérete: <-- 200x14px -->

1.

2.

 

Képek mérete: <-- 400x14px -->

1.

2.

3.

4.

---

A fenti képek, 210px-től 800px széles (width) div szakaszokhoz használhatók.

---

1. Vonal lent jelenik meg

Vonal hossza, automatikusan követi a div szakasz szélességét 210px-től 400px-ig.

width: 210px

---

width: 410px

Megírása HTML-fájlban

<div class="alsovonal_001">
<p class="p_margo">
Szöveg megírása.
</p>
</div>

Megírása CSS-fájlban

/* Vonal lent 410px */
/* Háttérszínt, a végén kell megírni! */
.alsovonal_001 {
width: 410px;
margin-top: 5px;
padding-top: 1px;
background:
url(pirosvonal_1.gif)
no-repeat right bottom;
text-align: left;
}
.alsovonal_001 p {
background:
url(pirosvonal_2.gif)
no-repeat left bottom;
padding-bottom: 5px;
}
.p_margo {
font-size: 60%;
padding-right: 10px;
padding-left: 10px;
}

.alsovonal_001 {
background-color: aqua;
}

---

2. Vonal lent.

width: 800px

Vonal hossza, automatikusan követi a div szakasz szélességét 410px-től 800px-ig.

---

1. Vonal lent és fent

width: 410px

Megírása HTML-fájlban

<div id="atfogo_001">

<div class="vonalfent_001">
<p class="cp">
Szöveg megírása.<br />
Szöveg megírása.
</p>
</div>

<div class="vonallent_001">
<p>
<span class="pont">.</span>
</p>
</div>

</div>

Megírása CSS-fájlban

#atfogo_001 {background-color: aqua;}
#atfogo_001, .vonalfent_001, .vonallent_001 { width: 410px;}

.vonalfent_001 {
margin-top: 10px;
padding-top: 0px;
margin-top: -16px;
background:
url(pirosvonal_4.gif)
no-repeat right top;
text-align: left;
}
.vonalfent_001 p {
background:
url(pirosvonal_3.gif)
no-repeat left top;
padding-top: 18px;
}
.vonalfent_001 {
background-color: aqua;
}
.cp {
font-size: 60%;
padding-right: 20px;
padding-left: 20px;
}

.vonallent_001 {
background:
url(pirosvonal_1.gif)
no-repeat right bottom;
}
.vonallent_001 p {
background:
url(pirosvonal_2.gif)
no-repeat left bottom;
}

.vonallent_001 {
background-color: aqua;
}
.pont {
font-size: 10px;
margin-left: 15px;
color: red;
}

---

2. Vonal lent és fent

width: 800px

Vonalak hossza, automatikusan követi a div szakasz szélességét 410px-től 800px-ig.

---

Megírása HTML-fájlban

<div class="keret">
<p class="up_02">
Tetszőleges szöveg.
</p>
</div>

Megírása CCS-fájlban

.keret {
width: 300px;
background:
url(u_vonal_300x500.jpg)
no-repeat top;
}
.keret p {
background:
url(u_vonal_300x18.jpg)
no-repeat bottom;
}

.up_02 {
font-size: 12px;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 12px;
padding-left: 25px;
}

 

 

 

Vissza a lap elejére

---