WordPress.org

Ready to get started?Download WordPress

Forums

changing from fixed to fluid (3 posts)

  1. zeboink
    Member
    Posted 7 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 7 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. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    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