Menu
I'm trying to create the top portion of a website to hold a logo on the left and a nav bar on the right. The image is large because I was told it might be used on a HDTV and wanted it to scale well. I thought if I put the logo and a nav bar in the same div i could just apply a percentage to the height so it would always be the top 10% of the screen but it doesn't scale with my code, it just stays the same image size. Any help would be much appreciated.
<body>
<div id="container">
<div id="top">
<img src="images/logo.png" alt="logo">
<ul>
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
<li><a href="#" title="4">4</a></li>
<li><a href="#" title="5">5</a></li>
</ul>
</div>
</div>
And this is the CSS im using
#top {
height: 10%;
width: 100%
}
I would really appreciate anyone's help.
418
You can't base a percentage height on a parent that has no height set otherwise the height should default to auto (content doesn't count as height either). Also you can't base a child's percentage height on a parent that has min or max height set either as it must be a real height.
There is no command for changing an image size. Image dimensions are 'properties' which can be expressed in either the HTML <img> element, as width="150" height="100" attributes in the tag; or, the CSS as style rules applying to specific images.
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto .
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .
If you are trying to scale the image itself, you need to target the image in your CSS.
I would also recommend setting a minimum (and possibly maximum) limit to your scaling. There is a point where getting smaller will just look bad and become unusable.
html, body, #container {
height: 100%;
width: 100%;
}
#top {
height: 10%;
width: 100%;
min-height: 23px;
}
#top img {
height: 100%;
width: auto;
min-height: 23px;
min-width: 136px;
}
jsfiddle
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
