Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
!DOCTYPE html
kenapa ketika kita menulis tag <!DOCTYPE html>, kode yg telah dibuat di css tidak muncul di browser? berikut kode html nya.
<html lang="en">
<head>
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" type="text/CSS" href="style.css">
</head>
<body>
<div id="header">
<h1>Begundal</h1>
</div>
<div id="sidebar">
l
</div>
<div id="main">
<div class="col-3">Text Disini</div>
<div class="col-3">Text Disini</div>
<div class="col-3">Text Disini</div>
<div class="col-3">Text Disini</div>
</div>
<div id="footer">
<p>Copyright 2016 Ubedz Scumbag</p>
</div>
</body>
</html>
ini kode cssnya.
*{
margin:0;
width:100%;
}
body{
font-size:15px;
}
#header{
background-color:#1abc9c;
height:20%;
width:100%;
}
h1{
font-size:2.5em;
text-align: center;
}
#sidebar{
height:75%;
width:20%;
float:left;
background-color:#16a085;
}
#main{
height:75%;
width:80%;
float:left;
background-color:red;
}
.col-3{
height:40%;
width:23%;
margin:1%;
background-color:yellow;
float:left;
font-size: 2em;
}
#footer{
height:5%;
width:100%;
background-color:#1abc9c;
clear:left;
font-size:1em;
}
@media screen and (max-width: 1000px){
body{
font-size: 12px;
}
.col-3{
width:48%;
}
}
@media screen and (max-width: 500px){
.col-3{
width:98%;
}
#main{
height:auto;
}
#sidebar, #main{
width:100%;
}
}
14 Jawaban:
jadi kalo ada , box model yg sudah dibuat tidak tampil bang. pas saya hapus baru tampil box model nya. kenapa ya?
Apakah anda menggunakan browser versi yang lama ? coba gunakan browser versi terbaru, kasus nya sama seperti teman saya
Coba pake browser versi terbaru :D ane pake browser opera terbaru jadi ya ga ada yang ketinggalan
saya sudah update browser nya, sekarang nampil sih, tapi dalam tag
nya harus ada isinya dan tampilannya pun tidak sesuai. Sedangkan kalau tidak pakai , tampilannya sesuai.
Coba ente obrak abrik css nya di sesuain pake cssnya coba
supaya lebih jelas, ini tampilannya.
dengan
tanpa
apakah itu ada terhubung ke link css lain?
Coba ente buka nya di xampp gan :D ... atau ada css lain kehubung ...
kalo masalah css lain kayaknya ga ada gan, soalnya saya buat file index dan css dalam satu folder dan memang hanya ada 2 file tersebut.
itu kode sama outputnya beda . coba copas kode yang aslinya
itu kode nya sudah saya edit, dan tampilannya juga gan.
Jadi begini gan, setahu saya, Doctype itu untuk mendefinisikan bahwa file tersebut adalah HTML5 (Versi terbaru dari HTML) Problem nya : 1. Browser lama tidak mendukung HTML5 maka akan error. Solusi : ini sudah fix kan karena sudah update browser. 2. Kenapa tampilan berubah dengan tidak pakai Doctype? Penjelasan : Karena memang, format (yg akan ditampilkan) HTML5 dan sebelumnya itu berbeda, misal height 100% di HTML5 itu tinggi nya akan berbeda jika dengan HTML tanpa Doctype. Solusi : Memang CSS nya dan div nya harus diatur ulang gan, menyesuaikan HTML5 :) Rombak kembali :D
coba-coba aja nih tambahin css;
html, body { height: 100%; }
atau kalau terlalu maksa, ganti jadi gini aja;
html, body { min-height: 100%; }
