.png)
Cara mengatur posisi biodata di website
Note : #Text berwarna merah merupakan penjelasan. tidak usah di copyBerikut contoh biodata yang saya buat di html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="beruang.html">beruang</a><li>
<li><a href="ikan.html">ikan</a><li>
<li><a href="kucing.html">kucing</a><li>
<li><a href="ayam.html">ayam</a><li>
</ul>
</div>
<div id="navv"> <nih biodatanya
<ul>
<table bgcolor="#990000">
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9">Nama : Anggi Nugraha</font></td>
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9" >Kelas : 2c Teknik Informatika</font></td>
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9"></font></td>
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9" >Alamat : Tanjung Buntung</font></td>
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9" >Pekerjaan : Mahasiswa</font></td>
<tr><td bgcolor="#990000" align="left">
<font color="#FFFDF9" >Hoby : googling, streaming, doodling</font></td>
</tr>
</table> sampe sini biodatanya
</ul>
</div>
<div id="selection">
<h1><center>Ayam</center></h1>
<p>Ayam peliharaan (Gallus gallus domesticus) adalah unggas yang biasa dipelihara orang untuk dimanfaatkan untuk keperluan hidup pemeliharanya. </p>
<p>Ayam peliharaan (selanjutnya disingkat "ayam" saja) merupakan keturunan langsung dari salah satu subspesies ayam hutan yang dikenal sebagai ayam hutan merah (Gallus gallus) atau ayam bangkiwa (bankiva fowl).</p>
</div>
<br>
<br>
<div id="footer">
Copyright © anggi nugraha
</div>
</body>
</html>
</head>
<body>
<div id="roti">
</div>
</html>
selanjutnya mengatur posisi di css, berikut kode css saya :
#image
{
background-image:url("jeck.jpg");
padding-left:2180px;
height:300px;
}
#header{
background-color:#990000;
color:white;
text-align:center;
padding:5px;
padding-left:10px;
}
#nav{
line-height:25px;
height:500px;
width:230px;
text-align:right;
float:left;
padding:25px;
}
#navv{
line-height:25px;
height:400px;
width:250px;
float:right;
padding:25px;
padding-left:10px;
}
#section{
width:550px;
float:left;
padding:10px;
}
#footer{
background-color:#990000;
color:white;
text-align:center;
padding:5px;
}
#roti
{
background-image:url("jeck.jpg");
padding-left:2180px;
height:400px;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float: left;
}
a:link, a:visited{
display: block;
width: 120px;
font-weight: bold;
color: #FFFDF9;
background-color: #990000;
text-align: center;
padding: 5px;
text-decoration:none;
text-transform: uppercase;
}
a:hover, a:active{
background-color: #FF4848;
}
kode #navv{ merupakan kode yang dipakai untuk mengatur biodata
</ul>
</div>
<div id="navv"> <nih "navv" yang di biodata guna agar terbaca di css
<ul>
untuk mengatur kiri kanannya cukup ganti float:right; menjadi float:left;
hasilnya akan seperti ini :
Intinya hanya mengatur "navv" saja. sengaja saya terangkan semua kode contoh html saya agar pembaca tidak bingung .
Terimakasih
-650-80.JPG)
-650-80.JPG)
1 komentar: