Cara mengatur posisi biodata di website

03.04 1 Comments

Note : #Text berwarna merah merupakan penjelasan. tidak usah di copy


Berikut 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 &copy; 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






Unknown

Perfect Google

1 komentar:

Langganan: Posting Komentar (Atom)