SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page not aligning correctly

    Hello,

    at my page at http://www.meadowlarkco.com/services2.php I did something which made the aligning of the photo and the section to the right of it off...Im thinking maybe I removed a margin setting which shouldn't have been?

    If someone could take a look I'd really appreciate it

    thanks

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    There's an awful lot of code errors in that page, which makes it hard to tell what's happening. There are also a few CSS errors, including in this section
    Code:
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	background-color: 5A7366;
    	color: #FFF;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 100%;
    }
    Running that through the CSS validator gives
    Code:
    Value Error : background-color Unknown dimension 5A7366
    There should be a # at the start of the number i.e. #5A7366. It's just a thought, but if that is somehow being read as a dimension, that could just be your problem.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, my plan is to finish the page then run throug the errors I'll take a look at that on the color don't know how I missed that

    I'm still wondering if it's some kind of margin issue though?

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The gap at the top of the photo is cause by the default top margin of <p class="servicescontent">.

    So either...

    Create a new CSS rule for .servicescontent and give it margin-top:0

    or add margin-top:0 to the existing rule for .splash .splashcondense

    or use a CSS reset, such as Eric Meyer's. Note that his reset is not intended to be applied and forgotten. Take time to understand what it does and tweak for your requirements.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    I think you might be doing things in the wrong order. For instance, if you look at this block of code
    Code:
    <ul id="MenuBar" class="MenuBarHorizontal">
            <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
            <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
            <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>
    
            <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
            <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
            <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a>
            	<ul>
            	<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a>
                <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a>
    
                <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a>
            	</ul>
            </li>
          </ul>
    the closing </li> that should come after "Contact Us" has become displaced and now appears after the closing </ul> of the sub-menu. None of the list items in the sub-menu has a closing </li>. If you sort out all these errors, the layout may fix itself. Worth a try, anyway.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I think you might be doing things in the wrong order. For instance, if you look at this block of code
    Code:
    <ul id="MenuBar" class="MenuBarHorizontal">
            <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
            <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
            <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>
    
            <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
            <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
            <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a>
            	<ul>
            	<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a>
                <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a>
    
                <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a>
            	</ul>
            </li>
          </ul>
    the closing </li> that should come after "Contact Us" has become displaced and now appears after the closing </ul> of the sub-menu. None of the list items in the sub-menu has a closing </li>. If you sort out all these errors, the layout may fix itself. Worth a try, anyway.
    So close out the <li> of contactus before the sub menu items of sales, csr, and dispatch? The close those out as well?


    Thanks

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    It should look like this:
    Code:
    <ul id="MenuBar" class="MenuBarHorizontal">
            <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
            <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
            <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>
    
            <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
            <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
            <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a></li>
            	<ul>
            	<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a></li>
                <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a></li>
    
                <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a></li>
            	</ul>
         
          </ul>
    Every <li> needs a closing </li>, and they must all be inside the <ul></ul> tags.

    Try checking your pages with the W3C Validator to pick up these errors.
    Last edited by TechnoBear; Oct 16, 2011 at 09:10. Reason: Added link to validator.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the pointers. I'll let you know if this resolves the problem, won't be able to post until Tuesday

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so if I close my <li> for contact us how does my <ul> for the submenu items for Sales, CSR, and Dispatch know to go underneath the <li> that is why I thought I wouldn't appear beneath it without the submenu li's within the content li

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Techno and Victorinox,

    I've made the suggested changes and it didn't affect anything. Any other suggestions which I could try?

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok if I give my .splash .splashcondense a -16 px top margin it lines up correctly....but is that schematically correct? From doing this does anyone have other suggestions for what could be the issue?

    thanks

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the image is 400 x 400, so now when I view the page in dreamweaver on my pc with the -16 px top margin there is a gap at the bottom but when I view in a browser on IE or Safari it looks correct ?

  13. #13
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    Techno and Victorinox,
    I've made the suggested changes and it didn't affect anything. Any other suggestions which I could try?
    You seem to have successfully aligned the photo by applying margin-top:-16px to .splash .splashcondense

    I suggest you change the value to -1em as this will retain the alignment if text size is adjusted by the user.

    Remember that the negative margin is compensating for the margin on the .servicescontent paragraph - so if the font-size of the paragraph (currently set to the default 1em) is changed, then the negative margin of .splash .splashcondense will also need to be adjusted. This is why it may be easier to use margin-top:0 on .servicescontent.

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    I wouldn't worry too much about how it looks in Dreamweaver. Your site visitors will all be using browsers, so concentrate on how it looks in a browser.

    I'm using Firefox, and while your image is now aligned, you still have a couple of other layout issues I can see. The "Contact Us" item on your menu wraps onto a second line and sits over your photo, and the final list items in the right-hand panel spill out from the coloured background images. See attached screen-shot. Attachment 57807
    The same problems occur in Chromium; I haven't tested in anything else.

    You would be better to set a background colour, rather than rely on images for the background of your lists. If a user has their font size set even slightly larger than yours, the white text will drop onto the pale background and become illegible. If you set a background colour, it will expand as the text block expands.

    Those lists also have a coding problem. Where you have this:
    Code:
    <ul>Flatbed
        	<li>B-Train</li>
            <li>Power Only</li>
            <li>Maxi's</li>
        </ul>
    you should replace it with something like
    Code:
    <h2>Flatbed</h2>
    <ul>
        	<li>B-Train</li>
            <li>Power Only</li>
            <li>Maxi's</li>
        </ul>
    The reason for this is that a <ul></ul> cannot contain text directly, only a group of one or more <li></li>. It might seem like nit-picking, but if your markup doesn't match what the browser is expecting, it will have to "guess" how to interpret and display it - which might not be what you're expecting. If you can eliminate these errors, then that's one less thing to cause problems.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I changed my margin-top for splash condense back to -16 px and removed the margin-top for splashcondense services content and now my submenu under Contact Us is gone?

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what I have for for menu which is read in to my page by the below:

    <?php include("menu"); ?>


    <ul id="MenuBar" class="MenuBarHorizontal">
    <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
    <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
    <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>

    <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
    <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
    <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a></li>
    <ul>
    <li><a href="http://www.meadowlarkco.com/sales.php">Sales</a></li>
    <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a></li>

    <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a></li>
    </ul>

    </ul>



    but the submenu under Contact Us doesn't show up?

  17. #17
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    To avoid confusion, I'm going to leave this with Technobear. Will keep an eye on the thread.

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I got it back looking like its supposed to and know that there are some changes which need to be made, could someone let me know what direct changes need to be made to make everything schematically correct so that it will appear as it does now. I've looked at it on multiple machines which IE, Chrome, Firefox, and Safari and everything appears ok.

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please bear with me on this it's the first site I've designed

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Victorinox View Post
    To avoid confusion, I'm going to leave this with Technobear.
    Oh jings, as we say in these parts.
    Quote Originally Posted by Victorinox View Post
    Will keep an eye on the thread.
    That's just as well, thank you.

    rrmcguire - I apologise for messing up your Contact sub-menu. I was tired and not paying as much attention as I should have. I browse the internet with javascript disabled, so I didn't realise you had a drop-down menu. (I should, of course, have spotted that from the mark-up. ) I'm going to leave well-enough alone there. I've never used a javascript drop-down and don't want to mess it up again. It's not a good idea to use javascript for something basic to your site, like the navigation, simply because it makes it inaccessible to people like me, who have javascript disabled, and some blind users with screen readers. I believe it's possible to achieve the same thing with CSS, but I've never had cause to use that approach, so you'd need somebody more knowledgeable than I am to help you.

    However, you could make one very simple change to the menu layout to prevent the "Contact" tab dropping onto another line, by removing the width setting.
    Code:
    .menu {
    	background-repeat: no-repeat;
    	height: 60px;
    	width: 660px; <- remove this line
    	padding-top: 0px;
    	float: right;
    You can also remove background-repeat: no-repeat; from that code block, as it is only needed if you are using a background image.

    As I said before, there is quite a lot of invalid code in your site, which can cause problems, but if you're happy with the way it's displaying, you might just want to leave it at that. If you want to try to sort that out, or make other changes, such as replacing the green background images with background colours, I'd be happy to help you, but I don't want to interfere (again). Those background images are quite large and will add to the page load time, especially on a slow connection. If you prefer to keep the images, then I would recommend converting them from .png to .gif format, which will give you a much smaller file size.

    Let us know if you want any more help.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rrmcguire View Post
    this is what I have for for menu which is read in to my page by the below:

    <?php include("menu"); ?>


    <ul id="MenuBar" class="MenuBarHorizontal">
    <li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
    <li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
    <li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>

    <li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
    <li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
    <li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a></li>
    <ul>
    <li><a href="http://www.meadowlarkco.com/sales.php">Sales</a></li>
    <li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a></li>

    <li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a></li>
    </ul>

    </ul>



    but the submenu under Contact Us doesn't show up?
    I see you have fixed it in your live site now but just to clarify for everyone else the nested ul must be contained within the li tags and not outside as shown above.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <ul id="MenuBar" class="MenuBarHorizontal">
    		<li><a href="http://www.meadowlarkco.com/company.php">Company</a></li>
    		<li><a href="http://www.meadowlarkco.com/services2.php">Services</a></li>
    		<li><a href="http://www.meadowlarkco.com/customersnew2.php">Customers</a></li>
    		<li><a href="http://www.meadowlarkco.com/carriersnew.php">Carriers</a></li>
    		<li><a href="http://www.meadowlarkco.com/locations.php">Locations</a></li>
    		<li><a href="http://www.meadowlarkco.com/contactus.php">Contact Us</a>
    				<ul>
    						<li><a href="http://www.meadowlarkco.com/sales.php">Sales</a></li>
    						<li><a href="http://www.meadowlarkco.com/CSR.php">CSR</a></li>
    						<li><a href="http://www.meadowlarkco.com/dispatch.php">Dispatch</a></li>
    				</ul>
    		</li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

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