...

View Full Version : Please Someone Help Me.. This Is Doing My Head In



Byronwells
12-07-2009, 04:16 AM
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

Byronwells
12-07-2009, 04:16 AM
css 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;

}

Byronwells
12-07-2009, 04:18 AM
php 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-->

Excavator
12-07-2009, 05:14 AM
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. (http://www.w3.org/TR/CSS2/box.html)

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. (http://www.apaddedcell.com/div-itis)

Byronwells
12-07-2009, 06:30 PM
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. (http://www.w3.org/TR/CSS2/box.html)

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. (http://www.apaddedcell.com/div-itis)

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

Excavator
12-07-2009, 07:04 PM
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.

Byronwells
12-08-2009, 12:42 AM
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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum