Jump to content

simple fixed image position problem

wmguk

By wmguk
in CSS Help

 Share

Recommended Posts

wmguk Advanced Member

wmguk

Posted
Posted

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;
}

Link to comment
Share on other sites
BoltZ Member

BoltZ

Posted
Posted

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

Link to comment
Share on other sites
wmguk Advanced Member

wmguk

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
BoltZ Member

BoltZ

Posted
Posted

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

 

 

Link to comment
Share on other sites
wmguk Advanced Member

wmguk

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.