471,627 Members | 1,912 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,627 software developers and data experts.

Absolute positioning an image (button)

Ok guys, I'm still new at all this but I recently did a site and was able to amke the contact button stay in place. I copied the code and used it in a new site and now it moves around when I resize the browser window. I'm not sure what I've done wrong but I'll post the CSS if you wouldn't mind taking a look at it please.

You'll see in the .floatlink the image I am trying to use. I'd post this on the web for you guys but the server and host are not up yet.

/* CSS Document */



/* -------------- Basics --------------------------- */
Expand|Select|Wrap|Line Numbers
  1. body {
  2. margin: 15px 0 15px 0;
  3. padding: 0;
  4. min-width: 800px;
  5. color: black;
  6. font:11px "Lucida Grande", Arial, sans-serif;
  7. background-color: #B3D2D7;
  8. margin: 10px 0 50px 0;
  9.  
  10. }
  11.  
  12.  
  13. #wrapper {
  14.     text-align: left;
  15.     width: 800px;
  16.     margin-left: auto;
  17.     margin-right: auto;
  18.     background-color: white;
  19.     padding: 10px;
  20.     border: 5px solid grey;
  21. }
  22.  
  23.  
  24. .floatlink {
  25. width:326px;
  26. position: absolute;
  27. top: 0px;
  28. right: 10px;
  29. display: inline;
  30. overflow:hidden;
  31. padding-top: 10px;
  32. }
  33.  
  34. .floatlink a {
  35. padding: 0px;
  36. height: 25px;
  37. width: 100px;
  38. display:block;
  39. background-image: url(images/contact_button.jpg);
  40. background-repeat:no-repeat;
  41. }
  42.  
  43. #header {
  44.     width: 775px;
  45.     height: 200px;
  46.     padding: 0;
  47.     background: url(ib_header.gif) center;
  48.     background-repeat: no-repeat;
  49.     border: 3px;
  50.     background-color: #CCCCCC;
  51. }
  52.  
  53. #header h1 {
  54.     color: #B3D2D7;
  55.     margin: 0 ;
  56.     padding: 0 ;    
  57.     text-indent: -9000px;
  58. }
  59.  
  60. #content {
  61.     background-color: white;
  62.     padding: 20px;
  63. }
  64.  
  65. #content h1 {
  66.     font-size: 105%;
  67.     color: black;
  68.     text-align: center;
  69.     padding: 5px;
  70.     background: url(images/bar.jpg);
  71.  
  72. }    
  73.  
  74. #content h2 {
  75.     font-size: 95%;
  76.     color: black;
  77.     text-align: center;
  78.     padding: 10px 5px 10px 5px;
  79.     margin: 40px 5px 20px 5px;
  80.     background: url(images/bar.jpg);
  81.     }
  82.  
  83. #content h3 {
  84.     font-size: 90%;
  85.  
  86. .special {
  87.     font-size: 105%;
  88.     color: black;
  89.     }
  90.  
  91. img {
  92.     padding: 0 10px 10px 0;
  93.     border:0;
  94.     }
Nov 9 '07 #1
2 5127
oops, I just noticed I posted the code with an absolute z-index positioning on it, which stuck the image in place and not on the page right anyway. Sorry bout that, but I just fixed it...
Nov 9 '07 #2
well, I figured it out.... thank to those who looked at this though.
Nov 9 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Ken Kast | last post: by
6 posts views Thread by Gustaf Liljegren | last post: by
4 posts views Thread by xtort | last post: by
6 posts views Thread by Mark | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.