Search code examples
jquerycssmenubar

editing css script for menu bar


i have a css script for make jquery menu bar.. i want it can show at left upside and no border... so..it will show just a menu bar... i have a text logo and i want to put it below the menu bar... but actually the logo lies below menu bar body... how to change it...??

<head>
 <style type="text/css">
        * { margin:0 auto;
            padding:0;
            }
                html { background:#ffffff; }
                body{    margin:40px auto;
                         width:560px;
                         height:552px;
                         overflow:hidden;
                         background:#ffffff;
                        }
                div#menu {
                                margin:40px 0 0 95px;
                                position:left;
                                }
                div#copyright {
                                font:11px 'Trebuchet MS';
                                color:#fff;
                                text-align:center;
                                clear:left;
                                position:absolute;
                                top:546px;
                                width:560px;
                                }
                div#copyright a { color:#425B7B; }
                div#copyright a:hover { color:#fff; }
</style>
</head>
<body>
<p align="left"><img src="coollogo_com-30735352.gif" border="0"></p>
</body>

Solution

  • It's hard to tell what you're trying to do without seeing any HTML markup. To use wood.jpg as your body background, use background: #ffffff url(/images/wood.jpg); in the body style definition in place of background: #ffffff

    Other than that, here are some general pointers:

    • For the wildcard style (*), you only need margin: 0;
    • Adding a background color to both html and body is redundant. You only need it on body
    • You don't need any margin on body since you already defined it with the wildcard
    • I would advice against using overflow: hidden with a fixed height for your body, unless that's exactly what you want. Any long running content will get cut off. Consider using overflow: auto;
    • The style "position: left" is not valid. If you want the contents of #menu to align to the left, use text-align: left or float the contents to the left and clear the div using a "clearer div" or overflow auto;