css part 3

Tampilan web pada postingan saya yang sebelumnya masih belum menarik, karena itu hanya merupakan kerangkanya saja. Kali ini saya akan mencoba untuk mengisi kerangka tersebut sehingga akan tampak lebih menarik dan atraktif.

berikut adalah potongan scriptnya:

<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="UM.png" width="65"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
<img src="rektor.jpg" width="420"height="150"/>
<img src="h5.jpg" width="355"height="150"/>
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Minggu, 28 Februari 2010
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>&#169; 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>