DESIGN 02
+CSS DESIGNS+
TOP OF THE PAGE: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>FQ Business</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="site"> <div id="header"> <a href="#"><http://img3.xooimage.com/files/1/d/5/logo-14a1838.jpg" alt="" width="131" height="187" class="float"/></a> <div style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"><h1><a href="http://www.freetemplatesonline.com">free templates</a></h1><h1><a href="http://www.webdesign.org">web design</a></h1></div> <img src="http://img9.xooimage.com/files/5/e/e/slogan-14a1841.jpg " alt="" width="293" height="102" class="slogan" /> <ul id="menu"> <li><a href="#"><img src="http://img3.xooimage.com/files/5/1/f/but1_active-14a1852.gif" alt="" /></a></li> <li><a href="#"><img src="http://img1.xooimage.com/files/7/7/e/but2-14a185d.gif" alt="" /></a></li> <li><a href="#"><img src="http://img5.xooimage.com/files/3/b/a/but3-14a1861.gif" alt="" /></a></li> <li><a href="#"><img src="http://img3.xooimage.com/files/9/d/1/but4-14a186a.gif" alt="" /></a></li> <li><a href="#"><img src="http://img9.xooimage.com/files/e/d/9/but5-14a186e.gif" alt="" /></a></li> <li><a href="#"><img src="http://img3.xooimage.com/files/5/6/6/but6-14a1870.gif" alt="" /></a></li> </ul> </div> |
BOTTOM:
Código: |
<div id="content"> <div class="sidebar"> <img src="http://img5.xooimage.com/files/c/5/4/title1-14a1844.jpg" alt="" width="246" height="46" /><br /> <div class="news"> <span>JULY 18, 2009</span> <p><font>Lorem ipsum dolor sit amet</font> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Ut wisi eni <a href="#"><img src="http://img3.xooimage.com/files/1/2/3/more-14a187a.gif " alt="" width="15" height="5" /></a></p> </div> <div class="news"> <span>JULY 18, 2009</span> <p><font>Lorem ipsum dolor sit amet</font> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Ut wisi eni <a href="#"><img src="http://img3.xooimage.com/files/1/2/3/more-14a187a.gif " alt="" width="15" height="5" /></a></p> </div> <div class="all"> <a href="#"><img src="http://img1.xooimage.com/files/0/1/d/all-14a1822.jpg" alt="" width="68" height="25" /></a> </div> </div> <div id="main"> <div class="block1"> <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> </div> <div class="block2"> <p>Ipsum dolor sit amet, adipiscing elit.</p> </div> <img src="http://img7.xooimage.com/files/9/e/8/title2-14a1880.gif" alt="" width="527" height="66" /><br /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p> <p>consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio.</p> <div class="more"><a href="#"><img src="images/more.jpg" alt="" width="59" height="25" /></a></div> </div> </div> </div> <div id="footer"> <p> FQ © 2009 <a href="http://www.webdesign.org" target="_blank">Webdesign</a> by <a href="http://www.freetemplatesonline.com" target="_blank">Free Templates</a> Online Adaptado por<a href="http://garcesjose9.es.tl"target=_"blank"> Garcesjose9</a> </p> </div> </body> </html> |
CSS CODE WITH OUT STYLE TAGS:
Código: |
lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} *{ margin:0px; padding:0px; } img{border:0px;} html{ width:100%; height:100%; background-color:#0D1716; } body{ width:100%; height:100%; background-image:url( http://img3.xooimage.com/files/1/8/a/top_bg-14a1885.gif); background-position:top left; background-repeat:repeat-x } #site{ width:980px; margin:0 auto; background-image:url(http://img3.xooimage.com/files/b/f/b/header_bg-14a1836.jpg ); background-position:top left; background-repeat:no-repeat; overflow:hidden; } .float{float:left} .slogan{ float:left; padding:85px 0 0 0; } #header{ padding:84px 0 0 95px; overflow:hidden; / float:left } #menu{ background-image:url(http://img7.xooimage.com/files/8/3/7/menu_bg-14a1874.gif); background-position:bottom left; background-repeat:no-repeat; overflow:hidden; padding:66px 0 50px 0; width:791px; float:left } #menu li{ list-style-type:none; display:inline; vertical-align:bottom; margin:0 -3px 0 0 } #content{ width:790px; margin:0 auto; font-family:Tahoma; font-size:12px; } .sidebar{ width:246px; float:left; padding:1px; border:1px solid #146159; } .news{ width:192px; background-color:#161F1E; padding:15px 13px; margin:13px auto 0 auto; color:#4C5352 } .news span{ color:#E1FEFA; text-transform:uppercase; display:block; padding:0 0 13px 0 } .news font{ font-size:12px; color:#E1FEFA; } .all{ background-image:url(#); background-position:bottom left; background-repeat:no-repeat; margin:16px 0 0 14px; padding:0 0 19px 0; } #main{ width:527px; padding:0 0 15px 13px; overflow:hidden; float:left; } .block1{ background-image:url(http://img3.xooimage.com/files/2/d/5/block1-14a182b.jpg); background-position:top left; background-repeat:no-repeat; width:255px; height:180px; float:left; margin:0 16px 0 0; } .block2{ background-image:url(http://img7.xooimage.com/files/4/9/e/block2-14a1833.jpg); background-position:top left; background-repeat:no-repeat; width:256px; height:180px; float:left } .block1 p, .block2 p{ width:125px; margin:45px 0 0 104px; } #main p{ font-family:Tahoma; font-size:12px; color:#4C5352; padding:20px 0 0 2px } .more{ background-image:url(http://img9.xooimage.com/files/c/3/a/more_bg-14a187f.gif ); background-position:bottom left; background-repeat:no-repeat; padding:0 0 24px 0; margin:20px 0 0 0; float:right } #footer{ width:100%; height:84px; background-image:url(http://img7.xooimage.com/files/7/5/4/footer_bg-14a1871.gif); background-position:bottom left; background-repeat:repeat-x; font-family:Tahoma; font-size:12px; color:#000000; } #footer p{ display:block; width:781px; margin:0 auto; line-height:84px; } #footer a{ color:#FA7105; text-decoration:none } #footer a:visited{text-decoration:none} #footer a:hover{text-decoration:underline} |