PDA

View Full Version : Frustrating background problem!



stogiebear
08-10-2010, 02:07 PM
Hi folks...

I have enclosed an image that illustrates my small problem...

The right hand 'divs' are transparent but the left one is not...

I have scoured the main.css file and tried all sorts of adjustments but I simply can't get the left hand side from being white.

Below is the current code... I think I have copied the relevent parts...
__________________________________________________


.framebg {
background: transparent;
}

.frameselbg {
background: red;
}

#leftcol {
float: left;
color: #000;
width: 704px;
margin: 0px 6px 0px 0px;
padding: 0;

}

#rightcol {
float: left;
color: #fff;
width: 200px;
margin: 0px 6px 0px 0px;
padding: 0;
}

#vid_pg_leftcol {
float: left;
margin: 0px 6px 0px 0px;
padding: 3px 3px 3px 3px;
width: 685px;
}

.vid_pg_rightcol_head {
color: #000;
width: 195px;
height: 31px;
float: right;
position: relative;
background: url('images/box_side.png') no-repeat;
}

.vid_pg_rightcol_bot {
width: 195px;
height: 24px;
float: right;
position: relative;
margin: 0px 0px 10px 0px;
background: url('images/box_side_bot.png') no-repeat;
}

___________________________________________________
Thanks for your time,

SB

met
08-10-2010, 03:22 PM
need to see the code for the other columns and the images.

an easy-fix is to have a structure like this:



<div class="wrapper">
<div class="header"></div>
<div class="content">
<!-- content -->
</div>
</div class="footer"></div>
</div>


header/footer are your images with no background colour. wrapper has no background colour/the blue colour. the transparent images now have the correct background colour.

give "content" a background of white.


failing that, needs moar code - markup, preferably a link.

stogiebear
08-10-2010, 03:54 PM
Hi Met...

Thanks for your time and reply...

Here is the entire code for the main.css file.

Is the image attached to the original post enough to see what I'm talking about?

I could PM you a link to the site - it affects every page on it of course.

I used to be OK dealing with plain old HTML but newer ways have left me a bit stranded!

It seems to be a design fault in the whole site as the alternative 'skin' which comes with the package I bought suffers from exactly the same thing!

Anyway - the rest of the code is here and I hope that's going to help you a bit more...

Cheer,

SB


body {
font-family:Tahoma, Geneva, sans-serif;
font-size: 13px;
background-color:#fff;
background-attachment:fixed;
background-image:url(http://www.theladyboyforums.com/banners/bg1.jpg);
color: #000;
}

form {
margin:0px;
display:inline;
}

#wrapper {
margin: 0 auto;
width: 950px;
}
#header {
color: #333;
width: 900px;
padding: 5px;
}

#footer {
width: 900px;
background: transparent;
text-align: center;
float: left;
}

a:link, a:visited, a:hover, a:active {
color: #009;
}

.comment {
width: 650px;
border-bottom: 1px solid #666;
}

legend {
font-size:14px;
color: #000;
}

.enterbutton {
border:solid 2px #999;
background-color: #030;
color:#fff;
font-size:14px;
font-weight:bold;
margin:10px;
width:100px;
}

.exitbutton {
border:solid 2px #999;
background-color: #4E0507;
color:#fff;
font-size:14px;
font-weight:bold;
margin:10px;
width:100px;
}

.online_now {
color: #093;
font-weight: bold;
}

.online_today {
color: #039;
font-weight: bold;
}

.online_yest {
color: #B8550C;
font-weight: bold;
}

.online_days {
color: #FF0;
font-weight: bold;
}

.framebg {
background: transparent;
}

.frameselbg {
background: red;
}

#leftcol {
float: left;
color: #000;
width: 704px;
margin: 0px 6px 0px 0px;
padding: 0;

}

#rightcol {
float: left;
color: #fff;
width: 200px;
margin: 0px 6px 0px 0px;
padding: 0;
}

#vid_pg_leftcol {
float: left;
margin: 0px 6px 0px 0px;
padding: 3px 3px 3px 3px;
width: 685px;
}

.vid_pg_rightcol_head {
color: #000;
width: 195px;
height: 31px;
float: right;
position: relative;
background: url('images/box_side.png') no-repeat;
}

.vid_pg_rightcol_bot {
width: 195px;
height: 24px;
float: right;
position: relative;
margin: 0px 0px 10px 0px;
background: url('images/box_side_bot.png') no-repeat;
}

.vid_pg_rightcol {
color: #000;
background: #f1f1f1;
padding: 0px 0px 10px 10px;
margin: 0px 0px 0px 0px;
width: 181px;
float: right;
border-left:2px solid #ccc;
border-right:2px solid #ccc;
position: relative;
}

.video_box {
width: auto;
padding-left:5px;
margin: 0;
background-color:#f1f1f1;
border-left:2px solid #ccc;
border-right:2px solid #ccc;
}

.video_box_head {
color: #000;
clear:both;
padding: 0;
margin: 0;
width: auto;
background: #fff url('images/box_head.png') no-repeat;
height:30px;

}

.video_box_bot {
clear:both;
padding: 0;
margin: 0;
width: auto;
background: #fff url('images/box_bot.png') no-repeat;
height:40px;

}



.video_box_head_txt {
font-weight:bold;
font-size:14px;
padding: 8px;
margin: 0;
}


.channellist {
width: 160px;
padding: 0px;
margin: 0px;
}

.channellist ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

.channellist ul li {
margin: 0px;
padding: 0px;
}

.channellist ul li a {
display: block;
border-bottom: 1px solid #333;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #000;
}

.channellist ul li a:hover, .channellist ul li a:focus {
color: #000;
background-color: #ccc;
}

.thumb{
border: 1px solid #333;
width: 160px;
height: 108px;
}

.preview_video {
font-size:11px;
width: 168px;
height: 205px;
float: left;
position:relative;
}

.preview_video a:link, .preview_video a:visited, .preview_video a:hover, .preview_video a:active{
font-weight: bold;
}

.errormsg
{
color: #900;
font-weight: bold;
}

.succmsg
{
color: #006600;
font-weight: bold;
}


.tag_sz1{
font-size:12px;
}

.tag_sz2{
font-size:14px;
}

.tag_sz3{
font-size:16px;
}

.tag_sz4{
font-size:18px;
}

.tag_sz5{
font-size:20px;
}

.table_head {
font-size:12px;
background-color: #DFDFDF;
color:#000;
}

.table_head a:link, .table_head a:visited, .table_head a:hover, .table_head a:active{
color: #FFF;
}

.table_cell1 {
font-size:12px;
background-color: #F3F3F3;
color:#000;
}

.table_cell2 {
font-size:12px;
background-color: #DFDFDF;
color:#000;
}

.table_end {
font-size:12px;
background-color: #FEFEED;
}

select {
font-size:12px;
border:1px solid #666;
background-color: #f1f1f1;
color:#000;
margin-top:3px;
}

input.checkbox {
border:0px solid #EBEBEB;
background-color: transparent;
color:#FFBA53;
width:20px;
}

input.button {
font-size:14px;
border:0;
background: url('images/button200.png') no-repeat;
color:#fff;
width:208px;
height:38px;
margin-top:3px;
padding-bottom:8px;
}

input {
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #f1f1f1;
color:#000;
width:200px;
}

textarea {
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #f1f1f1;
color:#000;
width:300px;
}

.message {
font-size:12px;
padding:3px;
margin-top:3px;
border:1px solid #666;
background-color: #f1f1f1;
color:#000;
width:500px;
height:180px;
}

input.button40 {
font-size:10px;
padding:2px;
border:1px solid #CCC;
background-color: #f1f1f1;
color:#FFF;
width:40px;
}

input.button60 {
font-size:10px;
padding:2px;
border:1px solid #999;
background-color: #ccc;
color:#000;
width:60px;
margin-top:3px;
}


input.input40 {
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #F1F1F1;
color:#000;
width:40px;
}

input.input80 {
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #F1F1F1;
color:#000;
width:80px;
}

input.input120 {
vertical-align:text-top;
margin-top:2px;
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #F1F1F1;
color:#000;
width:120px;
}

input.input300 {
font-size:12px;
padding:3px;
border:1px solid #666;
background-color: #f1f1f1;
color:#000;
width:300px;
}

input.searchbutton {
vertical-align:text-top;
margin-top:0;
border:0;
color:#000;
width:27px;
height:27px;
background: url('images/search.png') no-repeat;
}

.pagination {
clear:both;
padding: 1px;
line-height: 20px;
}

.pagination ul {
margin: 0;
padding: 0;
text-align: center;
font-size: 12px;
}

.pagination li {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}


.pagination a {
padding: 0 5px;
border: 1px solid #ccc;
text-decoration: none;
color: #000;
}

.pagination a:hover, .pagination a:active {
border: 1px solid #000;
color: #000;
background-color: #ccc;
}

.pagination a.currentpage {
background-color: #ccc;
border-color: #000;
font-weight: bold;
cursor: default;
color: #000;
}

.pagination a.disablelink, .pagination a.disablelink:hover {
background-color: #ccc;
cursor: default;
color: #000;
border-color: #000;
font-weight: normal;
}

.pagination a.prevnext {
background-color: #ccc;
color: #000;
}

.ratingblock {
display:block;
padding-bottom:3px;
margin-bottom:3px;
}

.loading {
height: 30px;
background: url('../../ratings/loading.gif') 50% 50% no-repeat;
}

.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 30px;
position: relative;
background: url('../../ratings/starrating.png') top left repeat-x;
}

.unit-rating li {
text-indent: -90000px;
padding:0px;
margin:0px;
float: left;
}

.unit-rating li a {
outline: none;
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}

.unit-rating li a:hover {
background: url('../../ratings/starrating.png') left center;
z-index: 2;
left: 0px;
}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating a.r6-unit{left: 150px;}
.unit-rating a.r6-unit:hover{width: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}

.unit-rating li.current-rating {
background: url('../../ratings/starrating.png') left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

.voted {color:#000;}
.thanks {color:#006600;}
.static {color:#5D3126;}

/*
###########################
###########################
*/


.pre_ratingblock {
display:block;
padding-bottom:2px;
margin-bottom:2px;
}

.pre_loading {
height: 16px;
background: url('../../ratings/loading.gif') 50% 50% no-repeat;
}

.pre_unit-rating {
list-style:none;
margin: 0px;
padding:0px;
height: 16px;
position: relative;
background: url('../../ratings/prestarrating.png') top left repeat-x;
}

.pre_unit-rating li{
text-indent: -90000px;
padding:0px;
margin:0px;
float: left;
}

.pre_unit-rating li a {
outline: none;
display:block;
width:16px;
height: 16px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}

.pre_unit-rating li a:hover{
background: url('../../ratings/prestarrating.png') left center;
z-index: 2;
left: 0px;
}

.pre_unit-rating a.r1-unit{left: 0px;}
.pre_unit-rating a.r1-unit:hover{width:16px;}
.pre_unit-rating a.r2-unit{left:16px;}
.pre_unit-rating a.r2-unit:hover{width: 32px;}
.pre_unit-rating a.r3-unit{left: 32px;}
.pre_unit-rating a.r3-unit:hover{width: 48px;}
.pre_unit-rating a.r4-unit{left: 48px;}
.pre_unit-rating a.r4-unit:hover{width: 64px;}
.pre_unit-rating a.r5-unit{left: 64px;}
.pre_unit-rating a.r5-unit:hover{width: 80px;}
.pre_unit-rating a.r6-unit{left: 80px;}
.pre_unit-rating a.r6-unit:hover{width: 96px;}
.pre_unit-rating a.r7-unit{left: 96px;}
.pre_unit-rating a.r7-unit:hover{width: 210px;}
.pre_unit-rating a.r8-unit{left: 210px;}
.pre_unit-rating a.r8-unit:hover{width: 240px;}
.pre_unit-rating a.r9-unit{left: 240px;}
.pre_unit-rating a.r9-unit:hover{width: 270px;}
.pre_unit-rating a.r10-unit{left: 270px;}
.pre_unit-rating a.r10-unit:hover{width: 300px;}

.pre_unit-rating li.pre_current-rating {
background: url('../../ratings/prestarrating.png') left bottom;
position: absolute;
height: 16px;
display: block;
text-indent: -9000px;
z-index: 1;
}

_Aerospace_Eng_
08-10-2010, 04:49 PM
HTML and CSS go hand in hand. We need to see your html too.

stogiebear
08-10-2010, 05:26 PM
OK... we are getting there, then!

Here is the code in it's entirety for the file 'homepage.php'

I am guessing (without looking) that the other pages will be similar as far as my issue is concerned.

I knew there was a relationship between the .css and the .html (.php) page but I didn't know that it affected the little issue I am experiencing so thanks for the prompt!

I hope this helps whoever takes a look.

I've been fiddling around trying different things but unfortunately nothing I have gambled with has made any difference, although I have learned how to do a few other things on the way!

Thanks...

SB



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{site_title}</title>
<link rel="stylesheet" type="text/css" href="{templ_url}/main.css" />
<script type="text/javascript" src="{home_url}/thumbs.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include'fragments/header.php'; ?>
</div>
<div id="leftcol">
<div class="video_box_head">
<div class="video_box_head_txt">Random Videos</div>
</div>
<div class="video_box"> {random} {random_pagination}</div>
<div class="video_box_bot">&nbsp;</div>
<div class="video_box_head">
<div class="video_box_head_txt">Latest Videos</div>
</div>
<div class="video_box"> {latest} {latest_pagination}</div>
<div class="video_box_bot">&nbsp;</div>
<div class="video_box_head">
<div class="video_box_head_txt">Most Viewed Videos</div>
</div>
<div class="video_box"> {most_viewed} {most_viewed_pagination}</a></div>
<div class="video_box_bot">&nbsp;</div>
<div class="video_box_head">
<div class="video_box_head_txt">Most Discussed Videos</div>
</div>
<div class="video_box"> {most_discussed} {most_discussed_pagination}</div>
<div class="video_box_bot">&nbsp;</div>
<div class="video_box_head">
<div class="video_box_head_txt">Highest Rated Videos</div>
</div>
<div class="video_box"> {highest_rated} {highest_rated_pagination}</div>
<div class="video_box_bot">&nbsp;</div>
</div>
<div id="rightcol">
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">Search</div>
</div>
<div class="vid_pg_rightcol">{search_form}</div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">User Account</div>
</div>
<div class="vid_pg_rightcol">
<div class="channellist">
<ul>
{user_login}
</ul>
</div>
</div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
<?php
if($set['allow_uploads']){
?>
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">Upload Video</div>
</div>
<div class="vid_pg_rightcol"><a href="{home_url}/users/upload/">Upload Video</a></div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
<?php
}
?>
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">Browse</div>
</div>
<div class="vid_pg_rightcol">
<div class="channellist">
<ul>
<li><a href="{home_url}/browse/random/">Random</a></li>
<li><a href="{home_url}/browse/latest/">Latest</a></li>
<li><a href="{home_url}/browse/most_viewed/">Most Viewed</a></li>
<li><a href="{home_url}/browse/most_discussed/">Most Discussed</a></li>
<li><a href="{home_url}/browse/highest_rated/">Highest Rated</a></li>
</ul>
</div>
</div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">Channels</div>
</div>
<div class="vid_pg_rightcol">
<div class="channellist">
<ul>
<li><a href="{home_url}/channels/">View All</a></li>
{channels}
</ul>
</div>
</div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
<div class="vid_pg_rightcol_head">
<div class="video_box_head_txt">Popular Tags</div>
</div>
<div class="vid_pg_rightcol"> {tag_cloud} </div>
<div class="vid_pg_rightcol_bot">&nbsp;</div>
</div>
<div id="footer">
<?php include'fragments/footer.php'; ?>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
08-11-2010, 04:27 AM
Is there any way you can give us the link to the site? Your code there uses a lot of images and some of the php isn't parsed so we can't see its html.

stogiebear
08-11-2010, 08:50 AM
I can but before I do I must mention that it is an adult site.

I don't want to get in to trouble so will wait for a reply.

Thanks...

SB

stogiebear
08-11-2010, 11:56 AM
LINK REMOVED!

Above is a page which has my problem...

I think it's the '#leftcol' code I need to make a change to but as it's the same as the '#rightcol' and that works OK I don't know what to do.

I don't mind individually changing all the .PHP files to amend the .html code on each one if I just knew what to do!

But I'm still working on it.

If I do find an answer before any of you guys then I'll post it here. :)

SB

_Aerospace_Eng_
08-11-2010, 01:49 PM
I thought you were going to wait for a reply? Remove the link. I'll take a look. Remove the background color from .video_box_head and .video_box_bot

stogiebear
08-11-2010, 02:29 PM
Hi...

I changed the code from this...


.video_box_head {
color: #000;
clear:both;
padding: 0;
margin: 0;
width: auto;
background: #fff url('images/box_head.png') no-repeat;
height:30px;

}

.video_box_bot {
clear:both;
padding: 0;
margin: 0;
width: auto;
background: #fff url('images/box_bot.png') no-repeat;
height:40px;

...to this...



.video_box_head {
color: #000;
clear:both;
padding: 0;
margin: 0;
width: auto;
background: url('images/box_head.png') no-repeat;
height:30px;

}

.video_box_bot {
clear:both;
padding: 0;
margin: 0;
width: auto;
background: url('images/box_bot.png') no-repeat;
height:40px;

It's probable that I didn't do this correctly though.

Thanks for your patience.

SB

stogiebear
08-11-2010, 02:35 PM
IT WORKED! Thanks so much!

I refreshed the page and it showed up!

Boy, that investigation really paid off and I'm very happy.

Thanks for your effort and consideration on this!