www.webdeveloper.com
Results 1 to 4 of 4

Thread: css woes

  1. #1
    Join Date
    Sep 2012
    Posts
    2

    css woes

    I am having issues with writing some script, and hope someone has the answer. My script is constantly floating left and wont center and if I remove the float my script gets all jumbled up on top of itself and looks tacky. This is what I got.

    Code:
    <span class="center-footer">
    <ul id="footer-links-primary">
    <li>
    <a href="/kuno/about">About</a>
    </li>
    <li>
    <a href="/kuno/copyright_center">Copyright</a>
    </li>
    <li>
    <a href="/kuno/advertising_overview">Advertising</a>
    </li>
    </ul>
    <ul id="footer-links-secondary">
    <li>
    <a href="/kuno/terms">Terms</a>
    </li>
    <li>
    <a href="/kuno/privacy">Privacy</a>
    </li>
    <li>
    <a href="/kuno/Report">Report a bug</a>
    </li>
    </ul>
    <?php } ?>
    </span>
    <br style="clear:both;"/>
    and for the css part...

    Code:
    #footer .center-footer{
    	    padding: 12px 30;
    		display: block;
    		float: left;
    		margin-bottom: 5px;		
    	}
    
    	#footer .footer-links {
        color: #666666;
        font-size: 13px;
        overflow: hidden;
        text-shadow: 0 1px 1px #FFFFFF;
    }
    
    #footer ul {
        margin-bottom: 0;
        margin-top: 3px;
        overflow: hidden;
        text-shadow: 0 1px 1px #FFFFFF;
    }
    #footer #footer-links-primary {
        margin-top: 20px;
    }
    #footer-links-secondary {
        font-size: 11px;
    }
    #footer-links-primary li, #footer-links-secondary li {
        float: left;
        line-height: normal;
        margin: 0 20px 0 0;
        padding: 1px;
    }
    #footer-links-primary a, #footer-links-secondary a {
        color: #666666;
        font-weight: bold;
    }
    #footer-links-primary {
        margin-top: 20px;
    }
    anyone got the correct way to go about this? I have been at it for 3 hours. Pretty sad hu?

  2. #2
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    First of all, it looks you are trying to contain a block element (<ul>) with an inline element (<span>). That's not how it works.

    Most problems are solved when you first validate the HTML in your document. Did you do that?

    I imagine when you validate, you will see 95% of your problems go away.

    Read this
    Last edited by mavigozler; 09-30-2012 at 04:58 AM.

  3. #3
    Join Date
    Sep 2012
    Posts
    2
    bow would it be written? I am a really newbie at this. If I had something to reference it would help me. thanks.

  4. #4
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    Quote Originally Posted by yuu View Post
    bow would it be written? I am a really newbie at this. If I had something to reference it would help me. thanks.
    You need to take the time to learn HTML and CSS. To get a working knowledge of HTML would take you 1-2 days, and maybe the same for CSS, depending on how fast your read, browse and work the learning curve. It will be the best. If you go for the official "recommendations" (standards), you should learn to browse quickly.
    http://www.w3.org/community/webed/wiki/HTML
    http://www.w3.org/Style/CSS/learning

    Now as to your problem, you probably want to contain the two ul elements in a div, but really you should post a link to the page (if it is on server) or post whole HTML document or post it to JSFIDDLE and provide a link.

    A general rule on centering block elements:

    1. you need to set a fixed width in the contained element (say "width:35em;" or whatever is a good width
    2. You need to set margin-left and margin-right to "auto". The best way to do it is "margin:Xem auto;" where Xem is whatever you want for the top and bottom, if they are the same.

    3. floating for centering a single block element is not necessary. Floating inline elements and list items does not make sense, since they are contained in blocks that can be floated.

    4 The floated element should come before the element(s) that are not floated in the flow of content.

    5. Clearing a float is straightforward. However some have advised on clearing a float with a float. You can google it to check out this kind of styling.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles