Layout wygląda tak: http://jose.orge.pl/trk88/trk77.PNG
a Szablon: http://jose.orge.pl/trk88/
xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <link rel='stylesheet' type='text/css' href='style.css' /> </head> <body> <div id='www'> <ul id='menu'> </ul> <div id='lewa'> <div class='panel'> <div class='naglowek'> </div> <div class='tresc'> <dl class='nav'> </dl> </div> </div> <div class='panel'> <div class='naglowek'> </div> <div class='tresc'> <form action='index.php' method='get'> <p> <label> <input type='text' value='Twój login...' class='txt' /> <input type='password' value='Twoje hasło...' class='txt' /> <input type='submit' value='loguj' class='ok' /> </label> </p> </form> </div> </div> </div> <div id='srodek'> <div class='oferta'> </div> </div> </div> <div id='prawa'> <div class='panel'> <div class='naglowek'> </div> <div class='tresc'> <dl class='nav'> </dl> </div> </div> <div class='panel'> <div class='naglowek'> </div> <div class='tresc'> <form action='index.php' method='get'> <p> <label> <input type='text' value='Twój login...' class='txt' /> <input type='password' value='Twoje hasło...' class='txt' /> <input type='submit' value='loguj' class='ok' /> </label> </p> </form> </div> </div> </div> </div> </body> </html>
CSS:
body { background-color: #003E41; } #www { width: 900px; height: 1000px; margin: 0px auto; background-color: #002a2d; font-size: 11px; color: #aaa; font-family: Tahoma; } #menu { width: auto; height: 43px; background-image: url(images/bg_menu.jpg); margin: 0px auto; text-align: center; font-weight: bold; list-style-type: none; } #menu ul, li { float: left; padding: 15px; } #top { background-image: url(images/top.jpg); width: 900px; height: 209px; } .panel { width: 250px; height: 350px; background-color: #000; float: left; margin: 0; padding: 0; } .naglowek { width: 250px; height: 33px; background-image: url(images/bg_panel.jpg); margin-top: 0px; padding-top: 0px; } h1 { color: #000; font-size: 12px; font-weight: bold; font-family: Tahoma; text-align: center; padding-top: 10px; text-shadow: #fff 1px 1px 2px; } .nav dl, dt { padding-top: 7px; padding-left: 10px; } dt:before { content: "-"; } #lewa { display: block; width: 250px; } .txt { margin: 5px; margin-left: 50px ; height: 17px; font-size: 10px; font-family: Tahoma; color: #aaa; width: 150px; text-align: center; background-image: url(images/login.jpg); border: 1px solid #fff; } .ok { margin-left: 100px; height: 20px; width: 50px; background-image: url(images/ok.jpg); border: 0; font-size: 10px; color: #aaa; font-family: Tahoma; font-weight: bold; } p.login { text-align: center; padding-left: 5px; padding-right: 5px; } #prawa { float: right; width: 300px; padding: 0; margin: 0; display: inline; } #srodek { width: 400px; height: 1000px; float:left; background: #000; } .oferta { width: 400px; height: 51px; background-image: url(images/bg_oferta.jpg); }
Co mam zrobić, aby wyglądało to, jak na layu?