Accidentally inserted the following code snippet
<style type="text/css">
into my Top_menu.css file due to a copy and paste error, forgetting to remove it. Now trying to delete all the code will crash everything!!! Here is my Top_menu.css file:
<style type="text/css>"
#centeredmenu {
float:left;
width:700px;
background:#fff;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
margin-left:330px;
margin-top:72px;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0 10px 0 10px;
padding:0;
position:relative;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:20px 10px;
color:#000;
text-decoration:none;
line-height:1.3em;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#centeredmenu ul li a:hover {
background:#369;
background:#212121;
color:#fff;
padding-top:15px;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#212121;
font-weight:bold;
padding-top:15px;
}
#spread
{
position:relative;
top:128px;
width:955px;
height:340px;
background-color:#212121;
}
This is my style.css file:
@charset "utf-8";
/* CSS Document */
@import 'reset.css';
body
{background:#e8e8e8 url(../images/Back.png) top repeat-x;
}
#outer
{
width:955px;
height:1200px;
margin:0 auto;
}
#header
{
background:url(../images/header.png) top no-repeat;
height:143px;
}
#logo h1
{
text-indent:-9999px;
}
#main_content
{
margin-top:128px;
height:400px;
background-color:#ffffff;
}
#left_side {width:550px; height:auto; float:left; }
#left_side h2
{
font-size:30px;
color:#2d5a65;
padding-top:30px;
padding-left:30px;
}
#left_side span
{
font-size:12px;
font-style:italic;
color:#bbbaba;
padding-left:30px;
}
#left_side h4
{
font-size:12px;
font-weight:bold;
color:#6f6f6f;
padding-top:30px;
padding-left:30px;
}
#left_side div
{
font-size:12px;
color:#6f6f6f;
padding-top:30px;
padding-left:30px;
line-height:20px;
}
#left_side a
{
font-size:12px;
color:#6f6f6f;
padding-top:40px;
padding-left:30px;
text-decoration:none;
}
#right_side
{
background-color:#f6f6f6;
width:295px;
height:300px;
border:15px solid #e7e7e7;
float:right;
margin-top:30px;
margin-right:40px;
}
#inside_right{ height:250px; margin:20px 10px 20px 10px; }
#inside_right span
{
font-size:18px; color:#7c7c7c;
}
#inside_right hr{width:200px; color:#dadada; margin-top:20px;}
#inside_right img{padding-top:30px; padding-right:10px; float:left;}
#inside_right div{width:250px; padding-top:25px; line-height:22px; height:150px; font-size:12px;}
#inside_right a{font-size:12px; font-weight:bold; text-decoration:none; color:#6d6d6d; float:right; padding-right:10px;}
/*Above footer*/
#above_footer{height:300px; border-top:10px #5a5a5a solid; border-bottom:10px #666666 solid; background-color:#656565;}
#f_left{width:230px; height:250px; margin-left:20px; margin-top:20px; float:left;}
#f_center{width:230px; height:250px;margin-left:100px; margin-top:20px; float:left; ;}
#f_right{width:230px; height:250px; margin-right:20px; margin-top:20px; float:right; }
.header_footer{font-size:20px; color:#ffffff; font-style:italic; margin-bottom:15px;}
.bold_footer{font-size:11px; color:#ffffff; font-weight:bold; padding-top:10px; clear:left;}
.reg_footer{font-size:11px; color:#FFF; line-height:15px; padding-top:5px; clear:left; }
.footer_line{width:200px; float:left; }
#below_footer{background-color:#1a1a1a; height:50px;}
.footer_color{color:#989898; font-size:11px;}
#copy{ padding:20px; float:left;}
/*footer menu*/
#below_footer ul{float:right; padding:20px;}
#below_footer ul li{float:left; }
#below_footer ul li a{ text-decoration:none; color:#989898; padding-left:2px; padding-right:2px;}
This is my html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/Top_menu.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="outer">
<div id="header">
<div id="logo">
<h1>cleanfolio</h1>
</div><!--End Logo-->
<div id="centeredmenu">
<ul>
<li><a href="#" class="active" >Home</a></li>
<li><a href="#" >portfolio</a></li>
<li><a href="#" >blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> <!-- end Center menu-->
<div id="spread">
</div> <!-- End Spread -->
<div id="content">
<div id="main_content">
<div id="left_side">
<h2>Welcome to our company</h2>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting</span>
<h4>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h4>
<div>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.<br/><br/>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</div><!--end div-->
<a href="#">Read More>></a>
</div><!--End Left_side-->
<div id="right_side">
<div id="inside_right">
<span>Testimonials:</span>
<hr />
<img src="images/unknown.png" alt="unknown"/>
<div>It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. Content here, content here', making it look like readable English."</div><!--End Div-->
<a href="#">-John Smith, webdesigner</a>
</div><!--End Inside right-->
</div><!--End right_side -->
</div> <!--end main_content-->
</div><!--End Content-->
</div><!--End Header-->
<div id="above_footer">
<div id="f_left">
<div class="header_footer">Events < Updates</div>
<hr class="footer_line" />
<div class="bold_footer">
Posted on 20 May 09
</div><!--end div class bold footer-->
<div class="reg_footer">Listuem Names ligula a blandit ornare ligula a quis bibendum elit anten ecm etus blandit
</div><!--End Div with class reg_footer-->
<hr class="footer_line" />
<div class="bold_footer">
Posted on 24 May 09
</div><!--end div with bold footer class-->
<div class="reg_footer">
Nulla elit porttitor tellus quis bibendum elit ante nec metus.
</div><!--end reg footer class-->
<hr class="footer_line" />
</div><!--End Footer left-->
<div id="f_center">
<div class="header_footer">What We Do</div><!--End header footer-->
<hr class="footer_line" />
<div class="bold_footer">
It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
</div><!--End bold footered class-->
<br />
<div class="reg_footer">
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem
Ipsum.
</div><!--End reg footer-->
</div><!--End Footer center-->
<div id="f_right">
<div class="header_footer">Get in touch!</div><!--End header_footer class-->
<hr class="footer_line" />
<div class="reg_footer">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div><!--End reg_footer-->
<hr class="footer_line" />
<div class="bold_footer">+123456789</div><!--End bold one-->
<div class="bold_footer">+123456789</div><!--End bold one-->
<div class="bold_footer"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41222e2c31202f3801252e2c20282f2f202c246f222e2c">[email protected]</a></div><!--End bold one-->
</div><!--End Footer right-->
</div><!--End Above footer-->
<div id="below_footer">
<div id="copy" class="footer_color">© Copyright 2009. Your Site Name Dot Com.</div><!--End copy -->
<ul class="footer_color">
<li>All Rights Reserved </li>
<li><a href="#">Home</a><samp>|</samp></li>
<li><a href="#">Contact</a><samp>|</samp></li>
<li><a href="#">RSS</a></li>
</ul>
</div><!--End Below footer-->
</div> <!--End outer-->
</body>
</html>