HTML load olmadan açılan pəncərə

Salam Load edilmədən açılan pəncərə necə düzəltək olar ?
Nümunə görüntü: [img]http://i.imgur.com/e3PCR18.png?1[/img]
ama Javascript yox html ilə lazımdır

Sualı verdi: Hasan0208 (02/06/2016)

Yadda saxlama

block, CSS3, HTML, html5, window. Qısa keçid.

Verilmiş cavablar və yazılan şərhlər (6 cavab var)

Hasan0208

(03:39, 02/06/2016 ) #63380

View post on imgur.com

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

E. Hacı

(10:48, 02/06/2016 ) #63381

Web proqramlaşdırma HTML-dən ibarət deyil, javascriptdən qaçmaqla heç nə əldə etmək olmaz. Bu işlər javascript ilə olur. HTML-də belə bir komponent mövcud deyil.
Bu işlər html-css-javascript ilə reallaşır. Hər üçünü bilmədən və ya öyrənməkdən qaçmaqla ümumiyyətlə bu işlə məşğul olmağa dəyməz.
Bootstrap framework-də məsələn bu dediyiniz sadə bir komponentdir, copy paste edirsiz vəssalam. Yəni özünüz javascript yazmırsız, bootstrap-da bu hazır yazılıb.
http://getbootstrap.com/javascript/#tabs

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

Mehman Meybaliyev

(18:09, 04/06/2016 ) #63415

Salam,
Bu mümkündür.
Sırf sizin dizayn ilə istədiyinizi yazdım.

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

Mehman Meybaliyev

(18:11, 04/06/2016 ) #63416

1    .pencere1 {width: 200px; height: 50px; border-bottom: 5px solid black; border-right: 5px solid black; font-weight: bold; font-size: 25px; line-height: 47px; font-family: arial;}
2    .pencere1-div {background: white; width: 200px; height: 50px;}
3    .pencere1-div:hover {background: black; width: 200px; height: 50px; cursor: pointer; color: white;}
4    .pencere1-div2 {display: none;}
5    .pencere1-div:hover .pencere1-div2 {display: block; position: absolute; color: black; padding: 10px; text-align: left;}
6    .pencere2 {width: 200px; height: 50px; border-bottom: 5px solid black; border-right: 5px solid black; font-weight: bold; font-size: 25px; line-height: 47px; font-family: arial;}
7    .pencere2-div {background: white; width: 200px; height: 50px;}
8    .pencere2-div:hover {background: black; width: 200px; height: 50px; cursor: pointer; color: white;}
9    .pencere2-div2 {display: none;}
10    .pencere2-div:hover .pencere2-div2 {display: block; position: absolute; color: black; padding: 10px; text-align: left; left: 13px;}
11    .pencere3 {width: 200px; height: 50px; border-bottom: 5px solid black;  font-weight: bold; font-size: 25px; line-height: 47px; font-family: arial;}
12    .pencere3-div {background: white; width: 200px; height: 50px;}
13    .pencere3-div:hover {background: black; width: 200px; height: 50px; cursor: pointer; color: white;}
14    .pencere3-div3 {display: none;}
15    .pencere3-div:hover .pencere3-div3 {display: block; position: absolute; color: black; padding: 10px; text-align: left; left: 13px;}
16 
17 
18<table style="width: 600px;border: 5px solid black" cellpadding="0" cellspacing="0">
19    <tr>
20        <td class="pencere1" align="center">
21            <div class="pencere1-div">Pəncərə 1
22                <div class="pencere1-div2">P-1, Təcrübə müəllimlərin ən yaxşısıdır.</div>
23            </div>                
24        </td>
25        <td class="pencere2" align="center">
26            <div class="pencere2-div">Pəncərə 2
27                <div class="pencere2-div2">P-2, Bildiklərin bilmədiklərinin
28 yanında heç dərəcəsindədir.</div>
29            </div>    
30        </td>
31        <td class="pencere3" align="center">
32            <div class="pencere3-div">Pəncərə 3
33                <div class="pencere3-div3">P-3,Oxumaq lazımdır</div>
34            </div>    
35        </td>
36    </tr>
37    <tr>
38        <td style="width: 200px;height: 200px;background: white" colspan="3">
39        </td>
40    </tr>
41</table>