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 6 of 6

Thread: Images position

  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Images position

    Hello

    I use CSS code to position images in a Web page, but have now decided to use an external CSS style sheet so that I can reproduce them on each of my five pages.

    The images appear fine on my main page, though they look slightly right of centre instead of being centered.

    Can I confirm that the CSS code I have is fine and that I simply need to reference the external CSS style sheet in all of my five Web pages, and use the following in the external style sheet to reproduce the images on each page?

    Code:
    <body>
    
    
     <div style="position: absolute; left: 500px; top: 600px;">
     <img src="twitter.jpg" alt="Twitter" height="44" width="39" border="0" />
     </div>
    
    
     <div style="position: absolute; left: 560px; top: 600px;">
     <img src="digg-button.jpg" alt="Digg" height="44" width="44" border="0" />
     </div>
    
    
     <div style="position: absolute; left: 620px; top: 600px;">
     <img src="delicious1.jpg" alt="Delicious" height="44" width="44" border="0" />
     </div>
    
    <div style="position: absolute; left: 680px; top: 600px;">
     <img src="face1.jpg" alt="Facebook" height="44" width="44" border="0" />
     </div>
    
    <div style="position: absolute; left: 740px; top: 600px;">
     <img src="email-icon.jpg" alt="Email us!" height="44" width="43" border="0" />
     </div>
    
    
    </body>
    Thanks for any advice.

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Don't use absolute positioning. Add a class to all your inner divs and use float: left; margin: 0 0 0 60px;

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Sean3838

    Many thanks for your reply and suggestions. Do you mean something like this in an external Style Sheet?

    Code:
    div.img
    {
      margin: 2px;
      border: 0px;
      height: auto;
      width: auto;
      float: left;
     }
    	
    div.img img
    {
      display: inline;
      margin: 3px;
      border: 0px;
    }
    
    div.img a:hover img {border: 0px;}
    
    <div class="img">
     <a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></div>
    
    <div class="img">
     <a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></div>
    
    <div class="img">
     <a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></div>
    
    <div class="img">
     <a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></div>
    
    <div class="img">
     <a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></div>
    Thanks again.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Be a lot easier if I could see your site or a sample page you made. But here is what I mean:

    Code:
    <html>
    <head>
    </head>
    <title></title>
    <body>
     
     <div id="wrapper">
    	<div class="img">
    	<a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" width="39" height="44" /></a></div>
    
    	<div class="img">
    	<a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" width="44" height="44" /></a></div>
    
    	<div class="img">
    	<a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" width="44" height="44" /></a></div>
    
    	<div class="img">
    	<a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" width="44" height="44" /></a></div>
    
    	<div class="img">
    	<a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" width="43" height="44" /></a></div>
    </div>
    
    </body>
    </html>

    Then in your external style sheet:

    Code:
    	
    #wrapper{margin: 0 auto;}
    .img {float: left;margin: 0 0 0 60px;}

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Sean

    Thanks again.

    The 'test' page using the script you, thankfully, posted is here:

    http://proofreading4students.com/socialNet.html

    I have tried to remove the border around the images using

    border-style:0px; and as that didn't work I tried border-style:none; in my external style sheet, but that didn't work either.

    I can see that your .img {float: left;margin: 0 0 0 20px; refers to the spacing between the images and it looks a lot neater than it did, thanks, but the images need to be centered near the bottom of the page.

    Steve

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    You do not remove borders by changing the border-style, but by changing the border-width.

    border-width:0px; or the shorthand version border:0px; should the trick.


  •  

    Posting Permissions

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