Web Analytics Made Easy -
StatCounter Massive alignment problems - CodingForum

Announcement

Collapse
No announcement yet.

Massive alignment problems

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

  • Massive alignment problems

    REF:http://chieftainclothing.com/mockup/

    1. I can't seem to get the wrapper to cover the entire content area. I don't want to hard code a page height. I added the border for editing.
    2. I can't get the footer below the content.
    3. I can't resolve the single error that the validator finds, when I try to correct it I introduce 26 more errors?

    I used to know how to do much of this stuff, but suddenly nothing seems to work.

    Suggestions?

  • #2
    What about this?


    CSS
    Code:
    body {
        background: url("bg.gif") repeat scroll 0 0 transparent;
        height: 100%;
    }
    
    #golfer {
    	float: left;
    	margin-left: 25px;
    }
    #logo {
    	float: right;
    }
    #aside {
    	margin-top: 50px;
    	margin-left: 200px;
    }
    #wrapper {
    	width: 960px;
    	margin: 0 auto;
    	background-color: white;
    	border: 12px solid #600;
    	overflow:auto;
    }

    html
    Code:
    <body>
        <div id="outside">
          <div id="wrapper">
            <div id="golfer"><img src="golfer.png" width="123" height="273" /></div>
            <div id="logo"><img src="header.jpg" width="622" height="82" /></div>
            <div id="aside">
              <div id="nav">
                <ul>
                  <li><a href="index.html" target="_blank" title="Chieftain Clothimg Home" ></a>Home</li>
                  <li><a href="inspiration.html" title="Chieftain Clothing Inspiration page" target="_blank"></a>Inspiration</li>
                  <li><a href="shop.html" title="Chieftain Clothing Shop page" target="_blank"></a>Shop</li>
                  <li><a href="contact.html" title="Chieftain Clothimg contact page" target="_blank"></a>Contact</li>
                  <li><a href="team.html" title="Chieftain Clothimg Team page" target="_blank"></a>Out Team</li>
                  <li><a href="http://chieftainclothing.com/blog" title="Chieftain Clothimg Blog page" target="_blank"></a>Blog</li>
                </ul>
              </div>
            </div>
          </div>
          <!--close wrapper--> 
        </div>
        <!--close outside-->
    
        <div id="footer">&copy; chieftain clothing LLC | all rights reserved</div>
    </body>

    and btw, you can take that <ul> and specify the lists to use the arrow.png instead of the bullets. Then you dont have to add those images in your code.

    #aside #nav ul li {
    list-style-image: url(arrow.png);
    }
    Last edited by teedoff; Aug 25, 2011, 03:07 PM.
    Teed

    Comment


    • #3
      give overflow:auto to container and try

      Comment


      • #4
        Originally posted by vikram1vicky View Post
        give overflow:auto to container and try
        lol to late! I already did that in my sample code for him...lol

        His code was almost correct, but still trying to use positioning along with floats.
        Teed

        Comment


        • #5
          Its ok dear.. main purpose to solves someone's probs.. u solved or me or our other buddies... its same

          Comment

          Working...
          X