...

View Full Version : Frustrating background problem!



stogiebear
08-10-2010, 03: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, 04: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, 04: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, 05:49 PM
HTML and CSS go hand in hand. We need to see your html too.

stogiebear
08-10-2010, 06: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, 05: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, 09: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, 12:56 PM
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, 02: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, 03: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, 03: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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum