placing image using CSS

jasonc310771

01-16-2008, 08:30 AM

i have tried to do this myself but have no idea what else i can do to get this to work right.

i am trying to place an image (100 x 100) above the word 'clicks' so it does not over lap the word but it does not seem to work it always over laps, i have supplied the code without an image as i thought putting the code here with it may complicate things.

can someone please advise where i need to place code to get an image in this place.

thanks in advance for your help.

<style type="text/css">
</style>
<?
if ($_GET['m'] != "") {
$whatmonth = $_GET['m'];
$whatyear = $_GET['y'];
} else {
$whatmonth = gmdate('m');
$whatyear = gmdate('Y');
}

$datetocheck = gmdate("Y-m-d H:i:s");

$links = @mysql_query("SELECT * FROM `sites` WHERE `confirmed` = '1' AND `linklocation` = 'main' AND `submitgmtdatetime` LIKE '%$whatyear-$whatmonth%' AND `submitgmtdatetime` < '$datetocheck' ORDER BY `submitgmtdatetime` DESC" ) or die(mysql_error());
if (@mysql_num_rows($links) == 0) {
?><p><b>There are no links.</b></p><?
} else { ?>

<table width="100%">
<?
for ($i = 0; $i < @mysql_num_rows($links); $i++) {
$id = @mysql_result($links, $i, "id");
$submitgmtdatetime = @mysql_result($links, $i, "submitgmtdatetime");
$url = @mysql_result($links, $i, "url");
$desc = @mysql_result($links, $i, "desc");
$clicks = @mysql_result($links, $i, "clicks");
$submittedby = @mysql_result($links, $i, "submittedby");
?>
<tr><td>
<?
if( $url != "" ) {
?>
<div class="containercolour1">
<b class="rtopcolour1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b></font><font size="2" color="#000000" face="Tahoma"> <div class="right">
<a href="?i=1" target="_top"><font color="#FFFFFF" size="2" face="Tahoma">comments</font></a>
<font size="2">(</font>1<font size="2">)</font>       
(<? echo($clicks); ?> click<? if($clicks>1) { echo("s"); } ?>)</div></font>
<a class="one" href="?v=<? echo($id.$sessioncode);?>" target="_blank"><h1><?=stripslashes($desc);?></h1></a> <font size="2" color="#FFFFFF" face="Tahoma"><? echo ( date('d-m-Y', strtotime($submitgmtdatetime)) ); ?></font><?
if ($submittedby != "") {?> <font size="2" color="#FFFFFF" face="Tahoma"> By <? echo($submittedby);
$countmemberlisting = @mysql_query("SELECT * FROM `sites` WHERE `confirmed` = '1' AND `submittedby` = '$submittedby'" ) or die(mysql_error());
$totalmemberlistings = @mysql_num_rows($countmemberlisting);
?></font><?
} ?>
<b class="rbottomcolour1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b align="right"></b></b></div>
<? } else { ?>
<div class="containercolour3"><b class="rtopcolour3"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1><?=stripslashes($desc);?></h1> <font size="2" color="#FFFFFF" face="Tahoma"><? echo ( date('d-m-Y', strtotime($submitgmtdatetime)) ); ?></font>
<b class="rbottomcolour3"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
<? } ?>
</td></tr>
<? } ?>
</table>
<? }
?>

VIPStephan

01-16-2008, 11:47 AM

Before thinking about “placing an image with CSS” you should have semantics (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) in mind, i.e. you should think about what meaning it will have.

Is the image crucial for understanding the content/information on the page (i.e. product image, photo gallery image) then use HTML (<img … >)
If the image’s only purpose is to make the site look pretty but the page could also live without the image then apply it as background image with CSS.

However, in order to really help you you need to help us by providing code that we can look at easily without needing to strip out irrelevant stuff. That means please provide the output source code. We’re in the HTML/CSS forum here and don’t need all that server-side code as it’s only distracting from the actual problem. So, the output source code and/or a lin to the page in question helps tremendously.

What I can tell you already is that your code has many errors (http://validator.w3.org) and clean, valid, and semantic code is one foundation of a good website tht’s working in all browsers.

jasonc310771

01-16-2008, 10:06 PM

i have redone the whole page and tried to tidy up the code a bit, this is the html code, but for some reason the css has to be in a separate file i tried to add it but the page did not show correctly. so i have included both files here..
what i am trying to get is the image to be above all the text (not overlapping) and in the same place, top right of this box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="csscode.css">
</head>
<body bgcolor="#000000">
<table width="100%">
<tr>
<td> <div class="containercolour2"> <b class="rtopcolour2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><font size="2" color="#000000" face="Tahoma">
<div class="right"> <a href="?i=1" target="_top"><font color="#FFFFFF" size="2" face="Tahoma">comments</font></a>
<font size="2">(</font> 1 <font size="2">)</font>       
(27 clicks)</div>
</font> <a class="two" href="?i=1" target="_blank">
<h1>play the drums</h1><img src="images/noimage.gif" width="100" class="floatRight">
</a> <font size="2" color="#FFFFFF" face="Tahoma">16-01-2008</font> <font size="2" color="#FFFFFF" face="Tahoma">
By blahblah(10)</font> <b class="rbottomcolour2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b align="right"></b></b></div></td>
</tr>
</table>
</body>
</html>

.containercolour1 {
position:relative;
background:#799BD9;
margin:0 5px;
top: 2432px;
left: 67px;

}
.rtopcolour1, .rbottomcolour1{ display:block; background:#507BCD; }
.rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }

.containercolour2 {
position:relative;
background:#325EAF;
margin:0 5px;
left: 110px;
top: 187px;

}
.rtopcolour2, .rbottomcolour2{ display:block; background:#507BCD; }
.rtopcolour2 *, .rbottomcolour2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; }

.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 1px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #999999; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
a.two:link { color: #000; }
a.two:visited { color: #000; }
a.two:hover { color: #fff; }
a.two:active { color: #000; }
a.two { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
img.floatLeft { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 3px; }
img.floatRight { float: right; margin: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; }
.right {
position:absolute;
bottom:4;
right:6;
left: 5px;
top: 80px;

}
.floatright { float: right; margin: 0px 0px 0px 2px; }