1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

div's not positioning right, any help with fixing would be great

Discussion in 'CSS' started by joesgraphics, Jul 29, 2008.

  1. #1
    Hi,

    If you visit Here you will see in most browsers that the left and right divs don't inline with the centre div, could anybody point me into the right direction in fixing this.
    SEMrush

    Thanks Joe
     
    joesgraphics, Jul 29, 2008 IP
    SEMrush
  2. astersmitem

    astersmitem Peon

    Messages:
    35
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hello, Try this:

    add these styles to your stylesheet:

    
    	.inline-wrapper {
    	display: inline;
    	float: left;
    	} /* Sets display to inline, and makes everything float to the left */
    
    	.dockend {
    	position: relative;
    	top: 40px;
    	} /* Fixes positioning problem on these end pieces by relatively repositioning them. */
    
    
    Code (markup):
    Now, add div wrappers around the background-image divs with the class "inline-wrapper", and on your end pieces also use the class "dockend". Remove display declarations from your divs containing background images.

    
     <div id="dockWrapper" style="height: 79px;">
     <div style="text-align: center;">
     
    <div class="inline-wrapper dockend">
      <div style="background : url('dock-left.png') no-repeat 0 0px; width: 45px; height: 47px; border-bottom : 2px solid rgb(220,220,200); margin-right: 0px;">&nbsp;</div>
    </div><!-- /.inline-wrapper -->
    <div class="inline-wrapper middle">
      <div id="dock" style="background : url('dock-center.png') repeat-x 0 40px; width: 660px; height: 77px; border-bottom : 2px solid rgb(220,220,200); margin-right: -4px; padding-bottom: 10px;">
      <ul>
    			 <li><p style="padding: 0px; margin: 0px;" class="app-status">Running</p><img src="images/app-store.png" class="app" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="calendar-status">Running</p><img src="images/google_calendar.png" class="calendar" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="docs-status">Running</p><img src="images/google_docs.png" class="docs" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="mail-status">Running</p><img src="images/google_mail.png" class="mail" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="youtube-status">Running</p><img src="images/google_youtube.png" class="youtube" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="browser-status">&nbsp;</p><img src="images/mozicon128.png" class="browser" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="music-status">Running</p><img src="images/music.png" class="music" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="pics-status">Running</p><img src="images/pics.png" class="pics" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="video-status">Running</p><img src="images/video.png" class="video" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
    			 
    			 <li><p style="padding: 0px; margin: 0px;" class="messenger-status">Running</p><img src="images/pidgin.png" class="messenger" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>	
    		</ul>
      </div>
    </div><!-- /.inline-wrapper -->
    <div class="inline-wrapper dockend">
      <div style="background : url('dock-right.png') no-repeat left 0px; width: 45px; height: 47px; border-bottom : 2px solid rgb(220,220,200); margin-right: -4px;">&nbsp;</div>
    </div><!-- /.inline-wrapper -->
     </div>
     </div>
    
    Code (markup):

    Adjust your outside wrapper for positioning the whole thing on your page (like centering).

    Also as a suggestion, you should use classes and ids and declare styles in the stylesheet instead of declaring them on the markup tags themselves using style="". It makes it easier to find and edit these things, and makes tools like editcss much more effective. Another reason is; while the older standards will take style="" just fine, using styles in the markup like that will not validate in XHTML.
     
    astersmitem, Jul 30, 2008 IP
    joesgraphics likes this.
  3. joesgraphics

    joesgraphics Peon

    Messages:
    206
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Thankyou worked perfect for what we needed, Yeah i don't normaly use the style="" that was just for testing i've now converted to use classes and ids.

    Rep Added!


    Joe
     
    joesgraphics, Jul 31, 2008 IP
  4. astersmitem

    astersmitem Peon

    Messages:
    35
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sweet, Thanks for the rep!
    I'm glad I was able to help you out :)
     
    astersmitem, Jul 31, 2008 IP