Review : pendapat agan mengenai kode template html dan css

Assalamualaikum, hai gan, cuman sekedar review,rencananya saya mau buat template cms nih, dan tentunya yang responsive, tetapi ini baru dasarnya,yang saya inginkan adalah saat di zoom atau diperbesar di browser, seluruh halaman web tetap pada posisinya, dan biasanya kalau belum di atur oleh css atau masih standard, bagian bawah atau footer itu terangkat naik, jadi tersisa kolom putih, dan itu agak sedikit menggangu. yang saya buat nya sih udah bisa gan, tidak terangkat dibagian footernya, tetapi yang saya agak sedikit bingung bagaimana penjelasan kode css dibawah ini, saya bikin dasar template ini dengan metode try error gan, walaupun sebelumnya sudah saya desain kerangkanya.

begini kodenya

ini adalah kode html

<!DOCTYPE html>
<html>
<head>
	<title>portal website</title>
	<link rel="stylesheet" type="text/css" href="personal.css">
</head>
<body>
<section id="top">
	<div id="separator-top"></div>
	<div id="logo"><span><h1>Selamat Datang</h1></span></div>
	<div id="navigation">
		<div id="right-menu">
			<a href="#">Warung Kopi</a>
			<a href="#">Masuk</a>
		</div>
	</div>
</section>
<section id="content">
<h1>Content 1</h1>
</section>
<section id="content2">

</section>
<section id="content3">

</section>
<section id="footer">

</section>
</body>
</html>

dan ini adalah kode cssnya

@font-face{
	font-family: oxygen;
	src:url("fonts/Oxygen-Regular.ttf");
}
*{
	padding: 0;margin:0;font-size: 20px;text-decoration: none;list-style: none;
	font-family: oxygen;color: #000;
}
html,body{
	min-height: 100%;
}
/*2 important*/
/*start top*/
#top{
	position: relative;
	z-index: 100;
}
#separator-top{
	width: 100%;
	height: 20px;
	background: #0F0F0F;
}
#logo{
	width: 100%;
	height: 100px;
	background: #426AFF;
	border-bottom: 2.5px solid #121212;
}
#logo span{
	width: 100%;
	line-height: 100px;
	position: absolute;
	text-align: center;
}
#navigation{
	width: 100%;
	height: 50px;
	background: #6FD714;
}
#right-menu{
	right: 10px;
	position: absolute;
}
#navigation a{
	line-height: 50px;
	margin: 0px 10px 0px 10px;
}
/*stop top*/
/*start content*/
#content{
	background: #CE2C09;
	height: 600px;
	width: 100%;
}
#content2{
	width: 100%;
	height: 200px;
	background: #FF36AC;
}
#content3{
	width: 100%;
	height: 200px;
	background: #4336FF;
}
#footer{
	height: 200px;
	background: rgba(0,0,0,0.5);
	width: 100%;
}
@media screen and (min-width: 1400px){
	#content{
		min-height: 100%;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#content2{
		width: 100%;
		height: 200px;
		background: #FF36AC;
		margin-top:50%;
	}
}

reviewnya dibagian ini gan

/*start content*/
#content{
	background: #CE2C09;
	height: 600px;
	width: 100%;
}
#content2{
	width: 100%;
	height: 200px;
	background: #FF36AC;
}
#content3{
	width: 100%;
	height: 200px;
	background: #4336FF;
}
#footer{
	height: 200px;
	background: rgba(0,0,0,0.5);
	width: 100%;
}
@media screen and (min-width: 1400px){
	#content{
		min-height: 100%;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#content2{
		width: 100%;
		height: 200px;
		background: #FF36AC;
		margin-top:50%;
	}
}

lihat di #content dan #content2 di media query bagian margin-top saja, itu yang menurut saya mempengaruhi terangkat tidaknya bagian footer, lah di bagian content itu kan tertulis height : 100%, kok bisa pada posisi absolute dengan height : 100%, dan dibawahnya yaitu element content2, hanya dengan margin-top:50% saja, selisih elemenya itu pas banget dibawah posisi content gan, tadinya saya fikir, margin-top di #content2, seharusnya di isi dengan value 100%, baru selisih elementnya pas, nah saya mau tanya benar tidak pendapat saya, atau agan bisa kasih penejelasan lebih rinci, butuh jawabannya gan : D terima kasih

avatar momoji
@momoji

108 Kontribusi 44 Poin

Diperbarui 7 tahun yang lalu

3 Jawaban:

kalo saya coba kodingan agan diatas, pas di zoom out, agan coba ngejaga height "#content" tetep di 100% walopun ketika lebar si browser udah lebih dari 1400px, dan yang agan bingungin kenapa "#content2" dikasih margin 50% bisa ngepas di bawah "#content", sebenrnya itu ga ngepas gan, itu tergantung dari width bodynya (kebenran di tampilan agan lagi ngepas hehe). disini agan harus tau dulu itu margin 50% berapa px, dan itu 50% dari mana. coba deh agan perkecil terus ampe mentok, terus agan coba kecilin lebaran browsernya (diminimize terus di kecilin browsernya) pasti "#content2" jadi ga keliatan(posisinya jadi ada di belakang "#content"). itu karena nilai 50% itu, 50% dari width si body/htmlnya, jadi kalo di kecilin margin-top si "#content2" juga ikut ngecilin. coba agan cek inspectnya buat cek cek hal2 kaya gitu gan.

simplenya kalo agan pengen footernya ga keangkat agan bisa pake css ini :

@media screen and (min-width: 1400px){
  #content{
    min-height: 100vh;
    /*position: absolute;*/
    width: 100%;
    /*height: 100%;*/
  }
  #content2{
    width: 100%;
    height: 200px;
    background: #FF36AC;
    /*margin-top:50%;*/
  }
}

keterangan : 100vh => 100 Viewport Height, artinya tingginya bakal full 100%

referensi untuk responsive bisa cek article ini gan: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

kalo mo lebih gampang lagi sih pake aja bootstrap :)

avatar dickyjayaumbara
@dickyjayaumbara

18 Kontribusi 28 Poin

Dipost 7 tahun yang lalu

oh iya iya thanks gan

avatar momoji
@momoji

108 Kontribusi 44 Poin

Dipost 7 tahun yang lalu

kalok saya sih

<footer> blablabla </footer>

dikasi margin top ampek kebawah, terus positionnya dibuat fixed, triknya sih gitu setau ane :D jadi codingnya seperti ini

footer {
	width: 100%;
	height: 40px;
	margin-top: 871px;
	position: fixed;
}
avatar mhdadil
@mhdadil

105 Kontribusi 61 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban