CSS1

TURUNCU OLD
Tasarımın üzerindeki yazı:

Tasarımın altındaki yazı:

<div class="cleaner"></div> </div> <div id="templatemo_welcome_bottom"></div> <div id="templaetmo_bottom_area"> <div class="templatemo_three_col"> <div class="templatemo_title_2 title_left"> <h2>MENÜ-1</h2> </div> <p class="left"><b>Prae sent dapi bus </b> neque id cursus fauci bus, tortor neque egestas augue, eu vulp utate magna.</p> <p class="left"><b>Eros eu erat aliq uam</b> erat volut pat. Nam dui mi, tinci dunt quis, accum san port itor, faci lisis luctus, metus.</p> </div> <div class="templatemo_v_line"></div> <div class="templatemo_three_col"> <div class="templatemo_title_2 title_mid"> <h2>MENÜ-2</h2> </div> <a href="#"><img src="images/templatemo_img_2.jpg" alt="hall" border="0" /></a> <p class="middle">Donec nec justo eget felis or facilisis ferm entire. Aliquam to port titor mauris sit amet orci. </p> <p class="middle">Morbi in sem quis dui plac erat ornare. Pell ente sque odio nisi, euis mod in, phar etra.</p> </div> <div class="templatemo_v_line"></div> <div class="templatemo_three_col"> <div class="templatemo_title_2 title_right"> <h2>MENÜ-3</h2> </div> <p class="right">Sed adi piscing ornare risus. Morbi est est, blan dit sit amet, sag ittis vel, euis mod vel, velit. Pellen tesque ege stas sem. Suspend issue com modo ullam corper magna.</p> <div class="cleaner"><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"  src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div> </div> <div class="cleaner"></div> </div> <div id="templatemo_footer"> Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> </div> </div>  </body> </html>

CSS Kodu

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;} /* CSS Credit: http://www.templatemo.com */ html { background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_html_bg.jpg); } body { margin: 0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_bg.jpg) repeat-x; } a:link, a:visited {	color: #d99e00; text-decoration: underline; } a:active, a:hover { color: #FFFFFF; text-decoration: none; } p { font-family: Arial; font-size: 12px; color: #b48842; text-align: justify; margin: 0 0 10px 0; } span.date { font-family: Tahoma; font-size: 11px; color: #999999; text-align: justify; margin: 0 0 3px 0; } h1 { font-family: "Times New Roman", Times, serif; font-size: 24px; color: #ac6c07; margin: 0 0 10px 0; } h2 { font-family: "Times New Roman", Times, serif; font-size: 14px; color: #ac6c07; margin: 0 0 10px 0; } h3 { font-family: Tahoma; font-size: 13px; color: #a18800; font-weight: normal; margin: 0 0 3px 0; } #templatemo_container { width: 900px; margin: auto; } #templatemo_top { clear: both; width: 900px; margin: 0; padding: 0; } #templatemo_header { width: 900px; height: 313px; background: url(https://img.webme.com/pic/t/tevhidinanci/templatemo_header.jpg); padding: 1px 0 0 0; } #templatemo_header_logo_area { width: 295px; height: 65px; margin: 170px 0 0  35px ; } #templatemo_header_logo { color: #d99e00; font-size: 30px; font-family: "Times New Roman", Times, serif; font-weight: bold; margin: 0 0 10px 0; } #templatemo_header_logo span.small_text { font-size: 18px; } #templatemo_header_slogan { font-family: "Times New Roman", Times, serif; font-size: 15px; color: #ffdd83; margin: 0; float: left; } /* menu */ #templatemo_menu { float: left; width: 900px; height: 54px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_menu_bg.jpg); padding:0; } #templatemo_menu ul { float: left; margin: 0 0 0 30px; padding: 0 0 0 0; width: 960px; list-style: none; } #templatemo_menu ul li { display: inline; } #templatemo_menu ul li a { float: left; padding: 15px 40px 0 40px; height: 39px; text-align: center; font-size: 12px; text-align: center; text-decoration: none; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_menu_divider.png) center right no-repeat; color: #daa411; font-family: "Times New Roman", Times, serif; font-size: 13px; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current { background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_menu_current.jpg); } #templatemo_menu li .last { background: none; } /* end of menu*/ #templatemo_welcome_area { width: 820px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_welcome_bg.jpg) repeat-y; padding: 40px 40px 20px 40px ; } #templatemo_welcome_area .templatemo_title_1 { height: 35px; width: 385px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_title_line.jpg) no-repeat; background-position: 35px 33px; margin: 0 0 10px 0; } #templatemo_welcome_area h1 { height: 25px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_title_style_1.png) left no-repeat; padding: 5px 0 5px 40px; } #templatemo_welcome_area p { padding: 0 40px; } #templatemo_welcome_area img { float: right; margin: 0 0 10px 10px; border: 2px solid #644428; } #templatemo_welcome_bottom { background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_welcom_bottom.jpg); height: 5px; width: 900px; } #templaetmo_bottom_area { width: 820px; padding: 10px 40px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_bottom_panel.jpg); } #templaetmo_bottom_area .templatemo_three_col { width: 272px; float: left; } .templatemo_title_2 { height: 29px; padding: 9px 0 0 20px; background: url(http://www.templatemo.com/templates/templatemo_158_interior/images/templatemo_title_style_2.png) left top no-repeat; } .templatemo_three_col .title_left { margin: 0 10px 10px 20px; } .templatemo_three_col .title_mid { margin: 0 10px 10px 10px; } .templatemo_three_col .title_right { margin: 0 0 10px 10px; } .templatemo_three_col p.left { margin: 0 30px 10px 40px; } #templaetmo_bottom_area p.middle { margin: 0 30px 10px 30px; } #templaetmo_bottom_area img { float: left; margin: 0 10px 2px 30px; } .templatemo_three_col p.right { margin: 0 20px 10px 30px; } .templatemo_v_line { width: 1px; height: 210px; background-color: #4b240e; float: left; } #templatemo_footer { width: 100%; background: #351402; color: #cf9232; margin: 0; padding: 10px 0; text-align: center; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; } .cleaner img { margin: 0 0 0 30px; }

GREENY

Tasarımın üzerindeki yazı:

<div id="templatemo_container"> <div id="templatemo_content_area"> <div id="templaetmo_left"> <div id="templatemo_logo_area"> <div id="templaetmo_logo"> GREENY </div> <div id="templaetmo_slogan"> FREE CSS TEMPLATE </div> </div> <div class="templatemo_menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="http://www.templatemo.com/page/1" target="_parent">CSS Templates</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="templatemo_section_1"> <h1>Quick Contact</h1> <img src="images/templaetmo_img_1.jpg" alt="Contact" /> <p>Feugiat non, con sectet uer quis, pre tium quis, nunc. Null a pede.</p> <p>Tel	: 001-100-1000<br /> Fax	: 002-200-2000<br /> Email: info@yourdomain.com</p> </div> </div> <div id="templaetmo_right"> <div id="templaetmo_right_top"> <h1>Welcome to our HTML website</h1> </div> <div id="templaetmo_right_mid"> <div class="templaetmo_one_col"> <img src="images/templatemo_img_2.jpg" alt="Bridge" /> <p>Greeny <a title="Free CSS Templates" href="http://www.templatemo.com" target="_parent">free css template</a> is provided by <a href="http://www.templatemo.com" target="_parent">templatemo.com</a> website. You may download, modify and apply this web layout for your commercial or personal websites.</p> <p>Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> codes. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. <a href="#">Read More...</a></p> <div class="cleaner"></div> </div> <div class="templatemo_two_col"> <h1>Our Services</h1> <img src="images/templatemo_icon_1.png" alt="services" /> <p>Fusce molestie mi eu lorem consequat blandit.litquis tortor tincidunt aliquet. Vivamus leo velit, convallis. Ultrices sit amet, tempor a, libero.</p> <ul class="templatemo_list"> <li>Cras iaculis <a href="#">ultricies</a> nulla</li> <li>Vivamus molestie <a href="#">gravida</a> turpis</li> <li>Nam <a href="#">convallis</a> pellentesque nisl</li> <li>Integer malesuada <a href="#">commodo</a> nulla</li> </ul> <div class="templatemo_more"><a href="#">More</a></div> </div> <div class="templatemo_v_line"> </div> <div class="templatemo_two_col templaetmo_two_col_right"> <h1>Photo Gallery</h1> <div class="templatemo_gallery">

Tasarımın altındaki yazı:

<div class="cleaner"></div> <div class="templatemo_more"><a href="#">More</a></div> </div> </div> <div class="cleaner"></div> <div class="templatemo_h_line"></div> <div class="templatemo_section_2"> <div class="templatemo_section_2_top"> </div> <div class="templatemo_section_2_mid"> <h1>Latest News &amp; Events</h1> <img src="images/templatemo_icon_2.png" alt="News And Events" /> <p><a href="#">Feugiat</a> non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, <a href="#">mauris</a>.</p> <p>In hac <a href="#">habitasse</a> platea dictumst. Aenean cursusQuisque in diam a justo condimentum molestie. <a href="#">Vivamus</a> a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur <a href="#">ridiculus</a> mus.</p> </div> <div class="templatemo_section_2_bottom"> </div> </div> </div> <div id="templaetmo_right_bottom"> <div id="templatemo_footer"> Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> </div> </div> </div> <div class="cleaner"></div> </div> </div>  </body> </html>

CSS Kodu
(

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;} /* CSS Credit: http://www.templatemo.com */ html { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_bg.jpg) #ddf0e7 repeat-x; } body { margin: 0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_bg.jpg) #ddf0e7 repeat-x; } a:link, a:visited {	color: #167036; text-decoration: underline; } a:active, a:hover { color: #990000; text-decoration: none; } p { font-family: Tahoma, Geneva, sans-serif; font-size: 13px; color: #eef8f4; text-align: justify; margin: 0 0 10px 0; } h1 { font-family: Tahoma, Geneva, sans-serif; font-size: 24px; color: #fff; font-weight: normal; margin: 0 0 10px 0; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: normal; color: #24f0c9; margin: 0 0 10px 0; } h3 { font-family: Tahoma; font-size: 13px; color: #a18800; font-weight: normal; margin: 0 0 3px 0; } #templatemo_container { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templaetmo_container_bg.jpg) no-repeat top; width: 1024px; margin: auto; } #templatemo_content_area { width: 942px; margin: auto; } #templaetmo_left { float: left; width: 290px; } #templatemo_logo_area { width: 200px; height: 85px; margin: 60px auto 0 auto; } #templaetmo_logo { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: #fff; text-align: center; margin: 0 0 20px 0; } #templaetmo_slogan { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; text-align: center; } .templatemo_menu { width: 219px; margin: 60px auto; padding: 0; } .templatemo_menu ul { list-style-type: none; padding: 0; margin: 0; width: 219px; } .templatemo_menu li a { display: block; height: 31px; padding: 12px 30px 0 30px; margin: 5px 0 0 0; color: #fff; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size: 14px; text-transform: uppercase; text-align: left; background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_menu.png) no-repeat; text-decoration:none; } .templatemo_menu li a:hover, .templatemo_menu li .current { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_menu_current.png) no-repeat; text-decoration:none; text-align: right; color: #167036; } .templatemo_section_1 { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_section_1_bg.png) bottom no-repeat; width: 180px; padding: 20px; margin: 20px auto; } .templatemo_section_1 h1 { color: #2a8360; text-align: right; margin: 0 0 15px 0 ; } .templatemo_section_1 p { color: #000; } .templatemo_section_1 img { margin: 0 0 10px 0; border: 3px solid #fff; } #templaetmo_right { float: right; width: 650px; padding: 25px 0 0 0; } #templaetmo_right_top { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_right_top.png) top no-repeat; width: 604px; height: 30px; padding: 20px 20px 0 20px; } #templaetmo_right_mid { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_right_mid.png); width: 644px; padding: 0 0 10px 0; } #templaetmo_right_bottom { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_right_bottom.png) bottom no-repeat; width: 644px; height: 73px; } .templaetmo_one_col { width: 604px; border-bottom: 1px dotted #fff; margin: 0 20px 10px 20px; padding: 10px 0 10px 0; } .templaetmo_one_col img { float: left; border: 3px solid #fff; margin: 0 15px 15px 0; } .templatemo_two_col { float: left; width: 280px; margin: 0 2px 10px 20px; padding: 10px 20px 0 0; } .templaetmo_two_col_right { margin: 0 0 10px 0; padding: 10px 0 0 20px; } .templatemo_two_col img { float: left; margin: 10px 10px 10px 0 ; } .templatemo_gallery { width: 100%; } .templatemo_gallery img { float: left; margin: 0; padding: 0; border: 2px solid #FFFFFF; } .templatemo_gallery img.mid { margin: 0 12px 10px 12px; } .templatemo_section_2 { width: 595px; margin: 15px 0 0 24px; } .templatemo_section_2 .templatemo_section_2_top { width: 595px; height: 4px; background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_section_2_top.png) top no-repeat; } .templatemo_section_2 .templatemo_section_2_bottom { width: 595px; height: 5px; background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_section_2_bottom.png) bottom no-repeat; } .templatemo_section_2 .templatemo_section_2_mid { width: 555px; background: #7fbaa0; padding: 10px 20px; } .templatemo_section_2_mid img { float: left; margin: 0 20px 20px 0; } .templatemo_v_line { float: left; width: 1px; min-height: 280px; border-left: 1px dotted #fff; margin: 0 2px 0 0; } .templatemo_h_line { height: 0px; border-bottom: 1px dotted #fff; margin: 0 20px; } .templatemo_more { float: right; background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_more.png); width: 80px; height: 23px; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; text-align: center; margin: 10px 0px 10px 0; color: #fff; } .templatemo_more a { color: #fff; text-decoration: none; } .templatemo_more a:hover { text-decoration: underline; } .templatemo_list { list-style: none; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; color: #eef8f4; } .templatemo_list li { background: url(http://www.templatemo.com/templates/templatemo_166_greeny/images/templatemo_bullet_star.png) no-repeat; background-position: 0 8px; padding: 0 0 0 13px; margin: 0 0 5px 0; } #templatemo_footer { width: 100%; color: #167036; margin: 0; text-align: center; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; } .cleaner img { margin: 0 0 0 30px; }

PROJE CSS

Tasarımın üzerindeki yazı:

<div id="main"> <div id="contentbg"> <div id="contenttxtblank"> <div id="menu"> <ul> <li><a href="#" class="menu">Home</a></li> <li class="menusap"></li> <li><a href="#" class="menu">About Us</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Solutions</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Services</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Blog</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Our Client</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Sponsors Link</a></li> <li class="menusap"></li> <li><a href="#" class="menu"> Testimonials</a></li> <li class="menusap"></li> <li><a href="#" class="menu">Contact Us</a></li> </ul> </div> <div id="contentleft"> <div id="topbuttonsblank"> <div id="register"><a href="#" class="register">Registration</a></div> <div id="bookmark"><a href="#" class="bookmark">Bookmark</a></div> </div> <div id="callus"> <h3>Call Us<span class="callus">+01-3345-6678</span></h3> </div>

Tasarımın altındaki yazı:

<div id="leftheading"> <h2>Consectetuer adipiscing elit...... </h2> </div> <div id="lefttxtblank"> <div id="leftredtxt">Sed augue massa semper acmolestie sedeuismod at felisdeuis curabitur sodaleeros uttincidunt luctus</div> <div id="lefttxt"><span class="leftboldtxt">porttitor non, lectus.</span> Sed tincidunt lacus at dolor. Mauris ullamcorper pulvinar quam. Class aptent taciti socid litora torquent . <br /> Etiam erat mauris, accumsan id, blandit nec, commodo non, quam. <span class="lefttxt02">Phasellus gravida </span>vehicula massa. Suspende lacinia purus at nisi. Donec dictum hendrerit turpis. Phasellus lobortis odio in lacus. <span class="lefttxt">Etiam vitae elit.</span> Nam et purusit amet odio ultrices tincidunt. Nam gravida augue vel purus. Sed hendrerit lectus ac libero.</div> <div id="buttonbg"><a href="#" class="more">readmore</a></div> </div> </div> <div id="contentright"> <div id="search"> <div id="searchblank"> <div id="searchinput"> <label> <input name="textfield" type="text" class="searchinput" id="textfield" value="Enter Keyword" /> </label> </div> <div id="searchbutton"><a href="#" class="search">Search</a></div> <div id="advancesearch"><a href="#" class="advancesearch">Advance Search</a></div> </div> </div> <div id="rightnav"> <ul> <li><a href="#" class="login"></a></li> <li><a href="#" class="check"></a></li> <li><a href="#" class="chat"></a></li> <li><a href="#" class="idea"></a></li> <li><a href="#" class="privecy"></a></li> </ul> </div> <div id="morelinksheading"> <h5>More Newslinks</h5> </div> <div id="morelinks"> <div class="date">12.01.08</div> <div class="linkblank"><a href="#" class="link">Scelerisque amassa suspendisse</a></div> <div class="date">16.01.08</div> <div class="linkblank02"><a href="#" class="link">Praesent tincidunt mattis ipsum cras </a></div> <div class="linkblank03"><a href="#" class="link">Varius tempor dolor In sit amet lectu</a></div> <div class="linkblank03"><a href="#" class="link">Lorem ipsum dolo</a></div> <div class="linkblank04"><a href="#" class="link">Consectetuer adipiscing elitverdiet</a></div> <div class="date">16.01.08</div> <div class="linkblank02"><a href="#" class="link">Praesent tincidunt mattis ipsum cras</a></div> <div class="linkblank04"><a href="#" class="link">Varius tempor dol</a></div> <div class="date">16.01.08</div> <div class="linkblank02"><a href="#" class="link">Hendrerit fringilla urna donec a felis</a></div> </div> <div id="morelinksbot"></div> </div> <div id="testimonialbg"> <div id="testimonialtxtblank"> <div id="testimonialheading">Testimonials</div> <div id="testimonialdate">03</div> <div id="testimonialtxt">Vestibulum risus. Quisque orci ligula, euismod a, pulvinar vitae, gravida nec, arcu. Maecenas eget risus sed felis dignissim semper. Praesent tempus augue eget nunc. Morbi sollicitudin mauris lacinia nisl.</div> <div id="testimonialname">....K Martin</div> <div id="testimonialbutton"><a href="#" class="testimonialbutton">Details</a></div> </div> </div> </div> </div> <div id="footerbg"> <div id="footerlinks"><a href="#" class="footerlinks">Home</a> | <a href="#" class="footerlinks">About Us</a> | <a href="#" class="footerlinks">Solutions</a> | <a href="#" class="footerlinks">Services</a> |<a href="#" class="footerlinks"> Blog</a> | <a href="#" class="footerlinks">Our Client</a> | <a href="#" class="footerlinks">Sponsors Link</a> | <a href="#" class="footerlinks">Testimonials</a> | <a href="#" class="footerlinks">Contact Us</a></div> <div id="copyrights">© Copyright Information Goes Here. All Rights Reserved.</div> <div id="designedby">Designed by <a href="http://www.templateworld.com" class="designedby">TemplateWorld </a>and brought to you by <a href="http://www.smashingmagazine.com" class="designedby">SmashingMagazine</a></div> <div id="validation"><a href="http://validator.w3.org/check?uri=referer" class="xhtml">xhtml valid</a><a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">css valid</a></div> </div> </div> </body> </html>

CSS Kodu

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;} @charset "utf-8"; /* CSS Document */ body { margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/bg.jpg); background-repeat:repeat-x; background-color:#bbcd72; } h1,h2,h3,h4,h5,h6,span { margin:0px; padding:0px; } #main { width:904px; float:none; margin:0 auto; padding:0px; } #contentbg { width:904px; float: left; margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/contenttxtbg.jpg); background-repeat: repeat-y; } #contenttxtblank { width:866px; float: left; margin:0px; padding:0 0 40px 38px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/contentbg.jpg); background-repeat:no-repeat; } #menu { width:828px; height:30px; float: left; margin:0px; padding:0px; } #menu ul { width:778px; height:30px; float: left; margin:0px; padding:0 0 0 50px; display:block; } #menu ul li { height:30px; float: left; margin:0px; padding:0px; display:block; } #menu ul li.menusap { width:2px; height:27px; float: left; margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/menusap.jpg); background-repeat:no-repeat; } #menu ul li a.menu { height:22px; float: left; margin:0px; padding:5px 11px 0 11px; font-family: "Trebuchet MS"; font-size:11px; font-weight:bold; color:#c5c5c5; text-align:center; text-decoration:none; text-transform:uppercase; } #menu ul li a.menu:hover { height:22px; float: left; margin:0px; padding:5px 11px 0 11px; font-family: "Trebuchet MS"; font-size:11px; font-weight:bold; color:#99eaf5; text-align:center; text-decoration:none; text-transform:uppercase; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/menuover.jpg); background-repeat:no-repeat; background-position:center bottom; } /*------------------------------------------------------MENU---------------------------------------------END--------------------------------------------------------------------------------*/ #contentleft { width:597px; float:left; margin:0px; padding:0px; } #topbuttonsblank { width:597px; height:29px; float:left; margin:7px 0 0 0; padding:0px; } #register { width:130px; height:29px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-align:center; text-decoration:none; text-transform:uppercase; } .register { width:117px; height:23px; float:left; margin:0px; padding:6px 0 0 13px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-decoration:none; text-transform:uppercase; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/register.jpg); background-repeat:no-repeat; } .register:hover { width:117px; height:23px; float:left; margin:0px; padding:6px 0 0 13px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-align:center; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/registerover.jpg); background-repeat:no-repeat; } #bookmark { width:130px; height:29px; float:left; margin:0 0 0 4px; padding:0px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-align:center; text-decoration:none; text-transform:uppercase; } .bookmark { width:117px; height:23px; float:left; margin:0px; padding:6px 0 0 13px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/bookmark.jpg); background-repeat:no-repeat; } .bookmark:hover { width:117px; height:23px; float:left; margin:0px; padding:6px 0 0 13px; font-family:Arial; font-size:12px; font-weight:bold; color:#464646; text-align:center; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/bookmarkover.jpg); background-repeat :no-repeat; } #callus { width:264px; height:25px; float:left; margin:229px 0 0 0; padding:20px 0 0 0; font-family:Arial; font-size:20px; color:#393939; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/callus.jpg); background-repeat:no-repeat; } #callus h3 { width:264px; height:25px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:20px; color:#393939; } .callus { font-family:Arial; font-size:24px; color:#c6891e; padding:0 0 0 34px; } #leftheading { width:471px; height:42px; float:left; margin:44px 0 0 0; padding:4px 0 0 58px; font-family:Arial; font-size:30px; color:#13819a; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/leftheading.jpg); background-repeat:no-repeat; } #leftheading h2 { width:471px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:30px; font-weight:normal; color:#13819a; } #lefttxtblank { width:509px; float:left; margin:0px; padding:27px 0 0 20px; } #leftredtxt { width:509px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:18px; color:#cf7d09; } #lefttxt { width:509px; float:left; margin:0px; padding:31px 0 0 0; font-family:Arial; font-size:12px; color:#4a513d; line-height:20px; } .leftboldtxt { font-family:Arial; font-size:12px; font-weight:bold; color:#4a513d; } .lefttxt { font-family:Arial; font-size:12px; color:#4a513d; background-color:#cee181; } .lefttxt02 { font-family:Arial; font-size:12px; color:#4a513d; background-color:#cee181; padding:0 27px 0 3px; } #buttonbg { width:501px; height:25px; float:left; margin:10px 0 0 0; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/hline.jpg); background-repeat:repeat-x; background-position:center; } .more { width:82px; height:20px; float: right; margin:0px; padding:5px 0 0 0; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-align:center; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/morebutton.jpg); background-repeat: no-repeat; } .more:hover { width:82px; height:20px; float: right; margin:0px; padding:5px 0 0 0; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-align:center; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/morebutton.jpg); background-repeat: no-repeat; } /*-----------------------------------------------------CONTENTLEFT-------------------------------------------------------------------------------------------------------------END----------*/ #contentright { width:229px; float:left; margin:0px; padding:95px 0 0 0; } #search { width:229px; height:78px; float:left; margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/search.jpg); background-repeat:no-repeat; } #searchblank { width:179px; height:56px; float:left; margin:0px; padding:22px 0 0 50px; } #searchinput { width:103px; height:22px; float:left; margin:0px; padding:0px; } .searchinput { width:97px; height:18px; float:left; margin:0px; padding:4px 0 0 6px; font-family: Arial; font-size:10px; color:#070808; } #searchbutton { width:51px; height:21px; float:left; margin:1px 0 0 10px; padding:0px; } .search { width:51px; height:18px; float:left; margin:0px; padding:3px 0 0 0; font-family: Arial; font-size:10px; color:#070808; text-align:center; text-decoration:none; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/searchbutton.jpg); background-repeat:no-repeat; } .search:hover { width:51px; height:18px; float:left; margin:0px; padding:3px 0 0 0; font-family: Arial; font-size:10px; color:#070808; text-align:center; text-decoration:none; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/searchbutton.jpg); background-repeat:no-repeat; } #advancesearch { width:103px; height:22px; float:left; margin:0px; padding:0px; } .advancesearch { width:97px; height:18px; float:left; margin:0px; padding:4px 0 0 6px; font-family: Arial; font-size:11px; font-weight:bold; color:#ce932b; text-decoration:none; } .advancesearch:hover { width:97px; height:18px; float:left; margin:0px; padding:4px 0 0 6px; font-family: Arial; font-size:11px; font-weight:bold; color:#ce932b; text-decoration:underline; } /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #rightnav { width:230px; height:54px; float:left; margin:11px 0 0 0; padding:0px; } #rightnav ul { width:230px; height:54px; float:left; margin:0px; padding:0px; display:block; } #rightnav ul li { width:45px; height:54px; float:left; margin:0 1px 0 0; padding:0px; display:block; } #rightnav ul li a.login { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image:urlhttp://demo.templateworld.com/zero/in_action/projection/images/login.jpg); background-repeat:no-repeat; } #rightnav ul li a.login { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/login.jpg); background-repeat:no-repeat; } #rightnav ul li a.check { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/check.jpg); background-repeat:no-repeat; } #rightnav ul li a.check:hover { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/check.jpg); background-repeat:no-repeat; } #rightnav ul li a.chat { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/chat.jpg); background-repeat:no-repeat; } #rightnav ul li a.chat:hover { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/chat.jpg); background-repeat:no-repeat; } #rightnav ul li a.idea { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/idea.jpg); background-repeat:no-repeat; } #rightnav ul li a.idea:hover { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/idea.jpg); background-repeat:no-repeat; } #rightnav ul li a.privecy { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/privecy.jpg); background-repeat:no-repeat; } #rightnav ul li a.privecy:hover { width:45px; height:54px; float:left; margin:0px; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/privecy.jpg); background-repeat:no-repeat; } /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #morelinksheading { width:229px; height:41px; float:left; margin:25px 0 0 0; padding:0px; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/morelinksheading.jpg); background-repeat:no-repeat; } #morelinksheading h5 { width:177px; height:31px; float:left; margin:0px; padding:10px 0 0 52px; font-family:Arial; font-size:18px; font-weight:normal; color:2a2a2a; } #morelinks { width:211px; float:left; margin:0px; padding:23px 0 34px 18px; background-color:#c7da79; } .date { width:47px; height:15px; float:left; margin:0px; padding:2px 0 0 17px; font-family:Arial; font-size:11px; font-weight:bold; color:#FFF; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/datebg.jpg); background-repeat:no-repeat; } .linkblank { width:200px; height:12px; float:left; margin:8px 0 12px 0; padding:0 0 0 11px; font-family:Arial; font-size:11px; color:#FFF; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/arrow.jpg); background-repeat:no-repeat; background-position:left 5px; } .linkblank02 { width:200px; height:12px; float:left; margin:11px 0 8px 0; padding:0 0 0 11px; font-family:Arial; font-size:11px; color:#FFF; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/arrow.jpg); background-repeat:no-repeat; background-position:left 5px; } .linkblank03 { width:200px; height:12px; float:left; margin:0 0 8px 0; padding:0 0 0 11px; font-family:Arial; font-size:11px; color:#FFF; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/arrow.jpg); background-repeat:no-repeat; background-position:left 5px; } .linkblank04 { width:200px; height:12px; float:left; margin:0 0 14px 0; padding:0 0 0 11px; font-family:Arial; font-size:11px; color:#FFF; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/arrow.jpg); background-repeat:no-repeat; background-position:left 5px; } .link { width:200px; height:12px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:11px; color:#FFF; text-decoration: underline; } .link:hover { width:200px; height:12px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:11px; color:#FFF; text-decoration: none; } #morelinksbot { width:229px; height:8px; float:left; margin:0px; padding:0px; overflow:hidden; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/morelinksbot.jpg); background-repeat:no-repeat; } /*--------------------------------------------------------------RIGHTPART------------------------------------------------------------------------------------------------------END----------*/ #testimonialbg { width:825px; height:202px; float:left; margin:36px 0 0 0; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/testmonialbg.jpg); background-repeat:no-repeat; } #testimonialtxtblank { width:806px; height:184px; float:left; margin:0px; padding:18px 0 0 19px; } #testimonialheading { width:742px; height:40px; float:left; margin:0px; padding:0 0 0 64px; font-family:Arial; font-size:30px; color:#33b0cd; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/testimonial.jpg); background-repeat:no-repeat; } #testimonialheading h2 { width:806px; height:40px; float:left; margin:0px; padding:0px; font-family:Arial; font-size:30px; color:#33b0cd; } #testimonialdate { width:56px; height:38px; float:left; margin:11px 0 0 0; padding:26px 0 0 0; font-family:Arial; font-size:28px; font-weight:bold; color:#829241; text-align:center; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/testimonial-date.jpg); background-repeat:no-repeat; } #testimonialtxt { width:417px; float:left; margin:11px 0 0 0; padding:0 0 0 17px; font-family:Arial; font-size:14px; font-style:italic; color:#a9a9a9; line-height:20px; } #testimonialname { width:417px; float:left; margin:11px 0 0 0; padding:0 0 0 73px; font-family:Arial; font-size:14px; font-weight:bold; color:#FFF; text-align:right; } #testimonialbutton { width:116px; height:38px; float:left; margin:0 0 0 135px; padding:0px; } .testimonialbutton { width:116px; height:32px; float:left; margin:0px; padding:6px 0 0 0; font-family:Arial; font-size:20px; font-weight:bold; color:#2e2e2e; text-align:center; text-decoration:none; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/detailsbutton.jpg); background-repeat:no-repeat; } .testimonialbutton:hover { width:116px; height:32px; float:left; margin:0px; padding:6px 0 0 0; font-family:Arial; font-size:20px; font-weight:bold; color:#2e2e2e; text-align:center; text-decoration:none; background-image: url(images/detailsbuttonover.jpg); background-repeat:no-repeat; } /*------------------------------------------------------------------CONTENTPART-------------------------------------------------------------------------------------END---------------------*/ #footerbg { width:904px; height:135px; float: left; margin:0px; padding:0px; background-image:url(http://demo.templateworld.com/zero/in_action/projection/images/footerbg.jpg); background-repeat:no-repeat; } #footerlinks { width:904px; height:13px; float: left; margin:19px 0 0 0; padding:0px; font-family:"Trebuchet MS"; font-size:10px; color:#FFF; text-align:center; text-decoration:none; text-transform:uppercase; } .footerlinks { font-family:"Trebuchet MS"; font-size:10px; color:#FFF; text-align:center; text-decoration:none; text-transform:uppercase; padding:0 5px 0 5px; } .footerlinks:hover { font-family:"Trebuchet MS"; font-size:10px; color:#FFF; text-align:center; text-decoration: underline; text-transform:uppercase; padding:0 5px 0 5px; } #copyrights { width:904px; height:13px; float: left; margin:5px 0 0 0; padding:0px; font-family: Arial; font-size:10px; color:#2d2d2d; text-align:center; } #validation { width:534px; float: left; margin:5px 0 0 0; padding:0 0 0 370px; } .xhtml { width:70px; height:20px; float: left; margin:0px; padding:5px 0 0 12px; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/xhtml.jpg); background-repeat: no-repeat; } .xhtml:hover { width:70px; height:20px; float: left; margin:0px; padding:5px 0 0 12px; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/xhtml.jpg); background-repeat: no-repeat; } .css { width:62px; height:20px; float: left; margin:0 0 0 3px; padding:5px 0 0 20px; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/css.jpg); background-repeat: no-repeat; } .css:hover { width:62px; height:20px; float: left; margin:0 0 0 3px; padding:5px 0 0 20px; font-family:"Trebuchet MS"; font-size:10px; font-weight:bold; color:#414141; text-decoration:none; text-transform:uppercase; background-image: url(http://demo.templateworld.com/zero/in_action/projection/images/css.jpg); background-repeat: no-repeat; } #designedby { width:904px; height:13px; float: left; margin:5px 0 0 0; padding:0px; font-family: Arial; font-size:12px; font-weight:bold; color:#9b5b01; text-align:center; } .designedby { font-family: Arial; font-size:12px; font-weight:bold; color:#faf56d; text-align:center; text-decoration:none; } .designedby:hover { font-family: Arial; font-size:12px; font-weight:bold; color:#faf56d; text-align:center; text-decoration:none; }

sade

Tasarımın üzerindeki yazı:

Tasarımın altındaki yazı:

CSS Kodu

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;} /* CSS Document by Dieter Schneider 2006 | www.csstemplateheaven.com */ * {margin: 0; padding: 0; } body { background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/body_tile.jpg); background-repeat: repeat-y; font-size: 62.5%; font-family: Georgia, "Times New Roman", Times, serif; } #container { width: 954px; font-size: 1.2em; } #left { background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/left_bg.jpg); float: left; height: 434px; width: 274px; padding-top: 275px; } #right { background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/right_bg.jpg); float: left; width: 590px; padding-top:150px; padding-right: 90px; background-repeat: no-repeat; } #footer { background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/footer.jpg); background-repeat: no-repeat; height: 100px; width: 524px; padding-left: 430px; padding-top: 28px; clear: both; } #navcontainer { width: 150px; } #navcontainer ul { margin-left: 55px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a { display: block; padding: 3px; width: 160px; } #navcontainer a:link, #navlist a:visited { color: #74752b; text-decoration: none; background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/bullet.png); background-repeat: no-repeat; padding-left: 25px; padding-bottom: 7px; font-weight: bolder; } #navcontainer a:hover { color: #75492b; background-image: url(http://css4free.com/wp-content/uploads/templates/beautifulcurves/images/bullet_hover.png); background-repeat: no-repeat; } p {margin-bottom: 15px; margin-top: 15px;} h1 { text-align: center; margin-top: -55px; font-family: "Times New Roman", Times, serif; font-style: italic; color: #808D33; font-size: 2em; } h2 { text-align: center; margin-top: 7px; margin-bottom: 40px; font-family: "Times New Roman", Times, serif; font-style: italic; color: #9BA46D; font-size: 1.2em; } h3 { text-align: left; font-family: "Times New Roman", Times, serif; font-style: italic; color: #98A549; font-size: 1.5em; } h4 { text-align: left; font-family: "Times New Roman", Times, serif; font-style: italic; color: #808D33; font-size: 1.5em; margin-left: 107px; margin-bottom: 30px; } blockquote { font-style: italic; border: 1px dotted #98A549; padding-left: 15px; padding-right: 15px; margin-bottom: 15px; margin-top: 15px; color: #74752B; } a:link {color: #7C8832} a:visited {color: #74752B} a:hover {color: #993300} a:active {color: #993300}

kahve rengi güzel css
Tasarımın üzerindeki yazı:

<div id="main"> <div class="box">  <div id="header"> <ul class="top-links"> <li class="first"><a href="#">Specials</a></li> <li><a href="#">Search</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Create an account</a></li> <li class="last"><a href="#">Customer Login</a></li> </ul> <div class="wrapper">  <div class="logo"> <a href="index.html"><img src="images/logo.gif" alt="" /></a> </div>  <div class="box1 fright"> <div class="wrapper"> <div class="settings"> <ul> <li>Choose Language : <a href="#"><img src="images/flag_en.gif" alt="" /></a><a href="#"><img src="images/flag_ger.gif" alt="" /></a><a href="#"><img src="images/flag_sp.gif" alt="" /></a></li> <li class="last">Currencies : &nbsp;<select><option>US Dollar</option></select></li> </ul> </div> <div class="cart"> Shopping Cart<br /> now in your cart <a href="#">5 items</a> </div> </div> </div> </div> </div>  <ul class="nav"> <li class="first"><a href="index.html">Home Page</a></li> <li><a href="index-1.html" class="current">New Products</a></li> <li><a href="index-2.html">Specials</a></li> <li><a href="index-3.html">My Account</a></li> <li><a href="index-4.html">Contact us</a></li> </ul>  <div class="banner-box"> <a href="#"><img src="images/banner1.png" alt="" class="banner"/></a> </div>  <div id="content"> <div class="content-box"> <div class="container"> <div class="aside"> <h2><span>Search</span></h2> <div class="box2"> <h6>Enter keyword :</h6> <form action="" id="search-form"> <fieldset> <div class="field"> <input type="text" class="text" /><input type="submit" class="submit" value="ok" /> </div> <a href="#">Advanced Search</a> </fieldset> </form> </div> <h2><span>Categories</span></h2> <div class="box3"> <ul class="list1"> <li><a href="#">Accessories</a></li> <li><a href="#">Activewear</a></li> <li><a href="#">Casual Shirts</a></li> <li><a href="#">Denim</a></li> <li><a href="#">Dress Shirts</a></li> <li><a href="#">Outerwear &amp; Jackets</a></li> <li><a href="#">Panamas &amp; Robes</a></li> <li><a href="#">Underwear &amp; Socks</a></li> <li><a href="#">Weekly Specials</a></li> <li><a href="#">Business Casual</a></li> <li><a href="#">Shoes &amp; Sandals</a></li> <li><a href="#">Swim Suits &amp; Shorts</a></li> <li class="last"><a href="#">Other Categories</a></li> </ul> </div> <h2><span>Manufacturers</span></h2> <div class="box2"> <form action="" id="manufactures-form"> <fieldset> <select><option>Please Select</option></select> </fieldset> </form> </div> </div> <div class="content"> <div class="indent"> <div class="box4"> <div class="pagination"> <span class="fleft">Displaying 1 to 2</span> <span class="fright">Result Pages:  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> ...  <a href="#">[Next >>]</a> </span> </div>

Tasarımın altındaki yazı:

<div class="wrapper"> <img src="images/img1.jpg" alt="" class="img-indent" /> <h5>Option congue id nihil imperdi doming</h5> <p class="p1">Vulputate esse molestie consequat vel illum. dolore eu feugiat nulla facilisis at vero eros et accumsan. et iusto odio dignissim. qui blandit praesent luptatum zzril delenit augue duis dolore te feugait</p> <p class="p1"><strong class="price">$ 89,95</strong></p> <a href="#">Details</a> <a href="#">Add to Cart</a> </div> <div class="line-hor"></div> <div class="img-box"> <img src="images/img1.jpg" alt="" class="img-indent" /> <h5>Option congue id nihil imperdi doming</h5> <p class="p1">Vulputate esse molestie consequat vel illum. dolore eu feugiat nulla facilisis at vero eros et accumsan. et iusto odio dignissim. qui blandit praesent luptatum zzril delenit augue duis dolore te feugait</p> <p class="p1"><strong class="price">$ 89,95</strong></p> <a href="#">Details</a> <a href="#">Add to Cart</a> </div> <div class="pagination"> <span class="fleft">Displaying 1 to 2</span> <span class="fright">Result Pages:  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> ...  <a href="#">[Next >>]</a> </span> </div> </div> </div> </div> <div class="clear"></div> </div> </div> </div>  <div id="footer"> <div class="container"> <div class="copy"> <div class="indent"> <strong>Copyright &copy; 2010 Your Store.  All Rights Reserved</strong> <a href="#">Privacy Policy</a> / <a href="#">Terms of Use</a> / <b><a href="#">Powered by osCommerce</a></b> </div> </div> <div class="fright"><img src="images/transfers.gif" alt="" /></div> <div class="clear"></div> </div> </div> </div> </div> </body> </html>

CSS Kodu

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;} /*======= index.html =======*/ #page1 #content .col-1 {width:227px; margin-right:3px;} #page1 #content .col-2 { width:227px;} /*======= index-2.html =======*/ #page3 #content .col-1 {width:227px; margin-right:3px;} #page3 #content .col-2 { width:227px;} /*=========================*/ * { margin:0; padding:0; } html, body { height:100%; } body { background:url(images/pattern.gif) 50% 0 #6b6f4c; font-family:Tahoma, Geneva, sans-serif; font-size:100%; line-height:.8125em; color:#2f2c1d; } img { border:0; vertical-align:top; text-align:left; } object { vertical-align:top; outline:none; } ul, ol { list-style:none; } .fleft { float:left; } .fright { float:right; } .clear { clear:both; } .col-1, .col-2, .col-3 { float:left; } .alignright { text-align:right; } .aligncenter { text-align:center; } .wrapper { width:100%; overflow:hidden; } .container { width:100%; } /*==== GLOBAL =====*/ #main { width:736px; margin:0 auto; position:relative; padding:25px 0 45px 0; font-size:.69em; } #header { border:1px solid #2f2c1d; background:#bdb38c; padding:33px 16px 28px 12px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); position:relative; } #content { } #content .aside { float:left; width:207px; margin-right:9px; margin-top:-122px; position:relative; } #content .content { float:left; width:458px; } #content .content .indent { padding:0 0 0 0; } #footer { border:1px solid #2f2c1d; background:#bdb38c; padding:12px 39px 12px 0; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); position:relative; } /*---- tailings ----*/ .tail-top { background:url(images/tail-top.gif) left top repeat-x #ffbb00; } .tail-bottom { background:url(images/tail-bottom.gif) left bottom repeat-x; } /*----- forms parameters -----*/ input, select, textarea { font-family:Tahoma, Geneva, sans-serif; font-size:1em; vertical-align:middle; font-weight:normal; } /*----- other -----*/ .img-indent { margin:0 12px 0 0; float:left; } .img-box { width:100%; overflow:hidden; padding-bottom:15px; } .img-box img { float:left; margin:0 12px 0 0; } .extra-wrap { overflow:hidden; } p { margin-bottom:16px; } .p1 { margin-bottom:8px; } .p2 { margin-bottom:16px; } .p3 { margin-bottom:24px; } /*----- txt, links, lines, titles -----*/ a { color:#2f2c1d; outline:none; } a:hover{ text-decoration:none; } h1 { } h2 { font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#d2cebe; text-transform:uppercase; border:1px solid #2f2c1d; padding:1px; background:#9e946e; } h2 span { background:url(images/title-tail.gif) 0 0 repeat-x; height:26px; line-height:26px; padding-left:28px; display:block; } h3 { border-bottom:1px solid #807d6d; font-size:15px; line-height:1.2em; text-transform:uppercase; padding-bottom:3px; margin-bottom:12px; } h4 { } h5 { font-size:1em; } h6 { font-size:1em; margin-bottom:5px; } .price { display:block; color:#ec0600; font-size:18px; line-height:1.2em; } .txt1 { } .txt2 { } .link1 { display:block; float:left; background:url(images/link1-bgd.gif) left top repeat-x; color:#fff; text-decoration:none; } .link1:hover { text-decoration:underline; } .link1 em { display:block; background:url(images/link1-left.gif) no-repeat left top; } .link1 b { display:block; background:url(images/link1-right.gif) no-repeat right top; padding:2px 15px 2px 15px; font-weight:normal; font-style:normal; } .button { float:right; } .button span { display:block; background:url(images/button-left.gif) no-repeat left top; padding-left:3px; } .button span span { background:url(images/button-right.gif) no-repeat right top; padding-right:4px; padding-left:0; } .button span span a { display:block; background:#333743; padding:4px 5px 3px 5px; color:#fff; text-decoration:none; text-transform:uppercase; } .button span span a:hover { text-decoration:underline; } .line-hor { background:#6e6e6e; height:1px; overflow:hidden; font-size:0; line-height:0; margin:30px 0 30px 0; } .line-ver { background-image:url(images/line-ver.gif); background-repeat:repeat-y; width:100%; } .title { margin-bottom:20px; } /*==================boxes====================*/ .box { background:#d2cebe; border:8px solid #2f2c1d; padding:11px 6px 6px 6px; } .box1 { background:#d2cebe; border:1px solid #2f2c1d; padding:8px 14px 7px 16px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); position:relative; } .box2 { background:#d2cebe; border:1px solid #2f2c1d; border-top:0; padding:11px 20px 16px 29px; margin-bottom:-1px; position:relative; } .box3 { background:#bdb38c; border:1px solid #2f2c1d; border-top:0; padding:14px 20px 13px 20px; margin-bottom:-1px; } .box4 { border:1px solid #2f2c1d; background:#d2cebe; position:relative; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); padding:10px; margin-bottom:4px; } .box4.last { margin-bottom:0; } .banner-box { position:relative; background:url(images/banner-bg.gif) #bdb38c; height:120px; border:1px solid #2f2c1d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); } .banner-box .banner { position:absolute; right:13px; top:0; } .content-box { border:1px solid #a19d8d; padding:8px 16px 9px 16px; margin:10px 0 10px 0; background:url(images/content-box-bg.gif); } .address { float:left; } .address dt { margin-bottom:13px; } .address dd { clear:both; } .address dd span { float:left; width:70px; } /*===== header =====*/ .top-links { position:absolute; right:-1px; top:-22px; background:url(images/top-bg.gif) 0 0 repeat-x; } .top-links li { float:left; padding:10px 0 8px 0; } .top-links li.first { background:url(images/top-left.gif) no-repeat 0 0; padding-left:28px; } .top-links li.first a { border-left:none; } .top-links li.last { background:url(images/top-right.gif) no-repeat 100% 0; padding-right:12px; } .top-links li a { color:#211f13; text-decoration:none; border-left:1px solid #211f13; padding:0 8px 0 8px; } .top-links li a:first-letter { text-decoration:underline; } .top-links li a:hover { text-decoration:underline; } #header .logo { float:left; } .settings { float:left; padding-right:14px; border-right:1px solid #2f2c1d; font-weight:bold; color:#2f2c1d; } .settings ul { } .settings ul li { background:url(images/marker1.gif) no-repeat 0 2px; padding:0 0 5px 19px; } .settings ul li.last { padding-bottom:0; } .settings ul li img { margin-left:5px; } .settings ul li select { width:108px; background:#dddace; border:1px solid #bababa; border-left:1px solid #3b3b3b; border-top:1px solid #3b3b3b; } .cart { float:left; font-weight:bold; color:#2f2c1d; padding:5px 0 5px 12px; } .cart a { color:#b85200; text-decoration:none; } .cart a:hover { text-decoration:underline; } /*===== navigation =====*/ ul.nav { position:relative; margin:5px 0; padding:5px 0 5px 0; border:1px solid #2f2c1d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; behavior:url(js/PIE.htc); background:url(images/nav-bg.gif) 0 0 repeat-x #4a4e31; font-size:16px; line-height:1.2em; text-transform:uppercase; text-align:center; } ul.nav li { display:inline; } ul.nav li a { font-family:Arial Narrow, Arial, Helvetica, sans-serif; color:#d2cebe; text-decoration:none; border-left:1px solid #91947d; padding:0 23px 0 27px; font-weight:bold; } ul.nav li.first a { border:none; } ul.nav li a:hover, ul.nav li a.current { color:#fff; } /*===== content =====*/ #content .section { padding-bottom:30px; } .list1 li { border-bottom:1px dotted #000; background:url(images/marker3.gif) no-repeat 0 5px; padding:0 0 4px 10px; margin-bottom:2px; } .list1 li.last { border:none; padding-bottom:0; margin-bottom:0; } .list1 li a { font-weight:bold; color:#2f2c1d; text-decoration:none; } .list1 li a:hover { color:#a5600e; } .pagination { padding:5px 0 15px 0; width:100%; overflow:hidden; color:#6e6e6e; } .pagination a { color:#041b33; } /*===== footer =====*/ #footer .copy { float:left; background:url(images/copy-bg.gif) no-repeat 0 100%; padding:0 0 20px 0; position:absolute; left:-1px; bottom:-22px; width:407px; } #footer .copy .indent { padding:0 0 0 46px; } #footer .copy strong { display:block; padding-bottom:4px; } #footer .copy a { text-decoration:none; color:#2f2c1d; } #footer .copy a:hover { text-decoration:underline; } #footer .copy b a { text-decoration:underline; color:#a5600e; } #footer .copy b a:hover { text-decoration:none; } /*----- forms -----*/ #search-form fieldset { border:none; } #search-form .field { height:18px; } #search-form input.text { border:1px solid #666467; background:#fff; width:110px; padding:0 0 1px 3px; margin-right:6px; } #search-form input.submit { background:url(images/submit.gif) 0 0 repeat-x #999e74; border:1px solid #000; font-weight:bold; text-shadow:1px 1px 0 #c6c8b1; color:#2f2c1d; width:23px; cursor:pointer; } #search-form a { color:#2f2c1d; background:url(images/marker2.gif) no-repeat 0 4px; padding-left:11px; } #manufactures-form fieldset { border:none; padding:6px 0 5px 0; } #manufactures-form select { width:146px; border:1px solid #bababa; background:#fff; border-left:1px solid #3b3b3b; border-top:1px solid #3b3b3b; } #contacts-form fieldset { border:none; width:100%; overflow:hidden; display:block; padding-bottom:22px; } #contacts-form .col-1 { width:170px !important; margin-right:0 !important; } #contacts-form .col-2 { width:213px !important; margin-right:0 !important; } #contacts-form label { display:block; height:25px; overflow:hidden; } #contacts-form input { color:#2f2c1d; border:1px solid #a4a4a4; background:none; padding:2px 0 2px 5px; width:160px; } #contacts-form textarea { color:#2f2c1d; border:1px solid #a4a4a4; background:none; padding:2px 0 2px 5px; width:205px; overflow:auto; height:63px; margin-bottom:9px; } #contacts-form a { color:#a5600e; } /*==========================================*/

gezi turizm travel css

Tasarımın üzerindeki yazı:

<div id="templatemo_container"> <div id="templatemo_header_top"></div> <div id="templatemo_header_section"> <div class="templatemo_header_box"> <img alt="Box Image 1" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_box_image_1.jpg" /> <img alt="Box Image 2" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_box_image_2.jpg" /> </div> <div class="templatemo_topmenu"> <ul> <li><a href="#" class="current">PROFILE</a></li> <li><a href="#">CONTACT SHEET</a></li> <li><a href="#">TERMS &amp; CODITIONS</a></li> <li><a href="#">TOUR PACKAGES</a></li> </ul> </div> </div> <div id="templatemo_content_section"> <div id="templatemo_content_left"> <div class="templatemo_content_left_banner"> <img alt="banner1" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_banner_1.jpg" /> <img alt="banner1" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_banner_2.jpg" /> </div> <div id="templatemo_content_left_top"> <h1>HOŞ GELDİNİZ </h1>

Tasarımın altındaki yazı:

<p>This is a travel website template provided by <a title="free css" href="http://www.templatemo.com" target="_parent">TemplateMo.com</a>. You may use this layout for your tour and travel related websites.</p> <p>Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus.</p> <p>Quisque in diam a justo <a href="#">condimentum</a> molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet.<br /> <br /> Quisque in diam a justo <a href="#">condimentum</a> molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet.</p> </div> <div id="templatemo_content_left_bot"></div> </div> <div id="templatemo_content_right"> <div id="templatemo_content_right_section1"> <div id="templatemo_location"> <div class="templatemo_location_box"> <div class="templatemo_location_box_text"><a href="#">Vegas</a></div> <img alt="Vegas" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_vegas.jpg" style="float:right" /> </div> <div class="templatemo_location_box"> <div class="templatemo_location_box_text"><a href="#">Canada</a></div> <img alt="Canada" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_canada.jpg" style="float:right"/> </div> <div class="templatemo_location_box"> <div class="templatemo_location_box_text"><a href="#">Ireland</a></div> <img alt="Ireland" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_ireland.jpg" style="float:right" /> </div> <div class="templatemo_location_box"> <div class="templatemo_location_box_text"><a href="#">England</a></div> <img alt="England" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_england.jpg" style="float:right" /> </div> <div class="templatemo_location_box"> <div class="templatemo_location_box_text"><a href="#">Montana</a></div> <img alt="Montana" src="http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_montana.jpg" style="float:right" /> </div> </div> </div> <div id="templatemo_content_right_section2"> <div id="templatemo_form"> <form action="#" method="post"> <div class="templatemo_form_roll"> <label>From :</label> <input class="inputfield" name="from" type="text" id="from"/> </div> <div class="templatemo_form_roll"> <label>To :</label> <input class="inputfield" name="to" type="text" id="to"/> </div> <div class="templatemo_form_col"> <label> Search : </label><br /> <input name="search" type="radio" value="exact_dates" checked="checked" /> Exact Dates <input name="search" type="radio" value="flexible_dates" />Flexible Dates </div> <div class="templatemo_form_col"> <label> Depart : </label><br /> <select name="month" > <option value="Jan">Jan</option> <option value="Feb">Feb</option> <option value="Mar">Mar</option> <option value="Apr">Apr</option> <option value="May">May</option> <option value="Jun">Jun</option> <option value="Jul">Jul</option> <option value="Aug">Aug</option> <option value="Sep">Sep</option> <option value="Oct">Oct</option> <option value="Nov">Nov</option> <option value="Dec">Dec</option> </select> <select name="day" > <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> </select> <select name="year" > <option value="2048">2048</option> <option value="2049">2049</option> <option value="2050">2050</option> </select> </div> <div class="templatemo_form_col"> <label> Return : </label><br /> <select name="month" > <option value="Jan">Jan</option> <option value="Feb">Feb</option> <option value="Mar">Mar</option> <option value="Apr">Apr</option> <option value="May">May</option> <option value="Jun">Jun</option> <option value="Jul">Jul</option> <option value="Aug">Aug</option> <option value="Sep">Sep</option> <option value="Oct">Oct</option> <option value="Nov">Nov</option> <option value="Dec">Dec</option> </select> <select name="day" > <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> </select> <select name="year" > <option value="2048">2048</option> <option value="2049">2049</option> <option value="2050">2050</option> </select> </div> <div class="templatemo_form_col"> <input type="submit" name="Search" value="Search" alt="Search" id="button" title="Search" /> </div> </form> </div> </div> </div> </div> <div id="templatemo_content_footer"></div> <div id="templatemo_footer_section"> <div id="templatemo_footer_left"> <p><a href="http://validator.w3.org/check?uri=referer"><img height="31" alt="Valid XHTML 1.0 Transitional" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS!" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" vspace="8" border="0" /></a></p> <p>Copyright © Your Company Name<br /> <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a></p> </div> <div id="templatemo_footer_right"> <strong>QUICK CONTACT</strong> <p>Tel: 010-010-0140 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mobile: 030-030-0300<br /> Fax: 020-020-0280 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Email: info [at] yourcompany.com</p> </div> </div> </div> </body>  </html>

CSS Kodu

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;} /* CSS Credit: http://www.templatemo.com/ */ html { background: #33302F } body { margin: 0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; color: #fff; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_page_bg.jpg) repeat-x  center top; width: 100%; display: table; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #DD3108; background-position: left; padding: 0px; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #fff; margin-top: 0px; } #templatemo_container { width: 759px; margin: auto; } #templatemo_header_top { float: left; width: 759px; height: 120px; margin-top: 0px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_header.jpg) no-repeat; } #templatemo_header_section { float: left; width: 759px; height: 220px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_header_section.jpg) no-repeat; } * html #templatemo_header_section { width: 755px; } .templatemo_header_box { float: right; width: 215px; padding: 5px 0px 0px 15px; height: 200px; margin-right: 15px; } * html .templatemo_header_box { margin-right: 5px; } .templatemo_header_box img { margin-top:10px; } * html .templatemo_header_box img { margin-top: 5px; } .templatemo_topmenu{ float: left; margin: 192px 0px 0px 0px; margin-left: 21px; font-weight:bold; } .templatemo_topmenu ul { list-style: none; padding: 0px; margin: 0px; } .templatemo_topmenu li{ display: inline; } .templatemo_topmenu li a{ float: left; font-family: tahoma; font-size: 11px; text-decoration: none; text-align: center; color: #000; width: 120px; height: 25px; padding-top: 4px; } .templatemo_topmenu li a:hover, .templatemo_topmenu li .current{ color: #fff; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_top_current.jpg) repeat; } #templatemo_content_section { float: left; width: 759px; overflow: auto; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_bg2.jpg)  repeat-y; } /* Templatemo Left Content */ #templatemo_content_left { float: left; width: 518px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_left_bg.jpg)  repeat-y; } #templatemo_content_left_top { float: left; width: 430px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_left_top.jpg) no-repeat; color: #000; text-align: justify; padding: 30px 25px ; margin-left: 18px; } * html #templatemo_content_left_top { margin-left: 10px; } #templatemo_content_left_top a{ color:#ca721d; text-decoration: none; font-weight: bold; } #templatemo_content_left_top a:hover { color :#7b440e; text-decoration: none; font-weight: bold; } #templatemo_content_left_bot { float: left; width: 488px; height: 27px; margin-left: 18px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_left_bot.jpg) no-repeat; } * html #templatemo_content_left_bot { margin-left: 10px; } .templatemo_content_left_banner { padding : 5px 0px 0px 20px; } * html .templatemo_content_left_banner { padding : 5px 12px 0px 12px ; } #templatemo_content_right { float: left; width: 241px; height: 500px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_right_bg.jpg) repeat; } * html #templatemo_content_right { width: 235px; } #templatemo_content_right_section1 { float: left; width: 241px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_right_s1.jpg) no-repeat; } * html #templatemo_content_right_section1 { width: 235px; } #templatemo_content_right_section2 { float: left; width: 241px; height: 232px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_right_s2.jpg) no-repeat; } * html #templatemo_content_right_section2 { width: 235px; } /* Right Locations */ #templatemo_location{ margin-top:5px; width : 200px; height: 210px; } .templatemo_location_box{ margin: 3px 10px 0px 10px; font-weight:bold; width : 190px; height: 40px; text-decoration:none; font-size:11px; } .templatemo_location_box_text{ float:left; margin: 10px 0px 0px 10px; } .templatemo_location_box_text a{ float:left; color:#ca721d; text-decoration:none; } .templatemo_location_box_text a:hover{ color :#7b440e; vertical-align:middle; float:left; text-decoration:none; } /* Reservation Form */ #templatemo_form{ margin-top:5px; width : 200px; height: 250px; } .templatemo_form_roll{ margin: 10px 0px 0px 10px; width : 90px; float:left; } * html .templatemo_form_roll{ margin: 5px 0px 0px 5px; } .templatemo_form_roll label{ color : #7ba212; font-weight:bold; font-size:13px; } .templatemo_form_roll input{ width : 80px; height: 12px; font-size:9px; } .templatemo_form_col{ margin: 10px 0px 0px 10px; width : 195px; float:left; color : #7ba212; } .templatemo_form_col select{ margin: 0px 0px 0px 2px; } * html .templatemo_form_col{ margin: 5px 0px 0px 5px; } .templatemo_form_col label{ color : #7ba212; font-weight:bold; font-size:13px; } #button{ background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_button.jpg); border: none; cursor: pointer; font-size: 12px; font-weight: bold; height: 22px; margin: 0 0 0 90px; padding: 0 6px; text-align: center; vertical-align: bottom; white-space: pre; width: 65px; } #templatemo_content_footer { float: left; width: 759px; height: 27px; background: url(http://www.templatemo.com/templates/templatemo_056_travel/images/templatemo_content_footer.jpg) no-repeat; } #templatemo_footer_section { float: left; width: 759px; height: 50px; color: #adad7b; } #templatemo_footer_left { float: left; padding: 40px 0px 0px 0px; text-align: center; } #templatemo_footer_left a{ color : #adad7b; } #templatemo_footer_right { float: left; padding: 50px 0px 0px 50px; } .line { border-bottom: dashed 1px #fff; width: 100%; }

Tasarımın üzerindeki yazı:

Tasarımın altındaki yazı:

<img src="images/pic_1.jpg" width="171" height="137" alt="Pic 1" class="left" /> <p>Great Furniture is a free, tableless, W3C-compliant web design layout by New York Lasik Surgery.. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p> <p>These templates are licensed under a Creative Commons Attribution 2.5 License. This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to New York Lasik Surgery.</p> <p>If you are interested in seeing more of our free web template designs feel free to visit our website, www.worldclasslasik.com </p> <p class="more"><a href="#">more</a></p> </div> <h3>Company Profile</h3> <div id="profile"> <div id="corp"> <div id="corp-img"> Corporate Building </div> <p>If you're having problems editing the template please don't hesitate to ask for help on <a href="#">New York Lasik Surgery </a></p> </div> <div id="indu"> <div id="indu-img"> Industrial </div> <p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p> </div> <div class="clear"> </div> <p class="more"><a href="#">View Details</a></p> </div> </div> <div class="clear"> </div> <div id="spacer"> </div> <div id="footer"> <div id="copyright"> Copyright &copy; 2010 All right reserved | Design by <a href="http://www.worldclasslasik.com">new york lasik surgery</a> </div> <div id="footerline"></div> </div> </div> </body> </html>

GREAT FURNITURE

CSS Kodu

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;} html, body, h1, h2, h3, h4, ul, li { margin: 0; padding: 0; } h1 img { display: block; } img { border: 0; } a { color: #000; } a:hover { color: #9b5e01; } .left { float: left; } .right { float: right; } .more { text-align: right; } .clear { clear: both; } body { background: #fdd583 url(http://www.e-webtemplates.com/templates/user/great-furniture/images/page_bg.jpg) repeat-x; text-align: center; font: 11px verdana, arial, sans-serif; color: #9b5e01; padding-bottom: 10px; padding-top: 31px; } /** layout **/ #wrapper { text-align: left; margin: auto; width: 778px; position: relative; background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/body_bg.gif) repeat-y; } #header { position: absolute; top: 0; left: 243px; width: 535px; height: 279px; background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/header_2.jpg) no-repeat; } #left { float: left; width: 243px; } #logo { width: 244px; height: 152px; background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/header_1.jpg) no-repeat; text-align: center; color: #9b5e01; } #logo h1 { padding-top: 30px; font: 24px "arial narrow", arial, sans-serif; } #logo p { margin: 8px 25px 4px 25px; border-top: 1px solid #9b5e01; border-bottom: 1px solid #9b5e01; padding: 3px; letter-spacing: 0.2em; font-weight: bold; } #nav { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/nav_left.jpg) no-repeat; } #nav ul { margin-left: 9px; padding-left: 1px; padding-bottom: 29px; background: #2A2A2A bottom left url(http://www.e-webtemplates.com/templates/user/great-furniture/images/nav_bot.jpg) no-repeat; } #nav li { list-style: none; font: 14px "arial narrow", arial, sans-serif; border-top: 1px solid #959595; background: 188px 10px url(http://www.e-webtemplates.com/templates/user/great-furniture/images/arr_white.gif) no-repeat; padding: 7px 0 0 31px; } #nav a { color: #fff; text-decoration: none; border-left: 1px solid #959595; padding-left: 10px; display: block; width: 90%; padding: 2px 0 6px 8px; } #nav a:hover { text-decoration: underline; } #nav .important { border: none; background: 188px 10px url(http://www.e-webtemplates.com/templates/user/great-furniture/images/arr_orange.gif) no-repeat; } #nav .important a { color: #fdd583; } #news { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/news_bg.jpg) repeat-y; padding-left: 37px; padding-right: 22px; padding-bottom: 3px; text-align: justify; } #news h2 { font-size: 12px; color: #9b5e01; } #news h3, #news p { font-size: 11px; margin: 1em 8px 1em 0; } #news a { color: #9b5e01; font-weight: bold; text-decoration: underline; } #news a:hover { color: #9b5e01; text-decoration:none; } #news .more { font-size: 9px; } #news .hr-dots { background: center url(http://www.e-webtemplates.com/templates/user/great-furniture/images/dots.gif) repeat-x; height: 10px; } #support { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/support.jpg) no-repeat; padding: 1px; height: 97px; color: #1A1A18; } #support p { margin: 0.7em 2.6em; } #right { float: right; width: 490px; padding-right: 9px; padding-top: 301px; } #right h2 { font: 18px arial, sans-serif; color: #9b5e01; border-bottom: 1px solid #C4AE7C; padding-bottom: 6px; margin-bottom: 1em; } #right h3 { font: 14px arial, sans-serif; color: #9b5e01; border-bottom: 1px solid #C4AE7C; padding-bottom: 6px; margin-bottom: 1em; margin-top: 2em; } #welcome { margin-right: 20px; } #profile { margin-right: 16px; } #right .left { margin-right: 18px; } #right .more { font-weight: bold; font-size: 10px; } #corp, #indu { float: left; width: 49%; } #corp { margin-right: 1%; } #corp-img, #indu-img { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/pic_2.jpg) no-repeat; width: 112px; height: 23px; float: left; margin-right: 18px; text-align: center; padding-top: 90px; font-size: 9px; font-weight: bold; } #indu-img { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/pic_3.jpg) no-repeat; } #spacer { height: 2em; } #footer { background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/footer_bg.gif) repeat-y; } #copyright { text-align: center; padding: 22px 0px 30px 00px; font-size: 9px; color: #9b5e01; font-weight: bold; } #footerline{ background: url(http://www.e-webtemplates.com/templates/user/great-furniture/images/footerline.gif) no-repeat; height:10px; margin-top:0px; display:block; font-size:1px; }

bipolar takip eden menü

Tasarımın üzerindeki yazı:

Tasarımın altındaki yazı:

<div class="main"><span class="title"> <a href="http://www.free-css.com/free-css-templates.php"><img class="main" src="images/lemonlime.jpg" alt="website template image" /></a>This is my third Design</span> for OWD. I tried to keep the layout as simple as possible. As you can see, I chiefly had in mind a blog layout, though I think it would be useful for other purposes. I owe a great deal to the Andreas 07 template, from which I borrowed most of the code to have a fixed menu that works in as many browsers as I could get my hands on. I also received help from several members over at OWD. It validates as <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a>, and the <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> passes with a few level 1 warnings (pesky background-color) and one intentional level 2 warning that is a redefinition of padding to ensure proper layout in IE. I release this to the public, I just kindly ask that you keep the credit and link in the footer. <p class="comment"> <a href="http://www.free-css.com/free-css-templates.php">comments (6,589)</a> | <a href="http://www.free-css.com/free-css-templates.php">read more...</a></p> </div> <div class="date"><span class="green">Nov<br /> 21</span></div> 16</span></div> 27</span></div> <div class="main"><span class="title">Duis euismod enim euismod enim.</span>Curabitur mollis felis sit amet dolor. Nam mollis eros eu neque. Sed eleifend elit sit amet diam. Sed pulvinar lectus non metus. Vivamus urna ipsum, pellentesque vel, lobortis eget, fermentum a, lectus. Nulla non quam. Quisque molestie rhoncus nisi. Aliquam erat volutpat. Nulla mattis, arcu quis dapibus placerat, lacus nisi tincidunt ante, vel vestibulum eros nulla porttitor leo. In sit amet purus mattis quam accumsan blandit.</div> <span class="credit">&copy; 2006 Your Site | Template by <a target="_blank" rel="nofollow" href="http://www.demusDesign.com">Demus Design</a></span> </div> <div id="freecssfooter"> <div id="fcssholder"> <div id="bsap_2365" class="bsarocks bsap_b893e54e42ad5b76e7b252f59be18e67"></div> <div id="bsap_1635" class="bsarocks bsap_b893e54e42ad5b76e7b252f59be18e67"></div> <a target="_blank" rel="friend met" href="http://www.websitetemplateco.com/" title="Website Template">Free Website Templates</a> | <a target="_blank" rel="friend met" href="http://www.design-coder.com/" title="PSD To HTML">Design to HTML</a> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-159243-28"; urchinTracker(); </script> </body> </html>

CSS Kodu

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;} html, body { margin: 0; padding: 0; overflow: auto; } body { width: 100%; max-width: 100%; background-color: #333; font: 400 0.8em arial, sans-serif; color: #ccc; line-height: 1.4em; } a { text-decoration: none; color: #0c0; } a:hover { text-decoration: underline; color: #cf0; } #left { position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; width: 35%; text-align: right; background: #333 url('http://www.free-css.com/assets/files/free-css-templates/preview/page46/bipolar/fade.jpg') no-repeat right; } #outer { position: absolute; left: 0; top: 50%; width:100%; height: 240px; margin-top: -120px; } body > #left { position:fixed; } #main { height: 100%; margin: 20px 5% 20px 38%; padding-top: 0px !important; padding-top: 20px; overflow: visible; } h1 { display: inline; margin-right: 30px; font: 800 35px 'century gothic', 'trebuchet ms', arial, sans-serif; color: #fff; text-align: right; } span.title { display: block; margin: 0 0 5px 0; font: 600 1.1em 'century gothic', 'trebuchet ms', arial, sans-serif; color: #fff; } img.lime { margin-bottom: -6px; margin-right: 8px; } span.yellow { color: #cf0; } span.green { color: #0c0; } a.nav { display: block; margin: 0; text-decoration: none; font: 400 20px 'trebuchet ms', arial, sans-serif; color: #aaa; padding: 0 30px 3px 0; } a.nav:hover { color: #cf0; background: #222; text-decoration: none; } .credit a, .credit a:hover { color: #555; } .date { float: left; width: 2.0em; font: 600 1.3em arial, sans-serif; padding-right: 5px; text-align: right; } div.main { margin-left: 2.9em; margin-bottom: 25px; border-left: solid 1px #3a3a3a; padding: 0 30px 30px 5px; background: #333 url('http://www.free-css.com/assets/files/free-css-templates/preview/page46/bipolar/corner.jpg') no-repeat bottom right; } img.main { float: right; margin: 10px; padding: 4px; background: #0c0; border: solid 3px #2e2e2e; } a img.main:hover { background: #cf0; } div.quote { margin: 8px 0 12px 10px; color: #fff; background: #2a2a2a url('http://www.free-css.com/assets/files/free-css-templates/preview/page46/bipolar/quote.jpg') repeat-x top; border-bottom: solid 1px #2e2e2e; border-right: solid 1px #2e2e2e; border-left: solid 2px #0c0; padding: 8px; line-height: 1.7em; } p.comment { font-size: 0.9em; font-family: 'century gothic', 'trebuchet ms', arial, sans-serif; } span.credit { display: block; text-align: center; color: #555; margin: 15px 0 20px 0; font: 400 0.9em 'trebuchet ms', arial, sans-serif; }

joomla24 CSS gördünüzmü

)

Tasarımın üzerindeki yazı:

<head> <base href="http://www.joomla-templatedemo.de/" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="" /> <meta name="rights" content="" /> <meta name="language" content="de-DE" /> <meta name="generator" content="Joomla! 1.6 - Open Source Content Management" /> <title>Home</title> <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> <script src="/media/system/js/core.js" type="text/javascript"></script> <script src="/media/system/js/mootools-core.js" type="text/javascript"></script> <script src="/media/system/js/caption.js" type="text/javascript"></script> <script type="text/javascript"> function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); }); </script> <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/templates/moyoo_summer_painting/css/template.css" media="screen" />   <script type="text/javascript" src="/templates/moyoo_summer_painting/script.js"></script> </head> <body class="joomla16"> <div id="art-main"> <div class="art-sheet"> <div class="art-sheet-tl"></div> <div class="art-sheet-tr"></div> <div class="art-sheet-bl"></div> <div class="art-sheet-br"></div> <div class="art-sheet-tc"></div> <div class="art-sheet-bc"></div> <div class="art-sheet-cl"></div> <div class="art-sheet-cr"></div> <div class="art-sheet-cc"></div> <div class="art-sheet-body"><img src="/.../templates/moyoosummerpainting/images/logo.png" /> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-sidebar1"> <div class="art-block"> <div class="art-block-body"> <div class="art-blockheader"> <div class="l"></div> <div class="r"></div> <div class="t"> Main Menu</div> </div> <div class="art-blockcontent"> <div class="art-blockcontent-body">  <ul class="menu"><li id="current" class="active item435"><a href="/">Home</a></li><li class="item294"><a href="/index.php/site-map">Site Map</a></li><li class="item238"><a href="/index.php/sample-sites">Sample Sites</a></li><li class="item455"><a href="/index.php/using-joomla/extensions/components">Example Pages</a></li><li class="item469"><a href="/index.php/impressum">Impressum</a></li></ul>  <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="art-block"> <div class="art-block-body"> <div class="art-blockheader"> <div class="l"></div> <div class="r"></div> <div class="t"> Werbung</div> </div> <div class="art-blockcontent"> <div class="art-blockcontent-body">  <div class="bannergroup"> <div class="banneritem"> <br /> <div align="center"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div><br />				<div class="clr"></div> </div> </div>  <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="art-block"> <div class="art-block-body"> <div class="art-blockheader"> <div class="l"></div> <div class="r"></div> <div class="t"> Login Form</div> </div> <div class="art-blockcontent"> <div class="art-blockcontent-body">  <form action="/index.php" method="post" id="login-form" > <fieldset class="userdata"> <p id="form-login-username"> <label for="modlgn-username">Benutzername</label> <input id="modlgn-username" type="text" name="username" class="inputbox"  size="18" /> </p> <p id="form-login-password"> <label for="modlgn-passwd">Passwort</label> <input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18"  /> </p> <p id="form-login-remember"> <label for="modlgn-remember">Angemeldet bleiben</label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/> </p> <span class="art-button-wrapper"><span class="l"> </span><span class="r"> </span><input type="submit" name="Submit" class="button art-button" value="Anmelden" /></span> <input type="hidden" name="option" value="com_users" /> <input type="hidden" name="task" value="user.login" /> <input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD00MzU=" /> <input type="hidden" name="a604094c587b5ee33806e3e1e3661d60" value="1" />	</fieldset> <ul> <li> <a href="/index.php/using-joomla/extensions/components/users-component/password-reset"> Passwort vergessen?</a> </li> <li> <a href="/index.php/using-joomla/extensions/components/users-component/username-reminder"> Benutzername vergessen?</a> </li> <li> <a href="/index.php/using-joomla/extensions/components/users-component/registration-form"> Registrieren</a> </li> </ul> </form>  <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> </div> <div class="art-layout-cell art-content"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <div class="art-postcontent">  <div class="breadcrumbs"> <span class="showHere">Aktuelle Seite: </span><span>Home</span></div>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> <table class="position" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td width="50%"><div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> Lorem Ipsum</h2> <div class="art-postcontent">  <div class="custom"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et feugiat nulla facilisis</p></div>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </td><td width="50%"><div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> Duis Autem</h2> <div class="art-postcontent">  <div class="custom"> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto. Odio dignissim qui blandit praesent luptatum zzril delenit augue</p></div>  </div> </td></tr></table><div class="blog-featured"><div class="items-leading"> <div class="leading-0"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> <a href="/index.php/using-joomla/extensions/components/content-component/article-category-list/24-joomla" class="PostHeader">Joomla!</a></h2>

Tasarımın altındaki yazı:

<div class="art-postcontent">  <div class="art-article"><p><img src="/images/icon-48-themes.png" border="0" style="float: left; margin-left: 5px; margin-right: 5px;" />Congratulations! You have a Joomla! site! Joomla! makes your site easy to build a website just the way you want it and keep it simple to update and maintain.</p> <p>Joomla! is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of thousands of visitors. Joomla is open source, which means you can make it work just the way you want it to.</p></div>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> </div> <div class="items-row cols-2 row-0"> <div class="item column-1"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> <a href="/index.php/using-joomla/extensions/components/content-component/article-category-list/8-beginners" class="PostHeader">Beginners</a></h2> <div class="art-postcontent">  <div class="art-article"><p><img src="/images/icon-48-user.png" border="0" style="float: left; margin-left: 5px; margin-right: 5px;" />If this is your first Joomla site or your first web site, you have come to the right place. Joomla will help you get your website up and running quickly and easily.</p> <p>Start off using your site by logging in using the administrator account you created when you installed Joomla!.</p> </div><p class="readmore"><span class="art-button-wrapper"><span class="l"> </span><span class="r"> </span><a class="readon art-button" href="/index.php/using-joomla/extensions/components/content-component/article-category-list/8-beginners">Weiterlesen:&#160;Beginners</a></span></p>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> <div class="item column-2"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> <a href="/index.php/using-joomla/extensions/components/content-component/article-category-list/50-upgraders" class="PostHeader">Upgraders</a></h2> <div class="art-postcontent">  <div class="art-article"><p><img src="/images/icon-48-revert.png" border="0" style="float: left; margin-left: 5px; margin-right: 5px;" />If you are an experienced Joomla! 1.5 user, 1.6 will seem very familiar. There are new templates and improved user interfaces, but most functionality is the same. The biggest changes are improved access control (ACL) and nested categories.</p> </div><p class="readmore"><span class="art-button-wrapper"><span class="l"> </span><span class="r"> </span><a class="readon art-button" href="/index.php/using-joomla/extensions/components/content-component/article-category-list/50-upgraders">Weiterlesen:&#160;Upgraders</a></span></p>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> <span class="row-separator"></span> </div> <div class="items-row cols-2 row-1"> <div class="item column-1"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> <a href="/index.php/using-joomla/extensions/components/content-component/article-category-list/35-professionals" class="PostHeader">Professionals</a></h2> <div class="art-postcontent">  <div class="art-article"><p><img src="/images/icon-48-contacts.png" border="0" style="float: left; margin-left: 5px; margin-right: 5px;" />Joomla! 1.6 continues development of the Joomla Framework and CMS as a powerful and flexible way to bring your vision of the web to reality. With the administrator now fully MVC, the ability to control its look and the management of extensions is now complete.</p> </div><p class="readmore"><span class="art-button-wrapper"><span class="l"> </span><span class="r"> </span><a class="readon art-button" href="/index.php/using-joomla/extensions/components/content-component/article-category-list/35-professionals">Weiterlesen:&#160;Professionals</a></span></p>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> <div class="item column-2"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner"> <h2 class="art-postheader"> <a href="/index.php/the-joomla-project" class="PostHeader">The Project</a></h2> <div class="art-postcontent">  <div class="art-article"><p><img src="/images/icon-48-groups.png" border="0" width="48" height="48" style="float: left; border: 0; margin-left: 5px; margin-right: 5px;" />There are millions of users around the world and thousands of people who contribute to the Joomla! Project. They work in three main groups: the Production Working Group,  the Community Working Group and Open Source Matters.</p></div>  </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> <div class="cleared"></div> </div> </div> </div> </div> <span class="row-separator"></span> </div> </div> </div> </div> </div> <div class="cleared"></div> <div class="art-footer"> <div class="art-footer-body"> <div class="art-footer-text"> <p>Copyright &copy; 2011 --- moyoo. All Rights Reserved. <br/> <a href="http://www.joomla.org">Joomla!</a> ist freie, unter der <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU/GPL-Lizenz</a> ver&ouml;ffentlichte Software.</p> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> <p class="art-page-footer">Designed by moyoo - <a href="http://www.moyoo.de/free-templates" >Templates</a> and sponsored by meyluu.de - <a href="http://www.meyluu.de/" >Familienreise</a></p> </div> </body> </html>

CSS Kodu
(Style tagleri olmadan yazınız):

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;} /* begin Page */ /* Generated with Artisteer version 2.6.0.36391, file checksum is 173F9331. */ body, p { margin: 0.5em 0; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size: 12px; } body { margin: 0 auto; padding: 0; color: #454545; background-color: #FFFFFF; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/page_t.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center right; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover, .art-blockheader .t, .art-vmenublockheader .t, .art-logo-text, .art-logo-text a, h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover { font-weight: normal; font-style: normal; text-decoration: none; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif; font-size: 29px; } a, .art-post li a { text-decoration: none; color: #5F8316; } a:link, .art-post li a:link { text-decoration: none; color: #5F8316; } a:visited, a.visited, .art-post li a:visited, .art-post li a.visited { color: #454545; } a:hover, a.hover, .art-post li a:hover, .art-post li a.hover { color: #000000; } h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover { margin: 0.67em 0; color: #5F8316; } h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover { margin: 0.8em 0; font-size: 22px; color: #5F8316; } h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover { margin: 1em 0; font-style: normal; font-weight: bold; font-size: 17px; color: #5F8316; } h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover { margin: 1.25em 0; font-size: 14px; color: #5F8316; } h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover { margin: 1.67em 0; font-size: 12px; color: #5F8316; } h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover { margin: 2.33em 0; font-size: 10px; color: #5F8316; } h1 a, h1 a:link, h1 a:visited, h1 a:hover, h2 a, h2 a:link, h2 a:visited, h2 a:hover, h3 a, h3 a:link, h3 a:visited, h3 a:hover, h4 a, h4 a:link, h4 a:visited, h4 a:hover, h5 a, h5 a:link, h5 a:visited, h5 a:hover, h6 a, h6 a:link, h6 a:visited, h6 a:hover { margin:0; } #art-main { position: relative; width: 100%; left: 0; top: 0; cursor:default; } #art-page-background-gradient { background-position: center right; } .cleared { float: none; clear: both; margin: 0; padding: 0; border: none; font-size: 1px; } form { padding: 0 !important; margin: 0 !important; } table.position { position: relative; width: 100%; table-layout: fixed; } /* end Page */ /* begin Box, Sheet */ .art-sheet { position: relative; z-index: 0; margin: 0 auto; width: 800px; min-width: 43px; min-height: 43px; } .art-sheet-body { position: relative; z-index: 1; padding: 10px; } .art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl, .art-sheet-tc, .art-sheet-bc,.art-sheet-cr, .art-sheet-cl { position: absolute; z-index: -1; } .art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl { width: 82px; height: 82px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/sheet_s.png'); } .art-sheet-tl { top: 0; left: 0; clip: rect(auto, 41px, 41px, auto); } .art-sheet-tr { top: 0; right: 0; clip: rect(auto, auto, 41px, 41px); } .art-sheet-bl { bottom: 0; left: 0; clip: rect(41px, 41px, auto, auto); } .art-sheet-br { bottom: 0; right: 0; clip: rect(41px, auto, auto, 41px); } .art-sheet-tc, .art-sheet-bc { left: 41px; right: 41px; height: 82px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/sheet_h.png'); } .art-sheet-tc { top: 0; clip: rect(auto, auto, 41px, auto); } .art-sheet-bc { bottom: 0; clip: rect(41px, auto, auto, auto); } .art-sheet-cr, .art-sheet-cl { top: 41px; bottom: 41px; width: 82px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/sheet_v.png'); } .art-sheet-cr { right: 0; clip: rect(auto, auto, auto, 41px); } .art-sheet-cl { left: 0; clip: rect(auto, 41px, auto, auto); } .art-sheet-cc { position: absolute; z-index: -1; top: 41px; left: 41px; right: 41px; bottom: 41px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/sheet_c.png'); } .art-sheet { margin-top: -10px !important; cursor:auto; } #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare { min-width: 800px; } /* end Box, Sheet */ /* begin Layout */ .art-content-layout { display: table; padding: 0; border: none; width: 780px; } .art-content-layout .art-content-layout { width: auto; margin:0; } div.art-content-layout div.art-layout-cell, div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell { display: table-cell; } div.art-layout-cell div.art-layout-cell { display: block; } div.art-content-layout-row { display: table-row; } .art-content-layout { table-layout: fixed; border-collapse: collapse; background-color: Transparent; border: none !important; padding:0 !important; } .art-layout-cell, .art-content-layout-row { background-color: Transparent; vertical-align: top; text-align: left; border: none !important; margin:0 !important; padding:0 !important; } /* end Layout */ /* begin Box, Block, VMenuBlock */ .art-vmenublock { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-vmenublock-body { position: relative; z-index: 1; padding: 0; } .art-vmenublock { margin: 10px; } /* end Box, Block, VMenuBlock */ /* begin BlockHeader, VMenuBlockHeader */ .art-vmenublockheader { position: relative; z-index: 0; height: 36px; margin-bottom: 0; } .art-vmenublockheader .t { height: 36px; color: #454545; margin-right: 10px; margin-left: 10px; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: bold; font-size: 12px; margin:0; padding: 0 36px 0 10px; white-space: nowrap; line-height: 36px; } .art-vmenublockheader .l, .art-vmenublockheader .r { display: block; position: absolute; z-index: -1; height: 36px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/vmenublockheader.png'); } .art-vmenublockheader .l { left: 0; right: 30px; } .art-vmenublockheader .r { width: 780px; right: 0; clip: rect(auto, auto, auto, 750px); } /* end BlockHeader, VMenuBlockHeader */ /* begin Box, Box, VMenuBlockContent */ .art-vmenublockcontent { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-vmenublockcontent-body { position: relative; z-index: 1; padding: 0; } .art-vmenublockcontent { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-vmenublockcontent-body { position: relative; z-index: 1; padding: 0; } /* end Box, Box, VMenuBlockContent */ /* begin VMenu */ ul.art-vmenu, ul.art-vmenu li { list-style: none; margin: 0; padding: 0; width: auto; line-height: 0; } /* collapsible separators */ .art-vmenu .collapsed { display: none; } /* images in menu items */ ul.art-vmenu img.art-menu-image, ul.art-vmenu img.art-menu-image-left { vertical-align: middle; margin-right: 5px; } ul.art-vmenu img.art-menu-image-right { vertical-align: middle; margin-left: 5px; } /* end VMenu */ /* begin VMenuItem */ ul.art-vmenu a { position: relative; display: block; overflow: hidden; height: 30px; cursor: pointer; text-decoration: none; } ul.art-vmenu li.art-vmenu-separator { display: block; padding: 0 0 0 0; margin: 0; font-size: 1px; } ul.art-vmenu .art-vmenu-separator-span { display: block; padding: 0; font-size: 1px; height: 0; line-height: 0; border: none; } ul.art-vmenu a .r, ul.art-vmenu a .l { position: absolute; display: block; top: 0; z-index: -1; height: 90px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/vmenuitem.png'); } ul.art-vmenu a .l { left: 0; right: 7px; } ul.art-vmenu a .r { width: 814px; right: 0; clip: rect(auto, auto, auto, 807px); } ul.art-vmenu a .t { display: block; line-height: 30px; color: #454545; padding: 0 13px 0 23px; font-style: normal; font-weight: bold; margin-left:0; margin-right:0; } ul.art-vmenu a.active .l, ul.art-vmenu a.active .r { top: -60px; } ul.art-vmenu a.active .t { color: #000000; } ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r { top: -30px; } ul.art-vmenu a:hover .t { color: #FFFFFF; } /* end VMenuItem */ /* begin VMenuSubItem */ ul.art-vmenu ul, ul.art-vmenu ul li { margin: 0; padding: 0; } ul.art-vmenu ul a { display: block; white-space: nowrap; height: 20px; overflow: visible; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/vsubitem.gif'); background-position: 25px 0; background-repeat: repeat-x; padding-left: 41px; } ul.art-vmenu ul li { padding: 0; } ul.art-vmenu ul span, ul.art-vmenu ul span span { display: inline; float: none; margin: inherit; padding: inherit; background-image: none; text-align: inherit; text-decoration: inherit; } ul.art-vmenu ul a, ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span { line-height: 20px; color: #454545; margin-left: 0; } ul.art-vmenu ul { margin:0 3px 0 3px; } ul.art-vmenu ul ul { margin:0 0 0 0; } ul.art-vmenu ul li.art-vsubmenu-separator { display: block; margin: 0; font-size: 1px; padding: 0 0 0 0; } ul.art-vmenu ul .art-vsubmenu-separator-span { display: block; padding: 0; font-size: 1px; height: 0; line-height: 0; margin: 0; border: none; } ul.art-vmenu ul li li a { background-position: 50px 0; padding-left: 66px; } ul.art-vmenu ul li li li a { background-position: 75px 0; padding-left: 91px; } ul.art-vmenu ul li li li li a { background-position: 100px 0; padding-left: 116px; } ul.art-vmenu ul li li li li li a { background-position: 125px 0; padding-left: 141px; } ul.art-vmenu ul li a.active { color: #000000; background-position: 25px -40px; } ul.art-vmenu ul li li a.active { background-position: 50px -40px; } ul.art-vmenu ul li li li a.active { background-position: 75px -40px; } ul.art-vmenu ul li li li li a.active { background-position: 100px -40px; } ul.art-vmenu ul li li li li li a.active { background-position: 125px -40px; } ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active { color: #FFFFFF; background-position: 25px -20px; } ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active { background-position: 50px -20px; } ul.art-vmenu ul li li li a:hover, ul.art-vmenu ul li li li a:hover.active { background-position: 75px -20px; } ul.art-vmenu ul li li li li a:hover, ul.art-vmenu ul li li li li a:hover.active { background-position: 100px -20px; } ul.art-vmenu ul li li li li li a:hover, ul.art-vmenu ul li li li li li a:hover.active { background-position: 125px -20px; } /* end VMenuSubItem */ /* begin Box, Block */ .art-block { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-block-body { position: relative; z-index: 1; padding: 0; } .art-block { margin: 10px; } /* end Box, Block */ /* begin BlockHeader */ .art-blockheader { position: relative; z-index: 0; height: 37px; margin-bottom: 0; } .art-blockheader .t { height: 37px; color: #454545; margin-right: 10px; margin-left: 10px; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: bold; font-size: 13px; margin:0; padding: 0 36px 0 10px; white-space: nowrap; line-height: 37px; } .art-blockheader .l, .art-blockheader .r { display: block; position: absolute; z-index: -1; height: 37px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/blockheader.png'); } .art-blockheader .l { left: 0; right: 30px; } .art-blockheader .r { width: 780px; right: 0; clip: rect(auto, auto, auto, 750px); } /* end BlockHeader */ /* begin Box, BlockContent */ .art-blockcontent { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-blockcontent-body { position: relative; z-index: 1; padding: 7px; } .art-blockcontent-body, .art-blockcontent-body a, .art-blockcontent-body li a { color: #454545; font-style: normal; font-weight: bold; } .art-blockcontent-body a, .art-blockcontent-body li a { color: #454545; } .art-blockcontent-body a:link, .art-blockcontent-body li a:link { color: #454545; } .art-blockcontent-body a:visited, .art-blockcontent-body a.visited, .art-blockcontent-body li a:visited, .art-blockcontent-body li a.visited { color: #8C8C8C; text-decoration: none; } .art-blockcontent-body a:hover, .art-blockcontent-body a.hover, .art-blockcontent-body li a:hover, .art-blockcontent-body li a.hover { color: #000000; text-decoration: none; } .art-blockcontent-body ul { list-style-type: none; color: #636363; margin: 0; padding: 0; } .art-blockcontent-body ul li { line-height: 1.25em; padding: 0 0 0 26px; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/blockcontentbullets.png'); background-repeat: no-repeat; } /* end Box, BlockContent */ /* begin Button */ .art-button-wrapper .art-button { font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size: 12px; display: inline-block; vertical-align: middle; white-space: nowrap; text-align: left; text-decoration: none !important; color: #FFFFFF !important; width: auto; outline: none; border: none; background: none; line-height: 32px; height: 32px; margin: 0 !important; padding: 0 16px !important; overflow: visible; cursor: default; z-index: 0; } .art-button img, .art-button-wrapper img { margin: 0; vertical-align: middle; } .art-button-wrapper { vertical-align: middle; display: inline-block; position: relative; height: 32px; overflow: hidden; white-space: nowrap; width: auto; margin: 0; padding: 0; z-index: 0; } .firefox2 .art-button-wrapper { display: block; float: left; } input, select, textarea, select { vertical-align: middle; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size: 12px; } .art-block select { width:96%; } .art-button-wrapper.hover .art-button, .art-button:hover { color: #FFFFFF !important; text-decoration: none !important; } .art-button-wrapper.active .art-button { color: #FFFFFF !important; } .art-button-wrapper .l, .art-button-wrapper .r { display: block; position: absolute; z-index: -1; height: 96px; margin: 0; padding: 0; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/button.png'); } .art-button-wrapper .l { left: 0; right: 7px; } .art-button-wrapper .r { width: 401px; right: 0; clip: rect(auto, auto, auto, 394px); } .art-button-wrapper.hover .l, .art-button-wrapper.hover .r { top: -32px; } .art-button-wrapper.active .l, .art-button-wrapper.active .r { top: -64px; } .art-button-wrapper input { float: none !important; } /* end Button */ /* begin Box, Post */ .art-post { position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px; } .art-post-body { position: relative; z-index: 1; padding: 12px; } .art-post { margin: 5px; } a img { border: 0; } .art-article img, img.art-article { margin: 10px; } .art-metadata-icons img { border: none; vertical-align: middle; margin: 2px; } .art-article table, table.art-article { border-collapse: collapse; margin: 1px; width: auto; } .art-article th { text-align: center; vertical-align: middle; padding: 7px; } pre { overflow: auto; padding: 0.1em; } /* end Box, Post */ /* begin PostHeaderIcon */ .art-post h2.art-postheader, .art-post h2.art-postheader a, .art-post h2.art-postheader a:link, .art-post h2.art-postheader a:visited, .art-post h2.art-postheader a.visited, .art-post h2.art-postheader a:hover, .art-post h2.art-postheader a.hovered { margin: 0.2em 0; padding: 0; font-size: 22px; color: #5F8316; } .art-post h2.art-postheader a, .art-post h2.art-postheader a:link, .art-post h2.art-postheader a:visited, .art-post h2.art-postheader a.visited, .art-post h2.art-postheader a:hover, .art-post h2.art-postheader a.hovered { margin: 0; text-align: left; text-decoration: none; color: #5F8316; } .art-post h2.art-postheader a:visited, .art-post h2.art-postheader a.visited { color: #454545; } .art-post h2.art-postheader a:hover, .art-post h2.art-postheader a.hovered { color: #454545; } /* end PostHeaderIcon */ /* begin PostIcons, PostHeaderIcons */ .art-postheadericons { color: #7D7D7D; padding: 1px; } .art-postheadericons a, .art-postheadericons a:link, .art-postheadericons a:visited, .art-postheadericons a:hover { margin: 0; text-decoration: none; color: #924116; } .art-postheadericons a:visited, .art-postheadericons a.visited { font-style: italic; font-weight: normal; color: #924116; } .art-postheadericons a:hover, .art-postheadericons a.hover { font-style: italic; font-weight: normal; text-decoration: underline; color: #924116; } /* end PostIcons, PostHeaderIcons */ /* begin PostBullets */ .art-post ol, .art-post ul { color: #454545; margin: 1em 0 1em 2em; padding: 0; } .art-post li ol, .art-post li ul { margin: 0.5em 0 0.5em 2em; padding: 0; } .art-post li { margin: 0.2em 0; padding: 0; } .art-post ul { list-style-type: none; } .art-post ol { list-style-position: inside; } .art-post li { padding: 0 0 0 13px; line-height: 1em; } .art-post ol>li { background: none; padding-left: 0;/* overrides overflow for "ul li" and sets the default value */ overflow: visible; } .art-post ul>li { background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/postbullets.png'); background-repeat: no-repeat; padding-left: 13px;/* makes "ul li" not to align behind the image if they are in the same line */ overflow-x: visible; overflow-y: hidden; } /* end PostBullets */ /* begin PostQuote */ blockquote, blockquote p, .art-postcontent blockquote p { color: #454545; } blockquote, .art-postcontent blockquote { margin: 10px 10px 10px 50px; padding: 5px 5px 5px 37px; background-color: #FFFFFF; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/postquote.png'); background-position: left top; background-repeat: no-repeat;/* makes blockquote not to align behind the image if they are in the same line */ overflow: auto; } /* end PostQuote */ /* begin PostIcons, PostFooterIcons */ .art-postfootericons { color: #454545; padding: 1px; } .art-postfootericons a, .art-postfootericons a:link, .art-postfootericons a:visited, .art-postfootericons a:hover { margin: 0; text-decoration: none; color: #5F8316; } .art-postfootericons a:visited, .art-postfootericons a.visited { color: #454545; } .art-postfootericons a:hover, .art-postfootericons a.hover { color: #454545; } /* end PostIcons, PostFooterIcons */ /* begin Footer */ .art-footer { position: relative; overflow: hidden; width: 100%; } .art-footer-body { position:relative; padding: 25px; } .art-footer-body .art-rss-tag-icon { position: absolute; left:   10px; bottom:25px; z-index:1; } .art-rss-tag-icon { display: block; background-image: url('http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/images/livemarks.png'); background-position: center right; background-repeat: no-repeat; height: 32px; width: 24px; cursor: default; } .art-footer-text, .art-footer-text p { margin: 0; padding: 0; text-align: center; } .art-footer, .art-footer p, .art-footer a, .art-footer a:link, .art-footer a:visited, .art-footer a:hover { color: #454545; } .art-footer-text { min-height: 32px; margin: 0 10px 0 10px; } .art-footer a, .art-footer a:link { color: #4F3D29; text-decoration: none; } .art-footer a:visited { color: #454545; } .art-footer a:hover { color: #454545; }/* end Footer */ /* begin PageFooter */ .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover { font-family: Arial; font-size: 10px; letter-spacing: normal; word-spacing: normal; font-style: normal; font-weight: normal; text-decoration: none; color: #666666; } .art-page-footer { margin: 1em; text-align: center; text-decoration: none; color: #666666; } /* end PageFooter */ /* begin LayoutCell, sidebar1 */ .art-content-layout .art-sidebar1 { width: 25%; } /* end LayoutCell, sidebar1 */ /* begin LayoutCell, content */ .art-content-layout .art-content { width: 75%; } .art-content-layout .art-content-wide { width: 100%; } /* end LayoutCell, content */ table.moduletable th { font-size: 140%; padding: .5em 0; } .firefox2 table.poll tr td div { font-size: 0; } #footer { text-align: center; } .contentpaneopen span.small, .contentpaneopen td.createdate, .contentpaneopen td.modifydate { font-size: 75%; padding-bottom: 1em; } .column_separator { padding-left: .4em; } div.offline { background: #fffebb; width: 100%; position: absolute; top: 0; left: 0; font-size: 1.2em; padding: 5px; } /* headers */ table.moduletable th, legend { margin: 0; font-weight: bold; font-family: Helvetica,Arial,sans-serif; font-size: 1.5em; padding-left: 0; margin-bottom: 10px; text-align: left; } /* form validation */ .invalid { border-color: #ff0000; } label.invalid { color: #ff0000; } /** overlib **/ .ol-foreground { background-color: #f6f6f6; } .ol-background { background-color: #666; } .ol-textfont { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .ol-captionfont { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #f6f6f6; font-weight: bold; } .ol-captionfont a { color: #0B55C4; text-decoration: none; font-size: 12px; } /* spacers */ span.article_separator { display: none; } .column_separator { padding-left: 10px; } td.buttonheading img { border: none; } .clr { clear: both; } div#maindivider { border-top: 1px solid #ddd; margin-bottom: 10px; overflow: hidden; height: 1px; } table.blog span.article_separator { display: none; } /* edit button */ .contentpaneopen_edit { float: left; } /* table of contents */ table.contenttoc { margin: 5px; border: 1px solid #ccc; padding: 5px; float: right; } table.contenttoc td { padding: 0 5px; } /* content tables */ td.sectiontableheader { background: #efefef; color: #333; font-weight: bold; padding: 4px; border-right: 1px solid #fff; } tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td { padding: 4px; } td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 { padding: 3px; } /* content styles */ table.contentpaneopen, table.contentpane { margin: 0; padding: 0; width: auto; } table.contentpaneopen li { margin-bottom: 5px; } table.contentpaneopen fieldset { border: 0; border-top: 1px solid #ddd; } table.contentpaneopen h3 { margin-top: 25px; } table.contentpaneopen h4 { font-family: Arial, Helvetica, sans-serif; color: #333; } .highlight { background-color: #fffebb; } /* module control elements */ table.user1user2 div.moduletable { margin-bottom: 0; } div.moduletable, div.module { margin-bottom: 25px; } div.module_menu h3 { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #eee; margin: -23px -4px 5px -5px; padding-left: 10px; padding-bottom: 2px; } div.module_menu { margin: 0; padding: 0; margin-bottom: 15px; } div.module_menu div div div { padding: 10px; padding-top: 30px; padding-bottom: 15px; width: auto; } div.module_menu div div div div { background: none; padding: 0; } div.module_menu ul { margin: 10px 0; padding-left: 20px; } div.module_menu ul li a:link, div.module_menu ul li a:visited { font-weight: bold; } #leftcolumn div.module { padding: 0 10px; } #leftcolumn div.module table { width: auto; } /* forms */ table.adminform textarea { width: 540px; height: 400px; font-size: 1em; color: #000099; } div.search input { width: 95%; border: 1px solid #ccc; margin: 5px 0 5px 0; } /* login form module and component */ .joomla15 form#form-login { text-align: left; } .joomla15 form#form-login fieldset { border: 0 none; margin: 0; padding: 0.2em; } .joomla15 form#form-login ul { list-style-type: none; margin: 0; padding: 0; } .joomla15 form#form-login ul li { background-image: none; padding: 0; } .joomla16 form#login-form, .joomla16 form#login-form p { text-align: left; } .joomla16 form#login-form fieldset { border: 0 none; margin: 0; padding: 0.2em; } #modlgn_username, #modlgn_passwd { width: 90%; } #form-login-username, #form-login-password, #form-login-remember { display: block; margin: 0; } form#com-form-login { text-align: left; } form#com-form-login fieldset { border: 0 none; margin: 0; padding: 0.2em; } form#com-form-login ul { list-style-type: none; margin: 0; padding: 0; } form#com-form-login ul li { background-image: none; padding: 0; } /* thumbnails */ div.mosimage { margin: 5px; } div.mosimage_caption { font-size: .90em; color: #666; } div.caption { padding: 0 10px 0 10px; } div.caption img { border: 1px solid #CCC; } div.caption p { font-size: .90em; color: #666; text-align: center; } /* Parameter Table */ table.paramlist { margin-top: 5px; } table.paramlist td.paramlist_key { width: 128px; text-align: left; height: 30px; } div.message { font-weight: bold; font-size: 14px; color: #c30; text-align: center; width: auto; background-color: #f9f9f9; border: solid 1px #d5d5d5; margin: 3px 0 10px; padding: 3px 20px; } /* Banners module */ /* Default skyscraper style */ .banneritem img { display: block; margin-left: auto; margin-right: auto; } /* Text advert style */ .banneritem_text { padding: 4px; font-size: 11px; } .bannerfooter_text { padding: 4px; font-size: 11px; background-color: #f7f7f7; text-align: right; } /* Polls */ .pollstableborder { margin-top: 8px; } .pollstableborder td { text-align: left; } /* WebLinks */ span.description { display: block; padding-left: 30px; } /* Frontend Editing*/ fieldset { border: 1px solid #ccc; margin-top: 15px; padding: 15px; } legend { margin: 0; padding: 0 10px; } td.key { border-bottom: 1px solid #eee; color: #666; } /* Tooltips */ .tool-tip { float: left; background: #ffc; border: 1px solid #d4d5aa; padding: 5px; max-width: 200px; } .tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: bold; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/system/images/selector-arrow.png) no-repeat; } .tool-text { font-size: 100%; margin: 0; } /* System Standard Messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #c3d2e5 url(http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/system/images/notice-info.png) 4px center no-repeat; border-top: 3px solid #de7a7b; border-bottom: 3px solid #de7a7b; margin: 0; padding-left: 40px; text-indent: 0; } /* System Error Messages */ #system-message dd.error ul { color: #c00; background: #e6c0c0 url(http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin: 0; padding-left: 40px; text-indent: 0; } /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: #efe7b8 url(http://www.joomla-templatedemo.de/templates/moyoo_summer_painting/system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #f0dc7e; border-bottom: 3px solid #f0dc7e; margin: 0; padding-left: 40px; text-indent: 0; } #syndicate { float: left; padding-left: 25px; } /* Component Specific Fixes */ #component-contact table td { padding: 2px 0; } .breadcrumbs img { margin: 0; padding: 0; border: 0; } .mceToolbarTop { white-space: normal; } .mceEditor { background: none; } #archive-list { list-style-type: none; margin: 0; padding: 0; } #archive-list li { list-style-type: none; background-image: none; margin-left: 0; padding-left: 0; } #navigation, #navigation p { text-align: center; } .article h3 img { border: none; display: inline; margin: 0; padding: 0; } .art-footer-text .moduletable { border: none; margin: 0; padding: 0; } .pollstableborder td { vertical-align: middle; } .img_caption.left { float: left; margin-right: 1em; } .img_caption.right { float: right; margin-left: 1em; } .img_caption.left p { clear: left; text-align: center; } .img_caption.right p { clear: right; text-align: center; } .img_caption img { margin: 0; } .contentheading { font-style: normal; font-weight: bold; font-size: 17px; color: #5F8316; } #system-message ul li { background-image: none; padding-left: 0; } /* pagination */ .joomla15 .pagination { margin: 0; padding: 0; text-align: center; } .joomla15 .pagination span { margin: 0; padding: 0; } .joomla15 .pagination a { padding: 2px; } .joomla16 .pagination { margin: 0; padding: 0; text-align: center; } .joomla16 .pagination .counter { text-align: center; } .joomla16 .pagination ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } .joomla16 .pagination li { display: inline; padding: 2px 5px; text-align: left; margin: 0 2px; background-image: none; } .joomla16 .pagination li.pagination-start, .joomla16 .pagination li.pagination-start span, .joomla16 .pagination li.pagination-end, .joomla16 .pagination li.pagination-end span { padding: 0; } /* article navigation */ .joomla15  .pagenav { width: 100%; } .joomla15 .pagenav td, .joomla15 .pagenav th { border: none; font-weight: normal; } .joomla16 .pagenav { margin: 0; padding: 0; list-style-type: none; text-align: center; } .joomla16 .pagenav li { display: inline-block; width: 40%; text-align: center; background-image: none; } /* blog layout */ .joomla16 .cols-2 .column-1, .joomla16 .cols-2 .column-2, .joomla16 .cols-3 .column-1, .joomla16 .cols-3 .column-2, .joomla16 .cols-3 .column-3 { float: left; clear: right; } .joomla16 .cols-2 .column-1 { width: 50%; } .joomla16 .cols-2 .column-2 { width: 50%; } .joomla16 .cols-3 .column-1 { width: 33%; } .joomla16 .cols-3 .column-2 { width: 33%; } .joomla16 .cols-3 .column-3 { width: 34%; } .row-separator { clear: both; float: none; font-size: 1px; display: block; } /* category items */ .joomla16 .cat-items ul.actions { display: inline; margin: 0; padding: 0; } .joomla16 .cat-items ul.actions li { display: inline; margin: 0; padding: 0; background: none; } /* icon tooltip */ .joomla16 .tip { border: solid 1px #333; background: #ffffcc; padding: 3px; text-align: left; } .joomla16  .tip-title { font-weight: bold; } /* Plugin compatilibity. */ /* 152316, DOCman */ .dm_taskbar ul { background-image: none; margin: 0; padding: 0; } .dm_taskbar ul li { background-image: none; }/* Custom styles */

Yeşil tek sutun güzel

Tasarımın üzerindeki yazı:

<!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" /> <title>FlashTemplatesDesign.com Free Css Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/lib/jquery-1.3.2.min.js"></script>  <script type="text/javascript" src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/lib/jquery.tools.js"></script> <script type="text/javascript" src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/lib/jquery.custom.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main">  <div id="header"> <div id="logo"> <a href="#">ftdwood</a> <h3><a href="#">Small Company Slogan Goes Here</a></h3> </div> </div>   <div id="content"> <div id="buttons"> <a href="index.html" class="but" title="">Home</a> <a href="blog.html" class="but" title="">Blog</a> <a href="gallery.html" class="but" title="">Gallery</a> <a href="about_us.html" class="but" title="">About us</a> <a href="contact_us.html" class="but" title="">Contact us</a> </div> <div class="top_img"> <div class="scrollable"> <div class="items"> <div class="item"> <div class="header1"></div> </div>  <div class="item"> <div class="header2"></div> </div>  <div class="item"> <div class="header3"></div> </div>  <div class="item"> <div class="header4"></div> </div>  </div>  </div>  </div> <div class="circl_all"> <div class="navi"></div>  </div> <div class="yellow_top"> <div class="yellow_bot"> <div class="box_home_bg"> <div class="box_home bg_grad"> <img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img11.gif" class="img_l" alt="" /> <div style="height:4px"></div> <h1> Lorem ipsum dolor. </h1> <div style="height:3px; clear:both"></div> <b>Sit amet, consectetur adipiscing elit. </b><br /> Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim. <div style="height:25px"> <a href="#" class="read">read more</a> </div> </div> <div class="float_left" style="width: 15px; height: 10px;"></div> <div class=" box_home bg_grad"> <img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img12.gif" class="img_l" alt="" /> <div style="height:4px"></div> <h1>Vestibulum vel lacus. </h1> <div style="height:3px; clear:both"></div> <b>Interdum non id massa.</b><br /> Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. <div style="height:25px"> <a href="#" class="read">read more</a> </div> </div> <div class="float_left" style="width: 15px; height: 10px;"></div> <div class=" box_home bg_grad"> <img src="http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/img13.gif" class="img_l" alt="" /> <div style="height:4px"></div> <h1>Cras aliquam quam. </h1> <div style="height:3px; clear:both"></div> <b>Accumsan eu lobortis urna mollis.</b><br /> Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper. <div style="height:25px"> <a href="#" class="read">read more</a> </div> </div> <div style="clear: both"></div> </div> <div style=" height: 30px;"></div> <div class="bg_grad"> <h1>Praesent ipsum neque</h1> <div style=" height: 3px;"></div>

Tasarımın altındaki yazı:

<b> <div style="height:30px"> <a href="#" class="read">read more</a> </div> </div> <div style=" height: 30px;"></div>  <div id="bottom"> <div class="b_col1 col_bg"> <h2>Services</h2> <ul> <li><a href="#">Service Number 1</a></li> <li><a href="#">Service Number 2</a></li> <li><a href="#">Service Number 3</a></li> <li><a href="#">Service Number 4</a></li> <li><a href="#">Service Number 5</a></li> <li><a href="#">Service Number 6</a></li> </ul> </div> <div class="b_col2 col_bg"> <h2>Contact Information</h2> 1234 SomeStreet<br /> Brooklyn, NY 11201<br /> Phone: 1(234) 567 8910<br /> Fax: 1(234) 567 8910<br /> E-mail: companyname@yahoo.com </div> <div class="b_col3 col_bg"> <h2>Follow Us</h2> <ul> <li><img src="images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li> <li><img src="images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li> <li><img src="images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li> <li><img src="images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li> </ul> </div> <div style="clear: both; height:40px"></div> </div>  </div> </div> <div style="clear: both; height: 1px;"></div> </div>   <div id="footer"> Copyright 2011. Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><br /> <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a> </div>  </div> </body> </html>

CSS Kodu
(Style tagleri olmadan yazınız):

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;} { border: 0; margin: 0; } img { border: 0px; } body{ font: 12px Arial, Helvetica, sans-serif; color: #000000; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bg.jpg) center top repeat-x #6E2E00; line-height: 16px; } #main { width: 852px; margin: 0px auto; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/main.jpg) right top no-repeat;} #header { height: 98px; } #logo { padding: 33px 0px 0px 0px; } #logo a { text-decoration: none; font-size: 14px; font-weight:bold; color: #FBFA8B; } #logo H3 a{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; } #buttons{ text-align:center; height: 44px; margin-left: 0px; background: #405203; padding-left: 0px; border-bottom: 1px solid #000000; } #buttons a { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 100; display: block; float: left; text-decoration: none; color: #000000; text-align: center; padding-top: 12px; height: 30px; width: 170px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but.jpg) 0px 0px no-repeat; } .but { } #buttons a:hover { text-decoration: none; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/but_hover.jpg) left top no-repeat; } #content{ background: #FBFA8B; padding: 0px 0px 0px 0px; border: 1px solid #000000; } .top_img { height: 274px; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) left top no-repeat; border-bottom: 1px solid #000000;} .circl_all { height: 30px; padding: 3px 0px 3px 0px; vertical-align:top; border-bottom: 1px solid #000000; background: #743209;} .circl { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl.gif) left top no-repeat; height: 30px; width: 30px; margin: 0px 10px 0px 0px; float:right; } .circl:hover { background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl_hov.gif) left top no-repeat; } .yellow_top { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_top.jpg) left top no-repeat;} .yellow_bot { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/cont_bot.jpg) right bottom no-repeat; padding: 14px 14px 0px 14px;} .box_home { float: left; width: 236px; } .bg_grad {background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/box_home.png) top repeat-x; padding: 14px 14px 0px 14px;} .box_home_bg { padding: 0px 0px 0px 0px; } .text { padding: 14px 14px 14px 14px;} .float_left {float:left;} .razd_v { background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/i_razd.gif) left 15px repeat-x; height: 30px; clear: both;} #left{ width: 265px; float: left; color:#000000; margin-left: 0px; padding: 0px 0px 0px 0px; } .img_l { float:left; margin: 0px 10px 5px 0px; } .img_r { float: right; margin: 0px 0px 0px 15px; } H1{ font-family: Arial, Helvetica, sans-serif; font-size:18px; font-weight: 100; color: #ffffff; text-align: left; padding: 0px 0px 0px 0px; line-height: 20px; } .h1_left { padding: 5px 0px 7px 0px; border-bottom: 2px solid #37BCA1; color: #20262D;} H2{ font-family: Arial, Helvetica, sans-serif; font-size:18px; font-weight: bold; color: #ffffff; text-align: left; padding: 0px 0px 0px 0px; line-height: 20px; } .read{ display:block; float:right; height: 22px; width: 70px; text-align: center; padding: 3px 0px 0px 0px; text-decoration: underline; font-size:12px; color: #743209; font-weight: bold; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/read.png) left top no-repeat; } .read:hover { font-size:12px; text-decoration: none; } #right{ float: right; width: 589px; margin-right: 0px; } .span_dat { color: #002380; text-decoration: underline;} #bottom { width: 100%; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/bottom.jpg) left top no-repeat ; color:#000000; padding: 0px 0px 0px 0px; } #bottom h2{ font-family: Arial, Helvetica, sans-serif; padding: 18px 0px 15px 0px; font-size: 18px; text-align: left; color: #ffffff; font-weight: 100; line-height: 20px; } .b_col1 { float: left; margin-left: 0px; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x; } .b_col2 { float: left; margin-left: 15px; line-height: 25px; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/razd_bot.gif) bottom repeat-x; } .b_col3 { float: left; margin-left: 15px; text-align: left; } .col_bg { background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/col_bg.png) top repeat-x; width: 209px; padding: 0px 17px 0px 38px; } .b_col3 ul { list-style:none; padding: 0px 0px 0px 0px;} .b_col3 li { padding: 8px 0px 2px 0px; background: none; } .b_col3 li a { color:#000000; text-decoration: none; } .b_col3 li a:hover { text-decoration: underline; } .fu_i { padding: 0px 14px 0px 0px; vertical-align: middle ; } .b_col1 ul { list-style:none; padding: 0px 0px 0px 0px;} .b_col1 li { padding: 8px 0px 0px 20px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/fish2.gif) 0px 14px no-repeat; } .b_col1 ul a:hover { text-decoration:underline; } .b_col1 ul a { color:#000000; text-decoration:none; font-weight: 100;} #footer{ height: 60px; font-size: 12px; color: #ffffff; text-align: center; padding: 20px 0px 0px 0px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/footer.jpg) 0px 15px no-repeat; } #footer a{ color: #ffffff; font-size: 12px; text-decoration: none; } #footer a:hover{ color: #ffffff; font-size: 12px; text-decoration: underline; } /* scroll styles here */ .item { width: 850px; height:274px;} .item img {float:left;} .item h2 { border:none; margin-bottom:15px;} .scrollable { position:relative; overflow:hidden; width: 850px; height: 274px;} .scrollable .items { width:20000em; position:absolute;} .scrollable .items div { float:left;} .scrollable .items .item { overflow:hidden;} .scrollable .items .item p { line-height:16px;} .navi { width:auto; height:20px; float:right; margin: 0px 0; padding-right: 20px;} .navi a { width: 30px; cursor:pointer; height: 30px; float:left; margin:0 0 0 3px; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl.gif) no-repeat scroll right top; display:block; font-size:1px;} .navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px; background:url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/circl_hov.gif) no-repeat scroll right top} .header1 { width: 850px; height: 274px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top.jpg) no-repeat; } .header2 { width: 850px; height: 274px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top2.jpg) no-repeat; } .header3 { width: 850px; height: 274px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top3.jpg) no-repeat; } .header4 { width: 850px; height: 274px; background: url(http://www.flashtemplatesdesign.com/free_templates/free_css_templates/ftdwood/images/top4.jpg) no-repeat; } /* ------------------------------------------------------------------------ DO NOT CHANGE ------------------------------------------------------------------------- */ div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;} div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}

css Turuncu çizgiler

Tasarımın üzerindeki yazı:

<?xml version="1.0" encoding="iso-8859-1"?><!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> <title>Joomlademo.de</title> <meta name="description" content="Demoseite für Joomla Templates Module und Komponenten" /> <meta name="keywords" content="Joomla, joomla, templates, module, komponenten, demo" /> <meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved." /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="http://www.joomlademo.de/images/favicon.ico" /> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <script type="text/javascript" src="templates/atjoomla/scripts/opacity.js"></script> <link href="css/template_css.css" rel="stylesheet" type="text/css" media="all" /> <link href="templates/atjoomla/css/template_css.css" rel="stylesheet" type="text/css" /> <script language='JavaScript'> function bluring(){ if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); } document.onfocusin=bluring; </script> </head> <body class="bg_main">   <table id="outer" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td valign="top"> <div id="main_inner">  <div id="up_flash"></div>    <div id="space_flash_path"></div>  <div class="wrapper"> <div id="logo"> <a href="http://www.joomlademo.de"> <script type="text/javascript"> od_displayImage('sitelogo', 'templates/atjoomla/images/logo', 285, 85, '', 'Joomlademo.de'); </script> </a> </div>  <script type="text/javascript" src="templates/atjoomla/scripts/flashobject.js"></script> <div id="flashcontent"> OOPS. Your Flash player is missing or outdated.<a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Click here</a> to update your player so you can see this content. </div> <script type="text/javascript"> // <![CDATA[ var fo = new FlashObject("./templates/atjoomla/images/topflash.swf", "topheader", "800", "135", "1"); fo.addParam("wmode", "transparent"); fo.write("flashcontent"); // ]]> </script>  </div>   <div id="space_flash_path"></div>  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="table_path_search"> <tr> <td> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td> <form action="index.php?option=com_search" method="get"> <div class="search"> <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="suchen..." onblur="if(this.value=='') this.value='suchen...';" onfocus="if(this.value=='suchen...') this.value='';" /> </div> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="" /> </form> </td> </tr> </table> </td><td align="right"><span class="pathway">Home </span></td> </tr> </table> <div id="mid_out"> <div id="leftmain"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Main Menu </th> </tr> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_content&task=section&id=1&Itemid=2" class="mainlevel" >News</a></td></tr> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_weblinks&Itemid=23" class="mainlevel" >Links</a></td></tr> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_newsfeeds&Itemid=7" class="mainlevel" >News Feeds</a></td></tr> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25" class="mainlevel" >FAQs</a></td></tr> <tr align="left"><td><a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=14&Itemid=26" class="mainlevel" >Impressum</a></td></tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Werbung </th> </tr> <tr> <td> <br /> <div align="center"> <script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div><br /> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Anmeldung </th> </tr> <tr> <td> <form action="http://www.joomlademo.de/index.php" method="post" name="login" > <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <label for="mod_login_username"> Benutzername </label> <br /> <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /> <br /> <label for="mod_login_password"> Passwort </label> <br /> <input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /> <br /> <input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" /> <label for="mod_login_remember"> Angemeldet bleiben </label> <br /> <input type="submit" name="Submit" class="button" value="Anmelden" /> </td> </tr> <tr> <td> <a href="http://www.joomlademo.de/index.php?option=com_registration&task=lostPassword">  Passwort vergessen?</a> </td> </tr> </table> <input type="hidden" name="option" value="login" /> <input type="hidden" name="op2" value="login" /> <input type="hidden" name="lang" value="german" /> <input type="hidden" name="return" value="http://www.joomlademo.de/index.php?mos_change_template=atjoomla" /> <input type="hidden" name="message" value="0" /> <input type="hidden" name="force_session" value="1" /> <input type="hidden" name="j0fb81c555499db4dbe62709764587eff" value="1" /> </form> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td> <br /> <div align="center">   <a href="http://www.zanox-affiliate.de/ppc/?11719296C1550214550T"><img src="http://www.zanox-affiliate.de/ppv/?11719296C1550214550" align="bottom" border="0" hspace="1" alt="Hier klicken!"></a>  </div><br /> </td> </tr> </table> </div> <div id="rightarea"> <div class="clear"></div>  <div id="main_area"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td valign="top"> <div class="left_edge"><div class="right_edge"><div class="top_edge"><div class="top_lcorner"> <div class="top_rcorner"><img src="templates/atjoomla/images/corner1.gif" /></div> </div></div> <div ><div id="blocks"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Newsflash </th> </tr> <tr> <td> <table class="contentpaneopen"> <tr> <td valign="top" colspan="2"> Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. </td> </tr> </table> <span class="article_seperator"> </span> </td> </tr> </table> </div></div> <div class="bottom_edge"><div class="bot_lcorner"> <div class="bot_rcorner"><img src="templates/atjoomla/images/corner3.gif" /></div> </div></div></div></div> <div class="left_edge"><div class="right_edge"><div class="top_edge"><div class="top_lcorner"> <div class="top_rcorner"><img src="templates/atjoomla/images/corner1.gif" /></div> </div></div> <div class="corner_inner"><div id="main_body"><table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div> <table class="contentpaneopen"> <tr> <td class="contentheading" width="100%"> JoomlaDemo.de </td> </tr>

Tasarımın altındaki yazı:

</table>  <table class="contentpaneopen"> <tr> <td valign="top" colspan="2"> <p>In dieser Templateauswahl befinden sich über 1600 für Joomla/Mambo frei verfügbare Templates. Die Downloads findet man unter <a target="_blank" href="http://www.joomlaos.de/">www.JoomlaOS.de</a> im Downloadbereich. <form action="/index.php?mos_change_template=wmcountdown" name='templateform' method="POST"> <select name="mos_change_template" class="button" onChange=""> <option value="0016">0016</option> <option value="zonecopper">zonecopper</option> </select> <input class="button" type="submit" value="Auswählen"> </form> <br /> <div class="mosimage" style=" border-width: 1px; float: left; width: 120px;" align="center"><img src="http://www.joomlademo.de/images/stories/mmd.gif" width="75" height="65" hspace="6" alt="JoomlaDemo.de" title="JoomlaDemo.de" border="0" /><div class="mosimage_caption" style="text-align: center;" align="center">JoomlaDemo.de</div></div>Joomla! ist ein leistungsfähiges, einfach zu konfigurierendes und populäres Open-Source Web Content Management System (WCMS). Joomla! basiert auf der serverseitigen Skriptsprache PHP, die ebenso wie die verwendete Datenbank MySQL unter der GNU General Public License (GPL) steht, und kostenlos erhältlich ist.</p> <p>Joomla! ist aus dem Open-Source-Projekt Mambo hervorgegangen, das früher als Mambo Open Source bzw. MOS bezeichnet wurde.</p> </td> </tr> <tr> <td align="left" colspan="2"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=1&Itemid=1" class="readon"> weiter …</a> </td> </tr> </table> <span class="article_seperator"> </span> </div></td></tr><tr><td valign="top"><table width="100%" cellpadding="0" cellspacing="0"><tr><td valign="top" width="50%"> <table class="contentpaneopen"> <tr> <td class="contentheading" width="100%"> JoomlaJobs.de </td> </tr> </table> <table class="contentpaneopen"> <tr> <td valign="top" colspan="2"> Seitenbetreiber haben unter <a href="http://www.joomlajobs.de" target="_blank">www.joomlajobs.de</a> die Gelegenheit Anfragen nach professioneller Hilfe für die Realisierung Ihres Web-Projektes zu stellen. Freelancer bzw. Unternehmer können daraufhin Angebote über Preis und Dauer zur Durchführung des Projektes abgeben. Der Auftraggeber kann dann das für Ihn beste Gebot auswählen.<br /> </td> </tr> </table> <span class="article_seperator"> </span> </td><td valign="top" width="50%"> <table class="contentpaneopen"> <tr> <td class="contentheading" width="100%"> Joomla24.com </td> </tr> </table> <table class="contentpaneopen"> <tr> <td valign="top" colspan="2"> <p>Joomla! 1.0 - 'Experience the Freedom'!. It has never been easier to create your own dynamic site. Manage all your content from the best CMS admin interface. Joomla! 1.0 - 'Experience the Freedom'!. It has never been easier to create your own dynamic site. <a target="_blank" href="http://www.joomla24.com/">Joomla free Templates.</a></p> </td> </tr> </table> <span class="article_seperator"> </span> </td></tr></table></td></tr><tr><td valign="top"><div class="blog_more"> <div> <strong> Mehr … </strong> </div> <ul> <li> <a class="blogsection" href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=4&Itemid=1">  Joomla Mambots</a> </li> </ul> </div></td></tr></table></div></div> <div class="bottom_edge"><div class="bot_lcorner"> <div class="bot_rcorner"></div> </div></div></div></div> </td> <td width="6"> </td> <td width="175" valign="top"> <div class="left_edge"><div class="right_edge"> <div class="top_edge"><div class="top_lcorner"> <div class="top_rcorner"><img src="templates/atjoomla/images/corner1.gif" /></div> </div></div> <div class="corner_inner"><div id="rightmain"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Latest News </th> </tr> <tr> <td> <ul class="latestnews"> <li class="latestnews"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=13&Itemid=25" class="latestnews"> JoomlaJobs.de</a> </li> <li class="latestnews"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=12&Itemid=25" class="latestnews"> Joomla24.com</a> </li> <li class="latestnews"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=4&Itemid=1" class="latestnews"> Joomla Mambots</a> </li> <li class="latestnews"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=9&Itemid=2" class="latestnews"> Joomla Komponenten</a> </li> <li class="latestnews"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=1&Itemid=2" class="latestnews"> JoomlaDemo.de</a> </li> </ul> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Popular </th> </tr> <tr> <td> <ul class="mostread"> <li class="mostread"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=1&Itemid=2" class="mostread"> JoomlaDemo.de</a> </li> <li class="mostread"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=12&Itemid=25" class="mostread"> Joomla24.com</a> </li> <li class="mostread"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=9&Itemid=2" class="mostread"> Joomla Komponenten</a> </li> <li class="mostread"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=13&Itemid=25" class="mostread"> JoomlaJobs.de</a> </li> <li class="mostread"> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=4&Itemid=1" class="mostread"> Joomla Mambots</a> </li> </ul> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <th valign="top"> Voting </th> </tr> <tr> <td> <script language="javascript" type="text/javascript">  </script> <form name="pollxtd1" method="post" action="http://www.joomlademo.de/index.php?option=com_poll"> <table width="95%" border="0" cellspacing="0" cellpadding="1" align="center" class="poll"> <thead> <tr> <td style="font-weight: bold;"> Wie zufrieden seid Ihr mit Joomla! </td> </tr> </thead> <tr> <td align="center"> <table class="pollstableborder" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid13" value="13" alt="13" /> </td> <td class="sectiontableentry2" valign="top"> <label for="voteid13"> Sehr zufrieden </label> </td> </tr> <tr> <td class="sectiontableentry1" valign="top"> <input type="radio" name="voteid" id="voteid14" value="14" alt="14" /> </td> <td class="sectiontableentry1" valign="top"> <label for="voteid14"> Größtenteils zufrieden </label> </td> </tr> <tr> <td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid15" value="15" alt="15" /> </td> <td class="sectiontableentry2" valign="top"> <label for="voteid15"> Eher unzufrieden </label> </td> </tr> <tr> <td class="sectiontableentry1" valign="top"> <input type="radio" name="voteid" id="voteid16" value="16" alt="16" /> </td> <td class="sectiontableentry1" valign="top"> <label for="voteid16"> Unzufrieden </label> </td> </tr> <tr> <td class="sectiontableentry2" valign="top"> <input type="radio" name="voteid" id="voteid17" value="17" alt="17" /> </td> <td class="sectiontableentry2" valign="top"> <label for="voteid17"> Lieber ein anderes CMS </label> </td> </tr> </table> </td> </tr> <tr> <td> <div align="center"> <input type="button" onclick="submitbutton_Poll1();" name="task_button" class="button" value="Wählen" />   <input type="button" name="option" class="button" value="Ergebnis" onclick="document.location.href='http://www.joomlademo.de/index.php?option=com_poll&task=results&id=15';" /> </div> </td> </tr> </table> <input type="hidden" name="id" value="15" /> <input type="hidden" name="task" value="vote" /> <input type="hidden" name="je73d8734f853515eb37d4c7a1b209495" value="1" /> </form> </td> </tr> </table> </div></div> <div class="bottom_edge"><div class="bot_lcorner"> <div class="bot_rcorner"><img src="templates/atjoomla/images/corner3.gif" /></div> </div></div></div></div> </td> </tr></tbody> </table> </div>  <div class="clear"></div>  <div id="banner"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td> <script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> </tr> </table> </div>  </div> </div>  <div class="clear"></div> <div class="bottomcontainer"> <table class="moduletable-topnav" align="center" cellpadding="0" cellspacing="0" ><tbody><tr><td nowrap="nowrap" align="center"> <a href="http://www.joomlademo.de/index.php?option=com_frontpage&Itemid=1" class="topnav" id="current">Home</a> <a href="http://www.joomlademo.de/index.php?option=com_content&task=section&id=1&Itemid=2" class="topnav" >News</a> <a href="http://www.joomlademo.de/index.php?option=com_weblinks&Itemid=23" class="topnav" >Links</a> <a href="http://www.joomlademo.de/index.php?option=com_newsfeeds&Itemid=7" class="topnav" >News Feeds</a> <a href="http://www.joomlademo.de/index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25" class="topnav" >FAQs</a> <a href="http://www.joomlademo.de/index.php?option=com_content&task=view&id=14&Itemid=26" class="topnav" >Impressum</a> </td></tr></tbody></table></div> <div class="clear"></div> <div id="footer"><font color="#999999">©2008 atjoomla.com</font><BR />  <font color="#999999">Designed by</font> <font color="#999999"><a href="http://www.atjoomla.com">www.atjoomla.com</a></font> </div>  </div> </td> </tr></tbody> </table>  </body> </html>

CSS Kodu
(Style tagleri olmadan yazınız):

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;} div.clear { clear:both; } .bg_main { background-color: #000; padding : 0; margin : 10px 0 15px; text-align : center; vertical-align : top; scrollbar-face-color: #666; scrollbar-shadow-color: #666; scrollbar-darkshadow-color: #A2B5C9; scrollbar-highlight-color: #666; scrollbar-3dlight-color: #A2B5C9; scrollbar-track-color: #e9e9e9; scrollbar-arrow-color: #A2B5C9; } img { border:0px } /* ******************************************* main outline*/ #outer { margin : 0px auto; width : 800px; text-align : left; border : 0px solid #cc3300; background-color: #fff; } #main_inner { margin : 0; width : 800px; text-align : left; border : 0; background-color: #000000; } /* ******************************************* top area */ div.topright { float : right; margin : 0px; text-align : right; } #table_path_search { background: url(http://www.joomlademo.de/templates/atjoomla/img/bg_path.gif) no-repeat; } /* ******************************************* SEARCH*/ div.search { width: 160px; display: block; line-height: 26px; height: 15px; padding: 1px 0px 3px 3px; } div.search input { width: 160px; background: transparent ; color: #a2b5c9; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; padding: 2px; } .search .inputbox { border : 0px solid #A2B5C9; vertical-align: middle; height: 15px; } /* ******************************************* pathway */ #can_pathway { margin : 1px 0px 0px 0px; width : 100%; text-align : right; } .pathway { padding: 0px 0px 0px 0px; margin: 0px 5px 0px 0px; border: 0; line-height: 30px; color: #A2B5C9; } a.pathway:link, a.pathway:visited { color : #A2B5C9; font-size : 10px; line-height : 20px; } a.pathway:hover { color : #FFAE60; } /* ******************************************* top navi */ div#top_navi { margin-top : 20px; padding : 0px; height : 18px; text-align : right; } /* ******************************************* mid_out */ #mid_out { margin-top:10px; padding:0px; text-align: left; width: 100%; min-height: 100%; } /* ******************************************* leftside */ { width: 902px; background: url(https://img.webme.com/pic/b/biristanbulmasali/content-bg2.jpg) repeat-y; height: 90px; } #content_bottom { width: 902px; background: url(https://img.webme.com/pic/b/biristanbulmasali/footer-bg1.jpg) no-repeat; height: 26px; } #leftmain { text-align: left; margin: 0px 0px 0px 0px; padding: 0; width: 168px; float: left; background-color: #000000; } #rightmain { margin: 0px; padding:0px; text-align: left; width: 160px; } #rightmain table.moduletable { margin-bottom: 3px; padding:0px; text-align: left; } #rightmain table.moduletable th { background:url(http://www.joomlademo.de/templates/atjoomla/images/rtitle.gif) no-repeat; border:0; height:22px; font : bold 10px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; text-indent: 10px; padding: 0px 0px 3px; margin: 0px; line-height:22px; text-transform: uppercase; } #leftmain table.moduletable th { background:url(http://www.joomlademo.de/templates/atjoomla/images/ltitle.gif) no-repeat; border:0; height:22px; font : bold 10px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; text-indent: 10px; padding: 0px; margin: 0px; line-height:22px; text-transform: uppercase; } #leftmain table.moduletable td { font : normal 10px Verdana, Arial, Helvetica, sans-serif; color: #A2B5C9; text-align : left; padding : 2px 0px 2px 0px; } /* ******************************************* right area */ #rightarea { float: left; position: relative; margin-left: 8px; padding:0px; text-align: left; width: 620px; background-color: #000000; } #banner { margin: 0px 0px 10px 0px; padding:0px 0px 0px 0px; border: 0; } /* ******************************************* main_area */ #main_area { 	width		: 100%; 	margin		: 10px 0px 4px 0px; 	padding		: 0px; 	border		: 0px; 	text-align	: left; }  #main_body { 	width		: 100%; 	margin-top	: 0px; 	padding		: 0px; 	border		: 0px; 	text-align	: left; }  /* *******************************************  main corner*/ div.left_edge { 	background  	: url(http://www.joomlademo.de/templates/atjoomla/images/bg_leftside.gif) top left repeat-y; 	margin-bottom	: 7px; }  div.right_edge {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/bg_rightside.gif) top right repeat-y; }  div.top_lcorner {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/corner1.gif) top left no-repeat;   height		: 6px; }  div.top_rcorner {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/corner2.gif) top right no-repeat;   height		: 6px;   text-align	: left; }  div.top_edge {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/bg_corner1.gif) top left repeat-x;   height		: 6px;   clear			: both; }  div.bot_lcorner {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/corner3.gif) bottom left no-repeat;   height		: 6px; }  div.bot_rcorner {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/corner4.gif) bottom right no-repeat;   height		: 6px; }  div.bottom_edge {   background	: url(http://www.joomlademo.de/templates/atjoomla/images/bg_corner2.gif) bottom left repeat-x;   height		: 6px;   clear			: both; }  div.border { 	border-left	:1px solid #d6d6d6; 	border-right:1px solid #d6d6d6; 	padding:0px; }  div.corner_inner { 	padding		:0px 6px 0px 6px; }  /* ******************************************* flashnews and blocks */ #blocks { 	width:100%; 	padding:0; }  #blocks table.moduletable th { 	height:25px; 	font : bold 12px Verdana, Arial, Helvetica, sans-serif; 	color: #cc3300; 	height:18px; 	text-align		: left; 	text-indent		: 5px; 	padding			: 2px 0px 0px 0px; 	border-bottom	: 0px solid #ddd; }  #blocks table.moduletable td { 	font-family     : Verdana, Arial, Helvetica, sans-serif; 	font-size		: 10px; 	color			: #A2B5C9; 	line-height		: 16px; 	text-align		: left; 	padding			: 2px 2px 0px 2px; }  #blocks .moduletable a:link, #blocks .moduletable a:visited {  	font-size		: 10px; 	color			: #cc3300;  	text-decoration	: underline; 	line-height:18px; 	font-weight:bold; }  #blocks .moduletable a:hover { 	color			: #cc3300;  	text-decoration	: underline; }  /* ******************************************* bottom navi */ table.moduletable-topnav {     padding				: 0; 	}  .moduletable-topnav td {     width				: auto; 	text-align			: center; 	} .topnav { 	width				: 0; 	}  a.topnav:link, a.topnav:visited { 	width				: auto;  	padding-left		: 10px; 	color				: #fff; 	border				: 0;     margin				: 0px 4px; 	text-decoration		: underline; 	font-weight			: normal; 	} a.topnav:hover {  	width				: auto; 	color				: #ccc; 	} a.topnav#current { 	cursor				: default; 	} a.topnav#current:hover {  	width				: auto; 	color				: #A2B5C9; 	}  /* ******************************************* bottomcontainer */  .copyright { 	font			: normal 9px Verdana, Arial, Helvetica, sans-serif; 	color			: #A2B5C9; 	padding-left	: 4px; }  div.bottomcontainer { 	background		: url(http://www.joomlademo.de/templates/atjoomla/img/bg_footer.gif) no-repeat ; 	margin			: 0px 0px 0px 0px; 	width			: 100%; 	height			: 30px; 	text-align		: center; 	padding-top		: 4px; }  /* ******************************************* Footer */ #footer  { 	padding			: 4px 0px 0px 0px; 	margin			: 0; 	width			: 100%; 	height			: 60px; 	text-align		: center; 	font			: normal 10px Verdana, Arial, Helvetica, sans-serif; 	color			: #222; 	line-height		: 18px; }  /* *******************************************  General CSS Styles  */  .body { 	background		: #A2B5C9;  	padding			: 0;  	margin			: 0; 	vertical-align	: top; 	scrollbar-face-color: #666;     scrollbar-shadow-color: #666;     scrollbar-darkshadow-color: #A2B5C9;     scrollbar-highlight-color: #666;     scrollbar-3dlight-color: #A2B5C9;     scrollbar-track-color: #e9e9e9;     scrollbar-arrow-color: #A2B5C9; }  td, div, p { 	color:#A2B5C9; 	font-family     : Verdana, Arial, Helvetica, sans-serif; 	font-size		: 10px; 	padding:0px; 	line-height:17px; }   a, a:link, a:visited { 	color			: #cc3300; 	text-decoration	: underline; } a:hover {color: #cc3300; text-decoration:none}  h1	{font: bold 16px Verdana, Arial, Helvetica, sans-serif;	color: #666; margin: 0px; padding: 0px;} h2	{font: bold 15px Verdana, Arial, Helvetica, sans-serif;	color: #666; margin: 0px; padding: 0px;} h3	{font: bold 14px Verdana, Arial, Helvetica, sans-serif;	color: #666; margin: 0px; padding: 0px;} h4	{font: bold 12px Verdana, Arial, Helvetica, sans-serif;	color: #666; margin: 0px; padding: 0px;}  ol	{list-style: decimal outside; } ul {   margin: 0;   padding: 0;   list-style: none; }  li {   line-height: 17px;   text-indent: 18px;   padding-top: 0px;   background-image: url(http://www.joomlademo.de/templates/atjoomla/images/arrow.gif) ;   background-repeat: no-repeat;   background-position: 0px 5px; }  blockquote { 	margin			: 10px; 	margin-left		: 30px; 	padding			: 0 20px 0 10px; 	border-left		: 5px solid #ccc; }  form {  	margin			: 0;  	padding			: 0; } select {  	font-size		: 12px;  	font-weight		: bold;  	color			: #68696a; } input { background-color: #f96; padding			: 0; margin			: 0; border: solid 1px #d84817; }  th.pagenav_prev, th.pagenav_next, a.pagenav_next:link, a.pagenav_next:visited { 	font-size		: 10px;  	color			: #cc3300; 	font-weight		: normal; } a.pagenav_next:hover { 	font-size		: 10px;  	color			: #cc3300;  	text-decoration	: underline; }   /* ******************************************* MODULES */ table.moduletable { 	width			: 100%; 	padding			: 0px; 	margin			: 0px 0px 0px 0px; 	border	: 0; } table.moduletable th { 	height:21px; 	font-family     : Verdana, Arial, Helvetica, sans-serif; 	font-size		: 10px; 	font-weight		: bolder; 	color: #cc3300; 	text-indent		: 2em; 	text-align: left; 	padding: 0px 0px 0px 0px; 	margin: 0px; 	border: 0; 	line-height:28px; } table.moduletable td  { 	font			: normal 10px Verdana, Arial, Helvetica, sans-serif; 	color			: #A2B5C9; 	text-align		: left; 	padding			: 0px; 	margin			: 0px; 	border			: 0; }  table.pollstableborder td { 	padding: 2px; 	line-height:17px; 	background-color: #000000; }  .moduletable a:link, .moduletable a:visited {  	color			: #cc3300;  	font-weight:bold; 	font-size		: 10px; 	font-family     : Verdana, Arial, Helvetica, sans-serif; 	text-decoration	: none; } .moduletable a:hover { 	color			: #cc3300;  	text-decoration	: underline; } table.moduletable ul { 	padding			: 0; 	margin			: 0 0 0 3px; }  .button { 	font			: normal 10px Verdana, Arial, Helvetica, sans-serif; 	padding-top		: 2px 2px 0px 2px; 	color			: #A2B5C9; 	border  		: 0px; 	background-color: #cc3300; }  .poll { 	font			: 10px Verdana, Arial, Helvetica, sans-serif;  	color			: #68696a;  	font-weight		: normal;  	border			: 0;  	padding			: 0; }  /* ******************************************* CONTENT STYLES */ .contentpane, .contentpaneopen { 	text-align		: left; 	color			: #68696a;  	padding			: 0px; 	width:100%; }  .contentdescription { 	width:100%; 	text-align		: left; 	color			: #68696a;  	padding			: 0px; }  .contentpaneopen td { 	padding			: 1px 0px;  }  .contentpane td, .contentdescription td { 	padding			: 4px 0px;  } a.contentpane:link, a.contentpane:visited, a.contentpaneopen:link, a.contentpaneopen:visited { 	color			: #cc3300;  	text-decoration	: none } a.contentpane:hover, a.contentpaneopen:hover { 	color			: #cc3300;  	text-decoration	: underline; }  .contentheading { 	height:20px; 	font : bold 12px Verdana, Arial, Helvetica, sans-serif; 	color: #cc3300; 	height:20px; 	text-align		: left; 	text-indent		: 2px; 	border-bottom	: 0px solid #ccc; }  .componentheading { 	background:url(http://www.joomlademo.de/templates/atjoomla/images/arrow.gif) no-repeat;     background-position: 0px 3px; 	font : bold 12px Verdana, Arial, Helvetica, sans-serif; 	color: #cc3300; 	height:30px; 	text-align		: left; 	text-indent		: 15px; }   .contentpagetitle, a.contentpagetitle:link, a.contentpagetitle:visited 	{ 	color			: #cc3300; }  a.contentpagetitle:hover { 	color			: #cc3300;  }  td.buttonheading { 	font			: normal 10px Verdana, Arial, Helvetica, sans-serif; 	white-space		: nowrap; 	width			: 10%;	 }  .content_rating, .content_vote { 	font-size		: 10px;	 	color			: #68696a;  	text-decoration	: underline;  	font-weight		: normal;  	vertical-align	: middle;  	margin			: 0 6px;  	padding			: 0; }  .back_button { 	float:right; 	width:55px; 	font-size		: 10px;	 	color			: #68696a;  	font-weight		: bold;  	text-align:right; 	vertical-align	: middle;  	margin			: 0 6px;  	padding			: 1px 1px 1px 1px; 	border:0; }  .small 		{ 	font-size		: 9px;  	color			: #68696a;  	font-weight		: normal; 	line-height:14px; 	height:14px; }  .createdate, .modifydate { 	font-size		: 9px;  	font-weight		: normal;  	color			: #68696a; 	height			:14px; 	line-height		:14px; }  a.readon:link, a.readon:visited { 	font			: bold 10px Verdana, Arial, Helvetica, sans-serif; 	color			: #cc3300; 	background:url(http://www.joomlademo.de/templates/atjoomla/images/arrow.gif) no-repeat; 	background-position: 3px 3px;     border           : 0px solid #E0E0E0;     padding          : 2px 4px 2px 20px;     white-space      : nowrap;     float            : left;     line-height      : 10px;     text-decoration  : none; } a.readon:hover { 	color			: #cc3300; 	text-decoration	: underline;  }  .fase4rdf, a.fase4rdf:link, a.fase4rdf:visited { 	font-size		: 12px;  	font-weight		: normal;  	color			: #666666; } a.fase4rdf:hover { 	font-weight		: bold;  	color			: #cc3300; }  .blogsection { 	background		: transparent; }  a.blogsection:link, a.blogsection:visited { 	font-size		: 10px; 	color			: #cc3300; 	text-decoration	: underline; 	font-weight		: normal; 	font-weight		: bolder; } a.blogsection:hover { 	font-size		: 10px; 	color			: #cc3300;  	text-decoration	: underline; 	font-weight		: bolder; }  .blog { 	margin			: 0px; 	padding			: 0px; 	width			:100%; }  .blog_more { 	width			: 100%; 	padding			: 4px; 	margin			: 0px; 	font-size		: 12px; 	font-weight		: bold; 	color			: #68696a; } .blog_more ul { 	padding			: 0px; 	margin			: 0px; }  table.contenttoc { 	border			: 1px solid #ddd;  	padding			: 1px; 	margin-left		: 7px; 	margin-bottom	: 2px; } table.contenttoc th { 	color			: #68696a; 	text-align		: left; 	padding			: 4px; 	font-weight		: bold; 	font-size		: 10px; 	text-transform	: uppercase; 	background		: #ddd; } table.contenttoc td { 	font-size		: 10px; }   /* ******************************************* STYLES CONTACT PAGE */ table.contact { 	background		: transparent; } table.contact td.icons { 	background		: #ccc; } table.contact td.details { 	background		: #f7f7f7; 	margin			: 5px; 	padding			: 5px; 	border			: 1px dotted #ccc; } .contact_email { 	background		: #f7f7f7; 	margin			: 5px; 	padding			: 5px; 	border			: 0px; } textarea.inputbox { 	background: transparent; 	width:300px; }  /* ******************************************* MAIN AND SUB MENU SYSTEM  */ .mainlevel { 	font		: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; } a.mainlevel:link, a.mainlevel:visited { 	display: block; 	padding: 0px 0px; 	height: 22px; 	font: normal 10px Verdana, Arial, Helvetica, sans-serif; 	color: #ffffff;  	text-decoration: none; 	text-indent: 22px; 	border: 0px; 	line-height: 22px; 	background: url(http://www.joomlademo.de/templates/atjoomla/images/na_vi_ga_tie.gif); } a.mainlevel:hover { 	background		: #A2B5C9; 	color			: #fff;  	text-decoration	: underline; 	padding			: 0; 	background: url(http://www.joomlademo.de/templates/atjoomla/images/na_vi_ga_tie_over.gif); } #active_menu { 	background		: #A2B5C9; 	color			: #fff;  	background: url(http://www.joomlademo.de/templates/atjoomla/images/na_vi_ga_tie_over.gif); }  a.sublevel:link, a.sublevel:visited { 	font			: normal 10px Verdana, Arial, Helvetica, sans-serif; 	color			: #cc3300; 	text-decoration	: underline; 	padding-left: 1px; 	vertical-align: middle; 	text-align: left; 	line-height:16px; }  a.sublevel:hover { 	color			: #68696a; 	text-decoration	: underline; }  a.sublevel#active_menu  { 	border			: 0; 	color           : #68696a; 	text-decoration	: underline; 	background		: #f7f7f7; 	line-height:16px; }  /* ******************************************* TOP MENU SYSTEM  */ ul#mainlevel-nav { 	list-style		: none; 	padding			: 0; 	margin			: 0; 	float			: right; 	white-space		: nowrap;  }  ul#mainlevel-nav li { 	background-color: #cc3300; 	width: auto !important; 	width: 5%; 	float: right; 	white-space: nowrap; 	margin-left: 3px;	 	margin-bottom: 4px; }  #mainlevel-nav li a { 	background: url(http://www.joomlademo.de/templates/atjoomla/images/snavi2.gif) top right no-repeat; 	display			: block; 	height			: 18px; 	font			: bold 10px Verdana, Arial, Helvetica, sans-serif; 	padding			: 0px 12px 0px 0px; 	text-decoration	: underline; 	color			: #fff; 	line-height		: 18px; 	white-space		: nowrap; }  ul#mainlevel-nav li a:hover { 	color			: #ccc; 	background: url(http://www.joomlademo.de/templates/atjoomla/images/snavi2.gif) top right no-repeat; }  ul#mainlevel-nav li:hover { 	background: #cc3300 url(http://www.joomlademo.de/templates/atjoomla/images/snavi1.gif) top left no-repeat;	 }  /* ******************************************* CATEGORY (text format and links) */ .category { 	color			: #68696a; 	font-size		: 10px; 	font-weight		: bold; 	text-decoration	: underline; 	} a.category:link, a.category:visited { 	color			: #cc3300; 	font-weight		: bold; } a.category:hover { 	color			: #cc3300; } 	 /* ******************************************* STYLES LISTING CONTENT PAGE */ td.sectiontableheader, td.sectiontablefooter  { 	background-color: #cc3300;  	color			: #cc3300;  	font-weight		: bold; 	font-size		: 10px; 	padding			: 2px 3px 3px 2px; 	border-bottom	: 1px solid #cc3300;  } .sectiontableentry1  { 	background-color: #A2B5C9;  	font-weight		: normal;  	padding			: 2px 0px 2px 2px; } .sectiontableentry2  { 	background		: #f7f7f7;  	font-weight		: normal;  	padding			: 2px 0px 2px 2px; }  .pagenavbar { 	text-align		: center; 	vertical-align	: middle; 	padding			: 2px; 	width			: 100%; } .pagenav { 	background-color: #A2B5C9;  	color			: #68696a; 	font-size		: 10px; 	font-weight		: bold; 	text-decoration	: underline; 	marging			: 0; 	padding			: 0 2px; 	border			: 0; } a.pagenav:link, a.pagenav:visited  { 	background-color: #A2B5C9;  	color 			: #cc3300;  	background-color: transparent; } a.pagenav:hover { 	color			: #cc3300;  	background		: transparent;  	text-decoration	: underline; }   hr { 	background		: transparent;  	height			: 1px;  	border			: 1px solid #ddd;  	width			: 100%; }  /*=========================================================================================================================== */   /* ******************************************* random_pic */ #random_pic { 	width: 800px; 	height: 160px; 	margin: 0; 	padding:0; 	border: 0; 	}  /* ******************************************* random_pic */  #bg { 	background:url(http://www.joomlademo.de/templates/atjoomla/img/bg.jpg); 	}  #spacer1 { 	background:url(http://www.joomlademo.de/templates/atjoomla/img/spacer1.gif) repeat-x; 	height: 13px;          }  	 #up_header { 	background:url(http://www.joomlademo.de/templates/atjoomla/img/up_header.gif) no-repeat; 	width:	800px; 	padding:0px 0px 0px 0px; 	margin-bottom: 1px; 	} #up_flash  { 	background:url(http://www.joomlademo.de/templates/atjoomla/img/up_flash.gif) no-repeat; 	width: 800px; 	height: 24px; } #space_flash_path  	{ 	height: 1px; 	background-color: #cc3300; 	}  /*=========================================================================================================================== */ #logo, img#logo { position: absolute; top: 9px; left: 5px; border: 0; } div.wrapper { background-color: #f60; text-align: left; margin: auto; position: relative; }