Tablet içine kutu yapmak

keremsönmz

keremsönmz

Hectopat
Katılım
2 Mayıs 2018
Mesajlar
142
Selamlar öncelikle, tasarlamak istediğim sitenin bir kısmını göstereceğim. Alttaki tasarımın aynısı yapmak istiyorum sol üste kutu yapıp yazı yazmak ve sol alttaki gibi yazı yazmak istiyorum. Ama bir türlü yapamadım. Yardımcı olabilir misiniz?

//Yapmak istediğim.
1578146046566.png


/HTML kodlarım.
1578145794678.png


//CSS kodlarım.
1578146178218.png
 
Tablo vs kullanarak ana şekli oluşturup görsel editör kısmından textbox ekleyerek yapabilirsiniz sanırım, en son lisede kullandım bunları yanlış hatırlıyor da olabilirim.
 
Son düzenleyen: Moderatör:
Aslında bu iş için tablo yetersiz kalabilir div üzerine kurmanız gerekir. Mesela;

Örnek html kodu:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="ornek2.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div class="solkutu">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

</body>

</html>

Örnek css kodu:

CSS: 
body {

}

.solkutu {
    width: 40%;
    height: 300px;
    position: relative;
    background-color: khaki;
    float: left;
}

.kutular {
    width: 20%;
    height: 150px;
    position: relative;
    float: left;
    border: 1px solid white;
    padding: 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: khaki;
}

.ustsolkutu {
    width: 50%;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    position: relative;
    background-color: blue;
    color: white;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: medium;
    overflow: hidden;
}

.altkutu {
    width: 70%;
    height: 50px;
    position: absolute;
    bottom: 10px;
    margin-left: 15%;
    margin-right: 15%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    overflow: hidden;
}

Tabi bu divlerin içine bir de <img> ekleyeceksin.. İhtiyaca göre çok farklı şekillerde geliştirilebilir.
 
Ya bu modları acil değiştirmeleri lazım kim bakıyor "web tasarım'a" normalde başlığa TABLE yazdım normal table hani içine tr td yazarsın ya ama adamlar yok ya gidiyor tablet yazıyor @Silinen üye yeter vallahi ya birde uyarı veriyorlar.
xenefon dedi:
Aslında bu iş için tablo yetersiz kalabilir div üzerine kurmanız gerekir. Mesela;

Örnek html kodu:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="ornek2.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div class="solkutu">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

    <div class="kutular">
        <div class="ustsolkutu">ÖRNEK METİN</div>
        <div class="altkutu">Metin buraya geliyor</div>
    </div>

</body>

</html>

Örnek css kodu:

CSS: 
body {

}

.solkutu {
    width: 40%;
    height: 300px;
    position: relative;
    background-color: khaki;
    float: left;
}

.kutular {
    width: 20%;
    height: 150px;
    position: relative;
    float: left;
    border: 1px solid white;
    padding: 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: khaki;
}

.ustsolkutu {
    width: 50%;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    position: relative;
    background-color: blue;
    color: white;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: medium;
    overflow: hidden;
}

.altkutu {
    width: 70%;
    height: 50px;
    position: absolute;
    bottom: 10px;
    margin-left: 15%;
    margin-right: 15%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    overflow: hidden;
}

Tabi bu divlerin içine bir de <img> ekleyeceksin.. İhtiyaca göre çok farklı şekillerde geliştirilebilir.
Genişletmek için tıkla...
Siteyi div'ile kurdum ama bir orayı yapamadım teşekkürler. Modlar yüzünden moralim bozuldu ben kendim yaparım eyvallah.
 
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

ticketmykells
HTML'in içine oyun yükleme
Mesaj
0
Görüntüleme
296
ticketmykells
ticketmykells
Luminous Valentine
"Tag" klasörü içine .html yerleştirme
Mesaj
1
Görüntüleme
348
Vegas
Vegas
218524
WordPress sayfa içine kategori listesi ekleme
Mesaj
0
Görüntüleme
205
218524
218524
Emiroo
Grafik tablet önerisi
2
Mesaj
11
Görüntüleme
9B
Emiroo
Emiroo
AteşliKazanova99
CSS ile nasıl kutu koyulur?
Mesaj
5
Görüntüleme
403
Yuuns
Yuuns

Yeni konular

Yeni mesajlar

Geri
Yukarı