How to left align peoperly my logo
I have a page and its header navihation is properly inherit therefore its coming to the center.
But the Logo which is not coming to proper left, its going to left side of the page.
HTML
<title>VRBO</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_layout">
<div id="header_menu">
<center>
<a href="#"><img src="images/nav_header.png" width="900" height="43" /></a>
</center>
</div>
<div id="header_logo">
<img src="images/logo.png" class="logoImage" width="96" height="96" />
</div>
</div>
</body>
</html>
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {开发者_如何学JAVAtext-decoration:none;}
body {
}
h1,h2,h3,h4,h5 {
font-family:Verdana, Geneva, sans-serif; font-weight:normal;
line-height:100%;
margin-top: 0;
}
#main_layout {
background-image: url(images/vrbo_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
height: auto;
min-height: 100%;
min-width: 900px;
left: 0px;
top: 0px;
position: fixed;
width: 100%;
}
#header_menu {
overflow:hidden;
width: 100%;
}
#header_menu img {
float:inherit;
margin:0px;
}
#header_logo {
overflow: hidden;
width: 100%;
float:inherit;
margin:0px;
}
#header_logo img.logoImage {
float: left;
margin-left: 10px;
}
Also could you please let me know what I did wrong ?
Thanks!!!
Put the logo in the header_menu div and you should be fine; if that's where you want it (over the header image).
Check out this jsfiddle where I have set logo to float:left and menu to float:right within the header div, which acts as a container for the elements. In the example, margin: 0px auto makes the header centered on the page (so you don't need the center tags) as long as the width and height are given. If you want to adjust the position of the logo or menu within the header div, simply add margin properties.
I don't know if it's related to your problem because you didn't post any HTML - but you are missing a } in your #header_menu definition.
加载中,请稍侯......
精彩评论