CODEWITHSUNDEEP
htmlcss
SASHI
SASHI

Reputation: 199

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.

Screenshot of the output

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 {text-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!!!

Upvotes: 0

Views: 3244

Answers (2)

bozdoz
bozdoz

Reputation: 12860

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.

Upvotes: 1

dvir
dvir

Reputation: 5115

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.

Upvotes: 0

Related Questions