simple fixed image position problem

wmguk · October 30, 2008

Hey,

I'm new to CSS really, and normally I would use tables to fix certain images etc, but I want to use the position tag... however I cannot work out what I need.

I want an image to display 150px from the top of the browser, but then it needs to be 5px from the left side of a background image...

I use a 24" screen on a 1920 x 1200 screen res, however obviously it needs to work on all screen res, i can get it to dislay from the left, but then if I view it - its right, however if I view it on 1024 screen res it is totally wrong....

how can i do this?

i currently just have:

.imageleft {
position: absolute;
left: 445px;
top: 435px;
}

BoltZ · October 30, 2008

You shouldn't really use position:absolute unless its really necessary for some reason

well this is what you requested..

.imageleft {
   position: absolute;
   margin-left: 445px;
   margintop: 435px;
}

and here is a way to do it dynamically without position:absolute so no matter how large the image is it will scroll and fit to the screen or however you want to word it

.imageleft {
   margin-left: 5px;
   margin-top: 150px;
}

Hope this helps you

wmguk · October 30, 2008

thank you for that but it doesnt appear to have worked.

I'll try and explain myself better.

I have a background image that is 780px x 396px

And I need an image that is 171px x 171px to be displayed 5px from the bottom and 5px from the left of the background image...

I've done what you said but even reducing the margin-top: to 10px it displays halfway down the page... does it matter where the actual image i want to display is written in the code?

BoltZ · October 30, 2008

Are you talking about a background image for the entire page or just a div? Well where you put your div and your css with it will decide where it is placed. Can you post a link and your entire html and css code? Since there are images involved i would much prefer a link

wmguk · October 30, 2008

its a background image within a table <td>

currently not online, but the whole code is:

@charset "utf-8";
.brownbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
}
.imageleft {
   margin-right: 200px;
   margin-top: 212px;
}
.imageright {
   margin-right: 100px;
   margin-top: 212px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/newlayout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link href="lenslandscapes.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body onload="MM_preloadImages('images/buttons/home_on.gif','images/buttons/inspiration_on.gif','images/buttons/patio_on.gif','images/buttons/fencing_on.gif','images/buttons/garden_maintenance_on.gif','images/buttons/contact_on.gif')">

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#238923">
  <tr>
    <td colspan="3"><img src="images/lenslandscapes_logotop.jpg" width="800" height="175" alt="Lens Landscapes. Landscape and Garden Maintenance, Norfolk UK" /></td>
  </tr>
  <tr>
    <td width="10"> </td>
    <td><table border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="9"><img src="images/buttons/buttonleft.gif" alt="Lens Landscapes" width="9" height="34" /></td>
        <td><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/buttons/home_on.gif',1)"><img src="images/buttons/home_off.gif" alt="Lens Landscape Home Page" name="home" width="87" height="34" border="0" id="home" /></a></td>
        <td><a href="inspiration.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inspiration','','images/buttons/inspiration_on.gif',1)"><img src="images/buttons/inspiration_off.gif" alt="Get inspiration from Lens Landscapes" name="inspiration" width="130" height="34" border="0" id="inspiration" /></a></td>
        <td><a href="paving.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('paving','','images/buttons/patio_on.gif',1)"><img src="images/buttons/patio_off.gif" alt="Lens Landscapes Paving and Patio Page" name="paving" width="150" height="34" border="0" id="paving" /></a></td>
        <td><a href="fencing.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fencing','','images/buttons/fencing_on.gif',1)"><img src="images/buttons/fencing_off.gif" alt="Lens Landscapes Fencing Page" name="fencing" width="104" height="34" border="0" id="fencing" /></a></td>
        <td><a href="garden_maintenance.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('maintenance','','images/buttons/garden_maintenance_on.gif',1)"><img src="images/buttons/garden_maintenance_off.gif" alt="Lens Landscapes Garden Maintenance Page" name="maintenance" width="150" height="34" border="0" id="maintenance" /></a></td>
        <td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/buttons/contact_on.gif',1)"><img src="images/buttons/contact_off.gif" alt="Contact Lens Landscapes" name="contact" width="130" height="34" border="0" id="contact" /></a></td>
        <td width="9"><img src="images/buttons/buttonright.gif" alt="Lens Landscapes" width="9" height="34" /></td>
      </tr>
    </table></td>
    <td width="10"> </td>
  </tr>
  <tr>
    <td height="9" colspan="3"><img src="images/spacer.gif" width="9" height="9" /></td>
  </tr>
  <tr>
    <td width="10"> </td>
    <td>
<table height="371" width="780" border="0" align="center" cellpadding="5" cellspacing="0">
        <tr>
          <td align="center" class="brownbox" valign="top" background="images/page.gif"><!-- InstanceBeginEditable name="main" -->
            <p class="brownbox"><img src="images/headers/home.gif" width="156" height="27" hspace="40" vspace="0" align="left" />
            <img src="images/home_right_leaf.gif" width="173" height="171" class="imageright" />
            <img src="images/home_left_leaf.gif" width="173" height="171" border="0" class="imageleft"/></p>
            <p class="brownbox"> </p>
            <p class="brownbox">Make your garden come alive with Len's Landscapes and Property Maintenance.</p>
            <p class="brownbox">With our professional design and construction service we can transform your garden landscape <br />
            into your own personal paradise.</p>
            <p class="brownbox">Whatever you are looking for be it driveways, paving, patios, fencing, decking, pergolas, <br />
              wooden 
              structures, water features or garden maintenance.</p>
            <p class="brownbox">
            With our fast and friendly service you will grow to love us,<br /> 
              come
              summer or winter</p>
            Call now for more information.
            <!-- InstanceEndEditable --></td>
        </tr>
    </table>
</td>
    <td width="10"> </td>
  </tr>
  <tr>
    <td> </td>
    <td align="center" class="footer">FOOTER</td>
    <td> </td>
  </tr>
</table>

</body>
<!-- InstanceEnd --></html>

wmguk · October 30, 2008

any thoughts?

wmguk · October 30, 2008

ah ha, ok i've got this working and displaying correctly the only issue is that in IE it is at a different height thank FF or safari etc...

BoltZ · October 30, 2008

Sorry I went to bed. Ok can you post a screen shot of this?

Sign In

simple fixed image position problem

Recommended Posts

wmguk

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information