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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    placing image using CSS

    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.


    Code:
    <style type="text/css"><!--
    .containercolour1 { position:relative; background:#799BD9; margin:0 5px;}
    .rtopcolour1, .rbottomcolour1{ display:block; background:#507BCD; }
    .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
    
    .containercolour2 { position:relative; background:#325EAF; margin:0 5px; }
    .rtopcolour2, .rbottomcolour2{ display:block; background:#507BCD; }
    .rtopcolour2 *, .rbottomcolour2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; }
    
    .containercolour3 { position:relative; background:#00CC99; margin:0 5px; }
    .rtopcolour3, .rbottomcolour3{ display:block; background:#507BCD; }
    .rtopcolour3 *, .rbottomcolour3 *{ display: block; height: 1px; overflow: hidden; background:#00CC99; }
    
    .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; }
    .floatright { float: right; margin: 0px 0px 0px 2px; }
    -->
    </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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		(<? 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>&nbsp;<font size="2" color="#FFFFFF" face="Tahoma"><? echo ( date('d-m-Y', strtotime($submitgmtdatetime)) ); ?></font><?
    					if ($submittedby != "") {?>&nbsp;<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>&nbsp;<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>
    			<? }
    ?>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Before thinking about “placing an image with CSS” you should have semantics in mind, i.e. you should think about what meaning it will have.

    1. Is the image crucial for understanding the content/information on the page (i.e. product image, photo gallery image) then use HTML (<img … >)
    2. 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 and clean, valid, and semantic code is one foundation of a good website tht’s working in all browsers.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


    Code:
    <!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              (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>&nbsp;<font size="2" color="#FFFFFF" face="Tahoma">16-01-2008</font>&nbsp;<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>
    Code:
    .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; }


  •  

    Posting Permissions

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