WordPress.org

Forums

changing from fixed to fluid (3 posts)

  1. zeboink
    Member
    Posted 8 years ago #

    I'm trying to make the middle section of my site fluid so that i'm not limited to 500px. Any help would be appreciated because I'm a css newb and I've just been getting no where with this:

    /*
    Theme Name: Scratch
    */
    
    body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	font-family: Arial, Helvetica, Georgia, Sans-Serif;
    	font-size: 12px;
    	text-align: center;
    	vertical-align: top;
            background: #666 url(images/bg_body.gif);
    	color: #fff;
    }
    
    h1, h2, h3, h4, h5, h6{
    	font-family: Arial, Helvetica, Georgia, Sans-Serif;
    	font-size: 16px;
    }
    
    a{
    	text-decoration: underline;
    	color: #105cb6;
    }
    
    a:hover{ text-decoration: none; }
    
    a img{ border: 0; }
    
    abbr, acronym{ border: 0; }
    
    address, dl, p{ padding: 10px 0 0; }
    
    blockquote{
    	margin: 10px 10px 0;
    	background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
    	color: #736926;
    }
    
    blockquote p{
    	padding: 10px 10px 10px 20px;
    }
    
    blockquote blockquote{
    	margin: 10px 20px;
    	background: #fff;
    	color: #333;
    }
    
    blockquote blockquote p{ padding: 10px; }
    
    code{
    	background: #f9f9f9;
    }
    
    dt{
    	font-weight: bold;
    }
    
    dd{
    	padding: 0 0 5px 15px;
    }
    
    hr{
    	clear: both;
    	margin: 15px 0 5px;
    	width: 100%;
    	border: 0;
    	height: 1px;
    	text-align: left;
    	background: url(images/bg_comment_bottom.gif) no-repeat;
    }
    
    small{
    	font-size: 10px;
    }
    
    input, textarea{
    	font-family: Arial, Helvetica, Georgia, sans-serif;
    	font-size: 12px;
    	padding: 2px;
    }
    
    input#author, input#email, input#url, textarea#comment{
    	border: 1px solid #cbb945;
    	background-color: #fffadb;
    	padding: 3px;
    }
    
    input#author, input#email, input#url{
    	margin: 0 5px 0 0;
    }
    
    #container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
    	text-align: left;
    	vertical-align: top;
    }
    
    #container{
    	margin: 0 auto;
    	width: 904px;
    	padding: 0 0 0;
    }
    
    #header{
    	margin: 0 0 10px;
    	float: left;
    	width: 904px;
    	height: 210px;
    	background: url(images/bg_header.gif) no-repeat left bottom;
    	color: #333;
    }
    
    #menu ul{
    	margin: 0;
    	padding: 0 0 0 10px;
    	list-style: none;
    }
    
    #menu ul li{
    	float: left;
    	margin: 0 5px 0 0;
    	font-size: 14px;
    	font-weight: bold;
    	background: url(images/bg_tab_right.gif) no-repeat right top;
    	color: #325b0a;
    }
    
    #menu ul li a{
    	display: block;
    	padding: 14px 20px 10px;
    	text-decoration: none;
    	background: url(images/bg_tab_left.gif) no-repeat left top;
    	color: #325b0a;
    }
    
    #menu ul li a:hover{
    	text-decoration: underline;
    }
    
    #pagetitle{
    	clear: both;
    	width: 904px;
    	height: 155px;
    }
    
    #pagetitle h1{
    	padding: 36px 28px 0;
    	font-size: 24px;
    	font-weight: bold;
    	letter-spacing: 1px;
    	text-transform: uppercase;
    	color: #fff;
    }
    
    #pagetitle h1 a{
    	text-decoration: none;
    	color: #fff;
    }
    
    #syndication{
    	float: left;
    	padding: 15px 31px 0;
    	color: #999;
    }
    
    #syndication a{ color: #666; }
    
    #syndication a.feed{
    	padding: 0 0 0 19px;
    	background: url(images/feed_icon.png) no-repeat 0 1px;
    }
    
    /*#searchbox{
    	float: right;
    	padding: 10px 31px 0;
    }
    
    #searchbox input#s{
    	border: 1px solid #ddd;
    	padding: 3px;
    	background: #fff;
    }
    
    #searchbox input#searchsubmit{ height: 24px; }
    */
    
    .pagewrapper{
    	margin: 0 0 10px;
    	float: left;
    	width: 904px;
    	background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
    	color: #333;
    }
    
    .page{
    	float: left;
    	padding: 0 5px 5px;
    	background: url(images/bg_page_top.gif) no-repeat;
    }
    
    .wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
    	float: left;
    	width: 600px;
    }
    
    .narrowcolumnwrapper{
    	margin: 5px 0 0;
    	float: left;
    	width: 500px;
    	background: #fff url(images/bg_narrowcol.gif) repeat-y;
    }
    
    .narrowcolumn{
    	float: left;
    	width: 500px;
    	background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
    }
    
    .content{
            float: left;
    	width: 500px;
    	background: url(images/bg_narrowcol_top.gif) no-repeat left top;
    }
    
    .post{
    	padding: 9px 16px 15px;
    	line-height: 18px;
    }
    
    .post h2{
    	padding: 0 0 2px;
    	font-size: 16px;
    	font-weight: bold;
    	line-height: 27px;
            text-align: center;
    
    }
    
    .post h2 a{
    	text-decoration: none;
    	color: #105cb6;
    	border-bottom: 1px solid #75abea;
    }
    
    .post img{
    	padding: 4px;
    	border: 1px solid #ddd;
    	background: #fff;
    }
    
    .post img.alignleft{
    	float: left;
    	margin: 5px 10px 0 0;
    }
    
    .post img.alignright{
    	float: right;
    	margin: 5px 0 0 10px;
    }
    
    .post img.wp-smiley{
    	padding: 0;
    	border: 0;
    	background: none;
    }
    
    .entry{}
    
    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
    	padding: 9px 0 0;
    }
    
    .entry h1{
    	font-size: 20px;
    	line-height: 30px;
    }
    
    .entry h2{ line-height: 18px; }
    
    .entry h3{ font-size: 14px; }
    
    .entry h4{ font-size: 12px; }
    
    .entry h5{ font-size: 11px; }
    
    .entry h6{ font-size: 10px; }
    
    .postinfo{
    	font-size: 11px;
    	color: #999;
    }
    
    .postinfo a{
    	color: #578cca;
    }
    
    .postdate{ color: #a12a2a; }
    
    .browse{
    	border-top: 1px solid #bdbdbd;
    	padding: 15px 16px;
    	line-height: 18px;
    }
    
    .sidebar, .obar{
    	margin: 0 0 0 5px;
    	float: right;
    	width: 192px;
    	line-height: 18px;
    }
    
    .obar{
    	margin: 0 0 5px 0;
    	float: left;
    }
    
    .sidebar ul, .obar ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .sidebar ul li, .obar ul li{
    	margin: 5px 0 0;
    	padding: 9px 16px 15px;
    	background: url(images/bg_ul_li.gif) no-repeat left top;
    }
    
    .sidebar ul li.widget_search, .obar ul li{
    	padding: 15px 16px;
    }
    
    .sidebar ul li h2, .obar ul li h2{
    	font-size: 20px;
            font-weight: bold;
    	line-height: 16px;
    	color: #cc9900;
    }
    
    .sidebar ul ul li, .obar ul ul li{
    	margin: 0;
    	padding: 0px 0 3px;
    	background: none;
    }
    
    .sidebar ul ul ul, .obar ul ul ul{ padding: 3px 0 0; }
    
    .sidebar ul ul ul li, .obar ul ul ul li{
    	padding: 0px 0px 3px 15px;
    	background: url(images/bg_arrow_right.gif) no-repeat 0px 8px;
    }
    
    .sidebar ul ul ul ul li, .obar ul ul ul li{
    	background: url(images/bg_arrow_right_2.gif) no-repeat 0px 8px;
    }
    
    /* COMMENTS TEMPLATE */
    
    .post h3#comments, .post h3#respond{
    	padding: 0 0 2px 19px;
    	line-height: 27px;
    	background: url(images/user_comment.gif) no-repeat 0 6px;
    	color: #e45b00;
    }
    
    .post h3#respond{
    	background: url(images/add_comment.gif) no-repeat 0 6px;
    	color: #333;
    }
    
    ol.commentlist{
    	margin: 0 0 11px;
    	padding:0;
    	list-style: none;
    }
    
    ol.commentlist li{
    	padding: 13px 0;
    	background: url(images/bg_comment_bottom.gif) no-repeat left bottom;
    }
    
    ol.commentlist li .commentmetadata{
    	font-size: 11px;
    	color: #546477;
    }
    
    ol.commentlist li .commentmetadata a{
    	color: #546477;
    }
    
    form#commentform small{
    	font-size: 11px;
    }
    

    Any suggestions would be great! thanks

  2. zeboink
    Member
    Posted 8 years ago #

    gah! i know it's a lot to ask, but if you can fix it, or help me enough to fix it I'll paypal you some cash.

  3. Just the CSS is not enough for somebody to help you. The CSS is meaningless without actually seeing the page. Post a link to your site if you want somebody to respond.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags