Contribute
1
Answer

How to wrap a site

albert albert

albert albert
10y
790
1
Hi everybody,
 
I want to wrap the whole html but only the footer wraps. And not the header. that is still  bigger then 1500px 
I have this as css:
 
[css]
 
/* Design by http://www.dreamtemplate.com */
@charset "utf-8";
body {
margin:0px;
padding:0px;
width:100%;
color:#343537;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
background:#f3f3f3 url(../images/main_bg.gif) repeat-x center top;
}
html, .main {
padding:0;
margin:0;
}
.hidden {
display: none;
}
#wrapper {
width: 1500px;
margin: auto auto;
text-align: left;
padding: 0 20px;
}
.main {
background:url(../Images/hbg_bg.jpg) no-repeat center 56px;
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}
h2 {
margin:8px 0;
padding:8px 0;
font-size:26px;
font-weight:normal;
line-height:1.2em;
color:#343537;
text-transform:uppercase;
border-bottom:1px solid #9b9b9b;
}
p {
margin:8px 0;
padding:0 0 8px 0;
}
a {
color:#fe6701;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
/* width:960px; */
}
.header_resize {
margin:0 auto;
padding:0;
width:700px;
}
.logo {
padding:0;
float:none;
float:left;
width:auto;
height:129px;
}
h1 {
margin:0;
padding:38px 0 0;
font-size:36px;
font-weight:bold;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:2px;
}
h1 a, h1 a:hover {
color:#fff;
text-decoration:none;
}
h1 span {
}
h1 small {
display:block;
font-size:13px;
line-height:1.2em;
letter-spacing:normal;
text-transform:none;
color:#fff;
}
.slider {
margin:0;
padding:10px;
background:#343537;
}
.rss {
padding:18px 20px 0 0;
float:right;
width:auto;
}
.rss p {
margin:0;
padding:0;
float:right;
width:auto;
color:#fff;
font-size:13px;
line-height:1.5em;
font-weight:bold;
}
.rss a {
color:#fff;
text-decoration:none;
}
.rss a:hover {
text-decoration:underline;
}
.rss img {
margin:-3px 0 -3px 6px;
border:none;
}
.menu_nav {
margin:0;
padding:0;
height:56px;
float:left;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 2px;
height:56px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li {
margin:0;
padding:0 2px 0 0;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:19px 24px;
font-size:14px;
line-height:18px;
font-weight:bold;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-align:center;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#fff;
background:#161616;
}
.content {
padding:0;
}
.content_resize {
margin:0 auto;
padding:24px 0 40px;
width:960px;
}
.content .mainbar {
margin:0;
padding:0;
float:right;
width:690px;
}
.content .mainbar h2 {
margin-bottom:0;
color:#212121;
}
.content .mainbar div.img {
padding:12px 0;
float:left;
}
.content .mainbar img {
}
.content .mainbar img.fl {
margin:0;
}
.content .mainbar .article {
margin:0 0 8px;
padding:6px 20px;
}
.content .mainbar .post_content {
}
.content .mainbar .post_content strong {
color:#6d6d6d;
}
.content .sidebar {
padding:0;
float:left;
width:260px;
}
.content .sidebar .gadget {
margin:0 0 12px;
padding:6px 20px 24px;
}
.content .sidebar h2 {
color:#212121;
}
ul.sb_menu, ul.ex_menu {
margin:0;
padding:0;
list-style:none;
color:#6e6e6e;
}
ul.sb_menu li, ul.ex_menu li {
margin:0;
}
ul.sb_menu li, ul.ex_menu li {
padding:8px 0;
width:220px;
}
ul.sb_menu li a {
color:#6e6e6e;
text-decoration:none;
margin-left:-16px;
padding:4px 8px 4px 16px;
}
ul.ex_menu li a {
font-weight:bold;
color:#6e6e6e;
text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
color:#fe6701;
font-weight:bold;
text-decoration:none;
}
p.spec {
padding:0 0 16px;
}
p.infopost {
margin:0;
padding:6px 0;
}
p.infopost a {
padding:0 2px;
text-decoration:none;
font-weight:bold;
color:#fe6701;
}
p.infopost a:hover {
text-decoration:underline;
}
p.infopost span.date {
color:#fe6701;
}
.article a.com {
display:block;
float:right;
margin:-40px 0;
padding:16px 0 0;
width:79px;
height:38px;
font-size:24px;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#bdbdbd;
background:url(../images/comment.jpg) no-repeat center top;
}
.article a.com:hover {
text-decoration:none;
}
.article a.com span {
font-weight:normal;
font-size:22px;
}
.post_content a.rm {
display:block;
float:left;
margin:0 0 16px;
padding:0;
width:105px;
height:27px;
font-size:13px;
line-height:27px;
font-weight:bold;
text-transform:none;
color:#fff;
text-decoration:none;
text-align:center;
background:url(../images/readmore.jpg) no-repeat center top;
}
.post_content a.rm:hover {
text-decoration:underline;
}
.content p.pages {
margin:0;
padding:24px 20px;
font-size:11px;
line-height:16px;
color:#343537;
text-align:left;
}
.content p.pages span, .content p.pages a {
display:block;
float:left;
margin:0 6px 0 0;
padding:7px 0;
width:30px;
text-decoration:none;
text-align:center;
}
.content p.pages span, .content p.pages a:hover {
color:#fff;
background:#212121;
background:url(../images/page_a.jpg) no-repeat center center;
}
.content p.pages a {
color:#343537;
border:none;
}
.content p.pages small {
font-size:12px;
float:right;
}
.content .mainbar .comment {
margin:0;
padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
border:1px solid #dedede;
margin:10px 16px 0 0;
padding:0;
float:left;
}
.fbg {
background:#232323;
}
.fbg_resize {
margin:0 auto;
width:920px;
padding:16px 20px;
color:#737070;
}
.fbg h2 {
color:#737070;
margin-bottom:24px;
padding-bottom:8px;
font-size:22px;
}
.fbg img.gal {
margin:0 8px 8px 0;
padding:0;
border:4px solid #ece7e7;
}
.fbg .col {
margin:0;
float:left;
}
.fbg .c1 {
padding:0 16px 0 0;
width:280px;
}
.fbg .c2 {
padding:0 36px 0 16px;
width:280px;
}
.fbg .c3 {
padding:0 0 0 16px;
width:274px;
}
.fbg .fbg_ul {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li a {
display:block;
margin:0;
padding:2px 0 2px 12px;
color:#737070;
text-decoration:none;
background:url(../images/li.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
color:#fe6701;
text-decoration:underline;
}
.fbg p.contact_info {
line-height:1.8em;
}
.fbg p.contact_info a {
color:#fe6701;
text-decoration:underline;
font-weight:normal;
}
.fbg p.contact_info span {
display:block;
float:left;
width:74px;
font-weight:bold;
}
ol {
list-style:none;
}
ol li {
display:block;
clear:both;
}
ol li label {
display:block;
margin:0;
padding:16px 0 0 0;
}
ol li input.text {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:5px 2px;
height:16px;
background-color:#fff;
}
ol li textarea {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:2px;
background-color:#fff;
}
ol li .send {
margin:16px 0 0 0;
}
.searchform {
padding:12px 0 0;
float:right;
}
#formsearch {
margin:0;
padding:0;
width:auto;
height:30px;
}
#formsearch span {
display:block;
margin:0;
padding:0;
float:left;
background:url(../images/search_bg.gif) no-repeat left top;
}
#formsearch input.editbox_search {
margin:0;
padding:7px 10px;
float:left;
width:172px;
font-size:12px;
line-height:16px;
color:#a8acb2;
background:none;
outline:none;
border:none;
}
#formsearch input.button_search {
margin:0;
padding:0;
border:none;
float:left;
}
.footer {
background:#232323;
}
.footer_resize {
margin:0 auto;
padding:0;
width:920px;
border-top:1px solid #373636;
line-height:1.5em;
color:#737070;
}
.footer_resize p {
margin:24px 0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
}
.footer_resize a {
color:#fe6701;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footer_resize a:hover {
color:#fe6701;
background-color:transparent;
text-decoration:none;
}
.footer_resize .lf {
float:left;
}
.footer_resize .rf {
float:right;
}
a {
outline:none;
}
[/css] 
 
 
AND this is the HTML:
 
 
[html]
 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="AnnaDeCler.SiteMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PlasmaBolt</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Content/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Content/coin-slider.css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="Scripts/cufon-aller.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="Scripts/coin-slider.min.js"></script>
</head>
<body>
<form id ="form1" runat="server">
<div id="wrapper">
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li><a href="support.html"><span>Ons Kantoor</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="blog.html"><span>Blog</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>
</div>
<%--<div class="searchform">
<form id="formsearch" name="formsearch" method="post" action="#">
<span>
<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />
</span>
<input name="button_search" src="images/search.gif" class="button_search" type="image" />
</form>
</div>--%>
<div class="clr"></div>
<div class="logo">
</div>
<div class="clr"></div>
<div class="slider">
<div id="coin-slider"> <a href="#"><img src="Images/slide1.jpg" width="700" height="230" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="310" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="310" alt="" /> </a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<!-- end Header-->
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="fbg">
<div class="fbg_resize">
<div class="col c1">
<h2><span>Image</span> Gallery</h2>
<a href="#"><img src="images/gal1.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal2.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal3.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a> </div>
<div class="col c2">
<h2><span>Services</span> Overview</h2>
<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p>
<ul class="fbg_ul">
<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li>
<li><a href="#">Excepteur officia deserunt.</a></li>
<li><a href="#">Integer tellus ipsum tempor sed.</a></li>
</ul>
</div>
<div class="col c3">
<h2><span>Contact</span> Us</h2>
<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>
<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, USA<br />
<span>Telephone:</span> +123-1234-5678<br />
<span>FAX:</span> +458-4578<br />
<span>Others:</span> +301 - 0125 - 01258<br />
<span>E-mail:</span> <a href="#">[email protected]</a> </p>
</div>
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">&copy; Copyright <a href="#">MyWebSite</a>.</p>
<p class="rf">Design by Dream <a href="http://www.dreamtemplate.com/">Web Templates</a></p>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
 
[/html] 
 
 Thank you
 
 

Answers (1)
Next Recommended Forum