<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style>
body { margin:0; }
.genel { margin-left:auto; margin-right:auto; width:920px;}
.ust { width:920px; float:left; height:220px; background-color:#990;}
.h1 { float:left; width:130px; margin-top:10px; margin-left:35px; height:65px;}
.logo { float:left; margin-top:85px; margin-left:-135px;}
.ust-sag { float:right; margin-right:25px; margin-top:35px;}
.sol { float:left; width:260px; background-color:#09C; height:490px;}
.menu { float:left; width:220px; margin-top:0px; padding-left:40px; font-size:14px; font-family:menu-font; overflow:hidden; list-style:none; position:relative; }
.menu li {margin-right:2px; line-height:40px; display:inline; }
.menu li a { padding:0 5px; height:40px; text-decoration:none; color:#FFF; }
.menu li a:hover { color:#F00;}
.alt-rsm { margin-top:20px; width:120px; margin-right:auto; margin-left:auto; }
.orta { float:left; width:660px; height:490px; }
.orta-blok { float:left; padding:10px 10px 10px 10px; width:640px; height:200px; background-color:#963;}
.orta-blok-2 { float:left; padding:10px 10px 10px 10px; width:640px; height:200px; margin-top:15px; background-color:#966;}
.footer { float:left; width:920px; height:75px; background-color:#9C3;}
</style>
<body>
<div class="genel">
<div class="ust">
<div class="h1"><h1>BAŞLIK</h1></div>
<div class="logo"><img src="http://www.alyldrm.com/wp-content/uploads/apple-logo-g%C3%B6kku%C5%9Fa%C4%9F%C4%B1.gif" width="150" height="90" /></div>
<div class="ust-sag"><img src="http://www.skansen.si/skansen/English_files/header.png" width="260" height="60" /></div>
</div>
<div class="sol">
<div class="menu">
<li><a href="javascript:void(0);">menü 1</a></li><br/>
<li><a href="javascript:void(0);">menü 2</a></li><br/>
<li><a href="javascript:void(0);">menü 3</a></li><br/>
<li><a href="javascript:void(0);">menü 4</a></li><br/>
</div>
<div class="alt-rsm"><img src="http://www.alyldrm.com/wp-content/uploads/apple-logo-g%C3%B6kku%C5%9Fa%C4%9F%C4%B1.gif" width="100" height="100" /></div>
</div>
<div class="orta">
<div class="orta-blok"></div>
<div class="orta-blok-2"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>TeşekkürlerKaba birşey hazırlayıp paylaşırım gerisi sende
- - - Güncellendi - - -
Buyur kaba olarak bu şekilde hazırlanışı gerekli yerlerini sen değiştir. İstersen css'i ayır, görselliği değiştir. Biraz sen uğraş diye sadece iskeleti ayarladım
HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> </head> <style> body { margin:0; } .genel { margin-left:auto; margin-right:auto; width:920px;} .ust { width:920px; float:left; height:220px; background-color:#990;} .h1 { float:left; width:130px; margin-top:10px; margin-left:35px; height:65px;} .logo { float:left; margin-top:85px; margin-left:-135px;} .ust-sag { float:right; margin-right:25px; margin-top:35px;} .sol { float:left; width:260px; background-color:#09C; height:490px;} .menu { float:left; width:220px; margin-top:0px; padding-left:40px; font-size:14px; font-family:menu-font; overflow:hidden; list-style:none; position:relative; } .menu li {margin-right:2px; line-height:40px; display:inline; } .menu li a { padding:0 5px; height:40px; text-decoration:none; color:#FFF; } .menu li a:hover { color:#F00;} .alt-rsm { margin-top:20px; width:120px; margin-right:auto; margin-left:auto; } .orta { float:left; width:660px; height:490px; } .orta-blok { float:left; padding:10px 10px 10px 10px; width:640px; height:200px; background-color:#963;} .orta-blok-2 { float:left; padding:10px 10px 10px 10px; width:640px; height:200px; margin-top:15px; background-color:#966;} .footer { float:left; width:920px; height:75px; background-color:#9C3;} </style> <body> <div class="genel"> <div class="ust"> <div class="h1"><h1>BAŞLIK</h1></div> <div class="logo"><img src="http://www.alyldrm.com/wp-content/uploads/apple-logo-g%C3%B6kku%C5%9Fa%C4%9F%C4%B1.gif" width="150" height="90" /></div> <div class="ust-sag"><img src="http://www.skansen.si/skansen/English_files/header.png" width="260" height="60" /></div> </div> <div class="sol"> <div class="menu"> <li><a href="javascript:void(0);">menü 1</a></li><br/> <li><a href="javascript:void(0);">menü 2</a></li><br/> <li><a href="javascript:void(0);">menü 3</a></li><br/> <li><a href="javascript:void(0);">menü 4</a></li><br/> </div> <div class="alt-rsm"><img src="http://www.alyldrm.com/wp-content/uploads/apple-logo-g%C3%B6kku%C5%9Fa%C4%9F%C4%B1.gif" width="100" height="100" /></div> </div> <div class="orta"> <div class="orta-blok"></div> <div class="orta-blok-2"></div> </div> <div class="footer"></div> </div> </body> </html>
