Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Please Someone Help Me.. This Is Doing My Head In

    Alright Guys

    I am hoping that someone can spot the mistake straight away and explain whats wrong... I cant take much more...!!

    Please see here http://www.supreme-host.com/marketplace/marketplace.php

    What I am trying to do is move the featured photos, the middle box closer to the left hand column.

    The left hand column has got a padding on 10px on the right hand side. The featured photos box (which is hpflick class) has no padding.. So it should be 10px but no way is it.. Can some one help?

    I am including the full code to both the css and the actual php page.. Because it might be something to do with other parts of the code.. If so please advise

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    css code

    Code:
    /* 
    
    	Theme Name: Revolution Pro Media
    
    	Theme URL: http://www.revolutiontheme.com
    
    	Description: Revolution Pro Media is an insanely customizable 2-column Widget-ready theme created for WordPress.
    
    	Author: Brian Gardner
    
    	Author URI: http://www.briangardner.com
    
    	Version: 3.0
    
    
    
    	Changelog:
    
    		v4.0 - 12.15.08
    
    		Fourth Release of Revolution Pro Media
    
    */
    
    
    
    body {
    
    	background: #393939 url(images/bg.gif) repeat-x;
    
    	width: 960px;
    
    	color: #202020;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #wrap {
    
    	background: #DDDDDD;
    
    	width: 920px;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    /************************************************
    
    *	Hyperlinks									*
    
    ************************************************/
    
    
    
    a, a:visited {
    
    	color: #B60000;
    
    	text-decoration: none;
    
    	}
    
    	
    
    a:hover {
    
    	text-decoration: underline;
    
    	}
    
    	
    
    /************************************************
    
    *	Header  									*
    
    ************************************************/
    
    
    
    #header {
    
    	background: url(http://www.supreme-host.com/marketplace/images/header.jpg);
    
    	width: 920px;
    
    	height: 173px;
    
    	color: #FFFFFF;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	overflow: hidden;
    
    	}
    
    	
    
    #header h1 {
    
    	color: #006699;
    
    	font-size: 22px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 30px 0px 0px 0px;
    
    	}
    
    	
    
    #header h1 {
    
    	color: #FFFFFF;
    
    	font-size: 22px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 30px 0px 0px 0px;
    
    	}
    
    	
    
    #header h1 a, #header h1 a:visited  {
    
    	color: #FFFFFF;
    
    	text-decoration: none;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 10px 0px 0px 0px;
    
    	}
    
    
    
    #header h1 a:hover {
    
    	color: #FFFFFF;
    
    	text-decoration: none;
    
    	}
    
    	
    
    #header img {
    
    	border: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #header a img {
    
    	border: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    #headerleft {
    
    	width: 600px;
    
    	float: left;
    
    	font-size: 14px;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	overflow: hidden;
    
    	}
    
    	
    
    #headerleft p {
    
    	color: #FFFFFF;
    
    	font-size: 14px;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    
    
    #headerright {
    
    	width: 250px;
    
    	float: right;
    
    	font-size: 12px;
    
    	text-align: right;
    
    	margin: 0px;
    
    	padding: 50px 15px 0px 0px;
    
    	overflow: hidden;
    
    	}
    
    	
    
    #headerright p {
    
    	color: #FFFFFF;
    
    	font-size: 12px;
    
    	margin: 0px;
    
    	padding: 0px 20px 0px 0px;
    
    	}
    
    	
    
    /************************************************
    
    *	Navbar      								*
    
    ************************************************/
    
    
    
    #navbar {
    
    	background: #2B2B2B url(images/navbar.gif);
    
    	width: 920px;
    
    	height: 35px;
    
    	color: #FFFFFF;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #navbarleft {
    
    	width: 715px;
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #navbarright {
    
    	width: 200px;
    
    	float: right;
    
    	margin: 0px;
    
    	padding: 6px 0px 0px 0px;
    
    	}
    
    	
    
    #navbarright img {
    
    	border: none;
    
    	margin: 0px 0px 0px 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    #nav {
    
    	margin: 0px 0px 0px 15px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    	
    
    #nav ul {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    
    
    #nav a {
    
    	background: #2B2B2B;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	font-size: 10px;
    
        font-weight: normal;
    
        text-transform: uppercase;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 11px 10px 11px 10px;
    
    	}
    
    	
    
    #nav a:hover {
    
    	background: #666666;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	text-decoration: none;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 11px 10px 11px 10px;
    
    	}
    
    
    
    #nav li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #nav li li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	width: 140px;
    
    	}
    
    	
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    
    	background: #2B2B2B;
    
    	width: 140px;
    
    	float: none;
    
    	margin: 0px;
    
    	padding: 8px 10px 8px 10px;
    
    	border-top: 1px solid #C0C0C0;
    
    	}
    
    	
    
    #nav li li a:hover, #nav li li a:active {
    
    	background: #666666;
    
    	padding: 8px 10px 8px 10px;
    
    	}
    
    
    
    #nav li ul {
    
    	position: absolute;
    
    	width: 10em;
    
    	left: -999em;
    
    	}
    
    
    
    #nav li:hover ul {
    
    	left: auto;
    
    	display: block;
    
    	}
    
    	
    
    #nav li:hover ul, #nav li.sfhover ul {
    
    	left: auto;
    
    	}
    
    	
    
    /************************************************
    
    *	SubNavbar      								*
    
    ************************************************/
    
    
    
    #subnavbar {
    
    	background: #006699;
    
    	width: 920px;
    
    	height: 24px;
    
    	color: #FFFFFF;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #subnav {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    	
    
    #subnav ul {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    
    
    #subnav a {
    
    	background: #006699;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	font-size: 10px;
    
        font-weight: normal;
    
        text-transform: uppercase;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 6px 10px 5px 10px;
    
    	}
    
    	
    
    #subnav a:hover {
    
    	background: #006699;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	text-decoration: none;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 6px 10px 5px 10px;
    
    	}
    
    
    
    #subnav li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #subnav li li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	width: 140px;
    
    	}
    
    	
    
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    
    	background: #006699;
    
    	width: 140px;
    
    	float: none;
    
    	margin: 0px;
    
    	padding: 6px 10px 5px 10px;
    
    	border-top: 1px solid #FFFFFF;
    
    	}
    
    	
    
    #subnav li li a:hover, #subnav li li a:active {
    
    	background: #666666;
    
    	}
    
    
    
    #subnav li ul {
    
    	position: absolute;
    
    	width: 10em;
    
    	left: -999em;
    
    	}
    
    
    
    #subnav li:hover ul {
    
    	left: auto;
    
    	display: block;
    
    	}
    
    	
    
    #subnav li:hover ul, #subnav li.sfhover1 ul {
    
    	left: auto;
    
    	}
    
    	
    
    /************************************************
    
    *	Homepage 					     		    * 
    
    ************************************************/
    
    
    
    #homepage {
    
    	width: 920px;
    	
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	}
    
    
    
    #homepage p {
    
    	padding: 0px 0px 15px 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #homepage h1 {
    
    	color: #202020;
    
    	font-size: 22px;
    	
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 10px 0px 0px 0px;
    
    	}
    
    	
    
    #homepage h1 a, #homepage h1 a:visited  {
    
    	color: #202020;
    
    	text-decoration: none;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 10px 0px 0px 0px;
    
    	}
    
    
    
    #homepage h1 a:hover {
    
    	color: #B60000;
    
    	text-decoration: none;
    
    	}
    
    	
    
    #homepage h2 {
    
    	background: #006699;
    
    	color: #FFFFFF;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 1px 0px 1px 5px;
    
    	line-height: 20px;
    
    	}
    
    	
    
    #homepage h3 {
    
    	color: #000000;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: bold;
    
    	margin: 0px 0px 3px 0px;
    
    	padding: 0px;
    
    	line-height: 16px;
    
    	}
    
    	
    
    #homepage h3 a, #homepage h3 a:visited {
    
    	color: #000000;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: bold;
    
    	margin: 0px 0px 3px 0px;
    
    	padding: 0px;
    
    	line-height: 16px;
    
    	text-decoration: underline;
    
    	}
    
    
    
    #homepage h3 a:hover {
    
    	color: #B60000;
    
    	text-decoration: none;
    
    	}
    
    	
    
    #homepage h4 {
    
    	background: #006699;
    
    	color: #FFFFFF;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 1px 0px 1px 5px;
    
    	line-height: 20px;
    
    	}
    
    
    
    #hpleft {
    
    	float: left;
    
    	width: 920px;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .hptabber {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 550px;
    
    	margin: 10px 0px 10px 10px;
    
    	padding: 9px 9px 9px 9px;
    
    	display: inline;
    
    	border: 1px solid #C0C0C0;
    
    	}
    
    	
    
    .hptabber img {
    
    	border: none;
    
    	margin: 0px;
    
    	}
    
    	
    
    .hpflickr {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 175px;
    
    	margin: 0px 0px 0px 0px;
    
    	padding: 9px 9px 9px 9px;
    
    	display: inline;
    
    	border: 1px solid #C0C0C0;
    
    	}
    
    	
    
    .hpflickr a img {
    
    	border: 1px solid #999999;
    
    	margin: 0px 10px 0px 0px;
    
    	padding: 2px;
    
    	}
    
    	
    
    .hpflickr a:hover img {
    
    	border: 1px solid #000000;
    
    	margin: 0px 10px 0px 0px;
    
    	padding: 2px;
    
    	}
    
    	
    
    .homebottomleft {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 260px;
    
    	font-size: 11px;
    
    	margin: 0px 0px 0px 10px;
    
    	padding: 9px 9px 9px 9px;
    
    	overflow: hidden;
    
    	line-height: 16px;
    
    	display: inline;
    
    	border: 1px solid #C0C0C0;
    
    	}
    
    	
    
    .homebottomleft ul {
    
    	list-style-type: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .homebottomleft ul li {
    
    	list-style-type: square;
    
    	margin: 0px 0px 0px 20px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .homebottomleft img {
    
    	border: none;
    
    	margin: 5px 0px 10px 0px;
    
    	}
    
    	
    
    .homebottomright {
    
    	background: #FFFFFF;
    
    	float: right;
    
    	width: 260px;
    
    	font-size: 11px;
    
    	margin: 0px;
    
    	padding: 9px 9px 9px 9px;
    
    	overflow: hidden;
    
    	line-height: 16px;
    
    	border: 1px solid #C0C0C0;
    
    	}
    
    	
    
    .homebottomright ul {
    
    	list-style-type: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .homebottomright ul li {
    
    	list-style-type: square;
    
    	margin: 0px 0px 0px 20px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .homebottomright img {
    
    	border: none;
    
    	margin: 5px 0px 10px 0px;
    
    	}
    
    
    
    /************************************************
    
    *	Content 					     		    * 
    
    ************************************************/
    
    
    
    #content {
    
    	width: 920px;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	}
    
    
    
    #content p {
    
    	padding: 0px 0px 15px 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #content h1 {
    
    	color: #202020;
    
    	font-size: 22px;
    
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 0px;
    
    
    
    
    
    	}
    
    	
    
    #content h1 a, #content h1 a:visited  {
    
    	color: #202020;
    
    	text-decoration: none;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    #content h1 a:hover {
    
    	color: #B60000;
    
    	text-decoration: none;
    
    	}
    
    	
    
    #content h4 {
    
    	color: #202020;
    
    	font-size: 22px;
    
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 0px 0px 8px 0px;
    
    	border-bottom: 1px dotted #C0C0C0;
    
    	}
    
    	
    
    #content img.wp-smiley {
    
    	float: none;
    
    	border: none;
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    
    
    #content img.wp-wink {
    
    	float: none;
    
    	border: none;
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #contentleft {
    
    	float: left;
    
    	width: 570px;
    
    	margin: 10px 0px 0px 10px;
    
    	padding: 0px;
    
    	display: inline;
    
    	}
    
    	
    
    #contentleft a img {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	border: none;
    
    	}
    
    	
    
    .archive {
    
    	float: left;
    
    	width: 250px;
    
    	margin: 0px;
    
    	padding: 0px 0px 20px 0px;
    
    	}
    
    	
    
    .date {
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    .date p {
    
    	font-size: 12px;
    
    	}
    
    
    
    blockquote {
    
    	margin: 0px 20px 15px 20px;
    
    	padding: 5px 0px 5px 15px;
    
    	border-left: 5px solid #C0C0C0;
    
    	}
    
    	
    
    #content blockquote p {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    .breadcrumb {
    
    	float: left;
    
    	width: 550px;
    
    	font-size: 11px;
    
    	margin: 0px 0px 20px 0px;
    
    	padding: 0px 0px 3px 0px;
    
    	border-bottom: 1px dotted #C0C0C0;
    
    	}
    
    	
    
    .postarea {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 550px;
    
    	margin: 0px 0px 0px 0px;
    
    	padding: 9px 9px 0px 9px;
    
    	
    
    	}
    
    	
    
    .postarea ol {
    
        margin: 0px 0px 0px 20px;
    
        padding: 0px 0px 10px 0px;
    
        }
    
           
    
    .postarea ol li {
    
        margin: 0px 0px 0px 20px;
    
        padding: 0px 0px 5px 0px;
    
        }
    
           
    
    .postarea ul {
    
        list-style-type: square;
    
        margin: 0px 0px 0px 20px;
    
        padding: 0px 0px 10px 0px;
    
        }
    
           
    
    .postarea ul li {
    
        list-style-type: square;
    
        margin: 0px 0px 0px 20px;
    
        padding: 0px 0px 5px 0px;
    
        }
    
    	   
    
    .postarea ul ul li {
    
    	list-style-type: square;
    
    	margin: 0px 0px 0px 20px;
    
    	padding: 0px;
    
    	}
    
    
    
    .tabbertab h1 {
    
            margin: 0 0 10px !important;
    
            padding: 0 0 8px !important;
    
            border-bottom: 1px solid #C0C0C0;
    
    }
    
    
    
    *.date {
    
    background:#FFFFFF;
    
    border:2px solid #CCCCCC;
    
    color:#006699;
    
    float:right;
    
    font-family:"Lucida Sans","Trebuchet MS",Verdana,Arial,Serif;
    
    font-size:0.8em;
    
    font-variant:small-caps;
    
    font-weight:bold;
    
    margin: 0px 0 0 0px !important;
    
    padding:0 10px !important;
    
    text-align:center;
    
    }
    
    *.date span 
    
    {
    
    display:block;
    
    }
    
    *.date .day 
    
    {
    
    font-size:1.6em;
    
    }
    
    
    
    
    
    
    
    	
    
    
    
    	
    
    
    
    .leftbox {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 175px;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 3px 3px 3px 3px;
    
    	border: 1px solid #000000;
    
    	}
    	
    	
    
    .rightbox {
    
    	background: #FFFFFF;
    
    	float: right;
    
    	width: 175px;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 3px 3px 3px 3px;
    
    	border: 1px solid #000000;
    
    	}
    
    	
    
    
    
    	
    
    
    	
    
    
    /************************************************
    
    *	Left Sidebar 		    	        	        * 
    
    ************************************************/
    
    
    
    #l_sidebar {
    
    	float: left;
    
    	width: 195px;
    
    	margin: 10px 10px 10px 10px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	display: inline;
    
    	}
    
    	
    
    #l_sidebar p {
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #l_sidebar a img {
    
    	border: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #l_sidebar h2 {
    
    	background: url(http://www.supreme-host.com/marketplace/images/headerback.jpg);
    	
    	height: 45px;
    
    	color: #f9ea45;
    
    	font-size: 12px;
    
    	font-family: Verdana;
    
    	font-weight: bold;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 1px 0px 1px 5px;
    
    	line-height: 42px;
    
    	}
    
    	
    
    #l_sidebar h3 {
    
    	color: #006699;
    
    	font-size: 18px;
    
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	}
    
    	
    
    #l_sidebar ul {
    
    	list-style-type: none;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #l_sidebar ul li {
    
    	list-style-type: none;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    #l_sidebar ul ul {
    
    	list-style-type: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #l_sidebar ul li li {
    
    	background: #FFFFFF url(images/icon.gif) no-repeat top left;
    
    	padding: 0px 0px 5px 20px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #l_sidebar ul li ul li {
    
    	background: #FFFFFF url(images/icon.gif) no-repeat top left;
    
    	padding: 0px 0px 5px 20px;
    
    	margin: 0px;
    
    	}
    
    
    	
    
    /************************************************
    
    *	Right Sidebar                       	    * 
    
    ************************************************/
    
    
    #r_sidebar {
    
    	float: right;
    
    	width: 195px;
    
    	margin: 10px 10px 10px 10px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	display: inline;
    
    	}
    
    	
    
    #r_sidebar p {
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #r_sidebar a img {
    
    	border: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #r_sidebar h2 {
    	
    	background: url(http://www.supreme-host.com/marketplace/images/headerback.jpg);
    	
    	height: 45px;
    
    	color: #f9ea45;
    
    	font-size: 12px;
    
    	font-family: Verdana;
    
    	font-weight: bold;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 1px 0px 1px 5px;
    
    	line-height: 42px;
    
    	}
    
    	
    
    #r_sidebar h3 {
    
    	color: #006699;
    
    	font-size: 18px;
    
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	}
    
    	
    
    #r_sidebar ul {
    
    	list-style-type: none;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #r_sidebar ul li {
    
    	list-style-type: none;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 0px;
    
    	}
    
    
    
    #r_sidebar ul ul {
    
    	list-style-type: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #r_sidebar ul li li {
    
    	background: #FFFFFF url(images/icon.gif) no-repeat top left;
    
    	padding: 0px 0px 5px 20px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #r_sidebar ul li ul li {
    
    	background: #FFFFFF url(images/icon.gif) no-repeat top left;
    
    	padding: 0px 0px 5px 20px;
    
    	margin: 0px;
    
    	}
    
    
    	
    
    /************************************************
    
    *	Search Form									*
    
    ************************************************/
    
    
    
    #searchform {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	overflow: hidden;
    
    	}
    
    	
    
    #searchbox {
    
    	background: #EEEEEE;
    
    	width: 150px;
    
    	color: #202020;
    
    	font-size: 11px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	padding: 3px;
    
    	margin: 0px 5px 7px 0px;
    
    	border-top: 1px solid #666666;
    
    	border-right: 1px solid #DDDDDD;
    
    	border-left: 1px solid #666666;
    
    	border-bottom: 1px solid #DDDDDD;
    
    	display: inline;
    
    	}
    
    	
    
    #subscribe {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	overflow: hidden;
    
    	}
    
    	
    
    #subbutton {
    
    	background: #777777 url(images/navbar.gif);
    
    	color: #FFFFFF;
    
    	font-size: 11px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	font-weight: bold;
    
    	padding: 4px 4px 3px 4px;
    
    	margin: 0px 0px 0px 8px;
    
    	border-top: 1px solid #666666;
    
    	border-right: 1px solid #DDDDDD;
    
    	border-left: 1px solid #666666;
    
    	border-bottom: 1px solid #DDDDDD;	
    
    	}
    
    	
    
    #subbox {
    
    	background: #EEEEEE;
    
    	width: 240px;
    
    	color: #202020;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	padding: 4px;
    
    	margin: 5px 0px 0px 0px;
    
    	border-top: 1px solid #666666;
    
    	border-right: 1px solid #DDDDDD;
    
    	border-left: 1px solid #666666;
    
    	border-bottom: 1px solid #DDDDDD;
    
    	}
    
    
    
    #author, #email, #url {
    
    	background: #EEEEEE;
    
    	color: #202020;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	padding: 4px;
    
    	margin: 0px;
    
    	border-top: 1px solid #666666;
    
    	border-right: 1px solid #DDDDDD;
    
    	border-left: 1px solid #666666;
    
    	border-bottom: 1px solid #DDDDDD;
    
    	}
    
    	
    
    #submit {
    
    	background: #202020;
    
    	color: #FFFFFF;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	padding: 4px;
    
    	margin: 0px;
    
    	border-top: 1px solid #DDDDDD;
    
    	border-right: 1px solid #666666;
    
    	border-left: 1px solid #DDDDDD;
    
    	border-bottom: 1px solid #666666;
    
    	}
    
    	
    
    #words {
    
    	background: #EEEEEE;
    
    	width: 420px;
    
    	color: #202020;
    
    	font-size: 12px;
    
    	font-family: Arial, Tahoma, Verdana;
    
    	padding: 4px;
    
    	margin: 0px;
    
    	border-top: 1px solid #666666;
    
    	border-right: 1px solid #DDDDDD;
    
    	border-left: 1px solid #666666;
    
    	border-bottom: 1px solid #DDDDDD;
    
    	}

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    php code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <head profile="http://gmpg.org/xfn/11">
    
    
    
    
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    
    -->
    </style>
    </head>
    
    
    
    <body>
    
    
    
    <div class="wrap"> <!-- begin wrap-->
    
    <div id="header">
    
    </div> <!-- End Header-->
    
    <div id="navbar"> <!--Begin Navbar-->
    
    <div id="navbarleft"> <!--Begin Navbar left-->
    
    		<ul id="nav">
            
            <li><a href="">Home</a></li>
            
            </ul>
    
    	</div> <!--End Navbar left-->
        
     <!--End Navbar Right-->
        
        </div> <!--End Navbar-->
    
    
    
    
    </div> <!--End Sub Navbar-->
    
    
    
    <div id="homepage">  <!--Begin Homepage-->
    
    <div id="wrap"> <!--Begin Wrap-->
    
      <div id="hpleft"> <!--Begin Hpleft-->
     
    
    
    <div id="l_sidebar">  
     
    
    <div class="leftbox">
    
    		<h2 align="center">NAVIGATION</h2>
    </div>
    
    <div class="leftbox">
    
    		<h2 align="center">CATEGORIES</h2>
    
    	
    
    
    </div>
      
      
      
      
    <div style="clear: both;"></div>
      <!-- PUT IT HERE -->
    </div> <!-- end wrap-->
      
      <div class="hpflickr">
    
    			<h4>Featured Photos</h4>
    								
    		</div>
            
            
      <div id="r_sidebar">   
    
    <div class="rightbox">
    
    		<h2 align="center">SEARCH</h2>
    <form id="searchform" method="get" action="">
    
    		<p align="center">
    		  <input type="text" value="Search our site..." name="s" id="searchbox" onfocus="if (this.value == 'search our site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search our site...';}" />
    		  </p>
    		<p align="center">
    		  <input type="image" style="vertical-align:top;" src="images/searchbutton.gif" alt="Search" align="middle" />
    		  </p>
    </form>
            </div></div>
    	</div>
    
    
      
       
      
      
    <div style="clear: both;"></div>
      <!-- PUT IT HERE -->
    </div> <!-- end wrap-->

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Byronwells,
    #l_sidebar has margin: 10px 10px 0px 10px; around it and .hpflickr has margin: 10px 10px 0px 5px; That adds up to 15px between the two. There is also 5px left padding on #homepage h2 which moves it further over.

    Of course, when you put 193px wide content into 175px wide #l_sidebar, that doesn't always work like you want.

    Have a look at how the box model works.

    Also, I'm not seeing the reason for having #hpleft nested in #wrap nested in #homepage. They are all 920px wide divs so, even if there is some future use for them later on in development, there is certainly no need to float any of them.
    Have a look at divitis and how to avoid it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Byronwells,
    #l_sidebar has margin: 10px 10px 0px 10px; around it and .hpflickr has margin: 10px 10px 0px 5px; That adds up to 15px between the two. There is also 5px left padding on #homepage h2 which moves it further over.

    Of course, when you put 193px wide content into 175px wide #l_sidebar, that doesn't always work like you want.

    Have a look at how the box model works.

    Also, I'm not seeing the reason for having #hpleft nested in #wrap nested in #homepage. They are all 920px wide divs so, even if there is some future use for them later on in development, there is certainly no need to float any of them.
    Have a look at divitis and how to avoid it.
    When you say that I am trying to put a 193px wide content into a 175px wide are you talking about the padding bits? If not the background image is 175px

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, like that box model page shows you, margin/padding/border all count in figuring width.
    Looks like you got it fixed? Is that where you wanted your featured photos to end up?

    There are some things the validator shows that you could fix. Have a look at the links about validation in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Yes, like that box model page shows you, margin/padding/border all count in figuring width.
    Looks like you got it fixed? Is that where you wanted your featured photos to end up?

    There are some things the validator shows that you could fix. Have a look at the links about validation in my sig below.
    Alright Excavator

    I think I have nearly solved it I am trying to get the right hand side of the featured photos box next door to the Search Box to be the same as is it on the left hand side..

    I have tried several combinations.. But cant work it out..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •