Web Analytics Made Easy -
StatCounter trouble placing images - CodingForum

Announcement

Collapse
No announcement yet.

trouble placing images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • trouble placing images

    Hi, I'm trying to place 2 images at the top of my html-page. though I don't know how too, i've tried for several hours without any succes. When I add an image within the 'menutop' div, the rest of the page goes down .. though it are transparant images. Somebody willing to help ?

    Ps: I've enclosed an image to show what I'm after, the pink shapes are the images that need to be placed.

    CSS:
    <style type="text/css">
    html, body{
    text-align:center;
    background: #fff url('bg3.jpg') repeat-x fixed;
    margin:0;
    padding:0;
    height:100%
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }


    #pagewidth{
    width:800px;
    margin-top: 80px;
    }

    #maincol{
    background: #fff;
    font-family: Arial,"Times New Roman",Verdana;
    font-size: 12px;
    float: right;
    width: 638px;
    height: 700px;
    border-right: 1px dotted #ccc;
    text-align: left;
    margin-top: 0px;
    }

    #menutop{
    background: yellow;
    height: 80;
    width: 200px;
    }

    #navigate{
    background: #E0EDCF;
    font-family: "Times New Roman", arial, verdana;
    font-size: 16px;
    height: 700px;
    border-right: 1px dotted #ccc;
    text-align: left;
    width: 148px;
    }


    HTML:
    -------------------------------------------------------------
    <div id="menutop"></div>

    <div id="pagewidth">
    <div id="maincol">
    blablabbla some stuff here
    </div><!--end maincol-->

    <div id="navigate">
    some navigation stuff goes here
    </div><!--end navigate-->

    </div><!--end pagewidth-->
    Attached Files
    Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

  • #2
    Hi!
    I've simplified the code to resemble your attached screenshot. You would, of course, have to adjust the sizes, etc. to what you require and add the doctype, etc. and also put the css into a separate stylesheet. Hope it helps:
    Code:
    <html>
    
    <head>
      <title></title>
    <style>
    
    body, html{margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #aaffaa; background-image: url("bg3.jpg"); width: 100%; height: 100%; backtround-repeat: repeat-x;}
    
    div#image1 {position: absolute; margin-left: 175px; margin-top: -60px; width: 100px; height: 100px; background: #ee95be; z-index: 2;}
      
    div#image2 {position: absolute; margin-left: 355px; margin-top: -60px; width: 540px; height: 50px; background: #ee95be; z-index: 2;}
    
    div#container {background: #ffffff; margin-top: 120px; width: 100%; height: 700px; z-index: 0;}
    
    div#navigation {float: left; margin-left: 140px; margin-top: 0px; width: 150px; height: 650px; border-right: 1px dotted; background: #f2cab5; padding-left:10px; padding-top:50px; padding-right: 10px; z-index: 1;}
    
    div#main {clear float: left; margin-left: 310px; margin-top: 100px; height: 680px; background: skyblue; width: 600px; padding: 10px; z-index: 1;}
    
    
    
    </style>
    
    <body>
    
    <div id="image1"><img src= "image1.jpg" width="100px"; height= "100px" alt= "firstimage"></div>
    <div id="image2"><img src="image2.jpg" width="540px" height="50px" alt="secondimage"></div>
    <div id="container">
    <div id="navigation">here is where navigation comes</div>
    
    <div id="main">here is where the main pane comes</div>
    </div>
    </body>
    
    </html>

    Comment


    • #3
      Wow, thank you so much for that code Avril.. I modified it a little bit and the problems are solved..

      I've got one small question about it though... I can't seem to get the main pane right next to the navigation.. there is some space (2 pixels width)between the right border of the navigation and the main pane. How to solve this ?

      The modified code :

      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      
      <head>
        <title></title>
      <style>
      
      html, body{
       text-align: center; 
       background: #fff url('bg3.jpg') repeat-x fixed; 
       margin:0; 
       padding:0;
       height:100%;
       font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      
      #pagewidth{
       width:800px;
       margin-top: 80px;
      }
      
      div#image1 {position: absolute; margin-left: 50px; margin-top: -60px; width: 100px; height: 100px; background: #ee95be; z-index: 2;}
        
      div#image2 {position: absolute; margin-left: 225px; margin-top: -60px; width: 540px; height: 50px; background: #ee95be; z-index: 2;}
      
      div#container {background: #333; margin-top: 120px; width: 100%; height: 700px; z-index: 0;}
      
      div#navigation {float: left; margin-left: 0px; margin-top: 0px; width: 200px; height: 700px; border-right: 1px dotted #fff; background: #f2cab5; z-index: 1;}
      
      div#main {clear float: right; margin-left: 200px; margin-top: 0px; height: 700px; background: skyblue; width: 597px; z-index: 1;}
      
      
      
      </style>
      
      <body>
      
      <div id="pagewidth">
      <div id="image1"><img src= "image1.jpg" width="100px"; height= "100px" alt= "firstimage"></div>
      <div id="image2"><img src="image2.jpg" width="540px" height="50px" alt="secondimage"></div>
      <div id="container">
      <div id="navigation">here is where navigation comes</div>
      <div id="main">here is where the main pane comes</div>
      </div>
      
      </div>
      </body>
      
      </html>
      Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

      Comment


      • #4
        You would have to adjust the margin-left by a pixel or two of the div#main since it is a fixed width and border widths (padding, etc.) have also to be taken into consideration..
        Good luck!

        Comment


        • #5
          hmmm I've tried changing every value, though I can't seem to get rid of that 2px 'column'.. I would like to see those 2 pixels 'column' included into the main pane..but don't know how to
          Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

          Comment


          • #6
            It is caused by the dotted border of your nav pane since it is the same colour as the background it looks like a gap.

            Comment


            • #7
              hmmm, nope I'm affraid thats not it..

              the dotted border has got #fff as color
              while the background has #333 as color

              If I change colors, the gap still remains.. while navigation and main pane should be directly next to each other
              Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

              Comment


              • #8
                I really don't know - it looks fine on my Mac and on FireFox. What are you using?

                Comment


                • #9
                  I'm using IE 6.0
                  Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

                  Comment


                  • #10
                    Oh-oh! The little bug-er, huh? You would need a different stylesheet for IE and link to it with a conditional statement. Adapt this coding:
                    Code:
                    <html>
                    
                    <head>
                      <title></title>
                    <style>
                    
                    body, html{margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #aaffaa; background-image: url("bg3.jpg"); width: 100%; height: 100%; backtround-repeat: repeat-x;}
                    
                    div#image1 {position: absolute; margin-left: 105px; margin-top: 60px; width: 100px; height: 100px; background: #ee95be; z-index: 2;}
                      
                    div#image2 {clear:all; position: absolute; margin-left: 350px; margin-top: 45px; width: 400px; height: 50px; background: #ee95be; z-index: 2; }
                    
                    
                    div#navigation {clear:all; float: left; margin-left: 40px; margin-top: 100px; width: 150px; height: 600px; border-right: 1px dotted #ffffff; background: #f2cab5; padding-left:10px; padding-top:80px; padding-right: 10px; z-index: 1;}
                    
                    div#main {clear: right; float: left; margin-left: 0px; margin-top: 100px; height: 660px; background: skyblue; width: 600px; padding: 10px; z-index: 1;}
                    
                    
                    
                    </style>
                    
                    <body>
                    
                    <div id="image1"><img src= "image1.jpg" width="100px"; height="100px" alt= "firstimage"></div>
                    <div id="image2"><img src="image2.jpg" width="400px" height="50px" alt="secondimage"></div>
                    <div id="container">
                    <div id="navigation">here is where navigation comes</div>
                    
                    <div id="main">here is where the main pane comes</div>
                    </div>
                    </body>
                    
                    </html>
                    Good luck!

                    Comment


                    • #11
                      Excellent, thanks you very much Avril
                      Msnemo.com - Free winks, emoticons, avatars, moods and lots more for msn and windows live messenger.

                      Comment

                      Working...
                      X