Burig
04-22-2010, 04:38 AM
I've been trying to solve this for awhile, but I've not been able to do it as of yet, I have no idea why either.
On my webpage there is a header, and as I'm working on a widescreen monitor, I originally made it quite large; and figured that I would be able to use a percentage and min-width/min-height to adjust it for other monitors.
Because of the colourschemes of the website, the header can't just go down in size (the body of the website is a pale green, whereas the navigation bar is a darker, and the first letter of the header is a pale green, while the rest is darker), where the first letter of the header image needs to stay with the navigation bar as it resizes, which I've managed to do.
The only problem is now, the code doesn't seem to look at the 'min-width' (or 'min-height', I've tried both), and keeps resizing past the navigation bars min-width. I've tried setting the min-width of the image at percentages, px, em, none seem to work. For the most part, I'm using firefox 3.6, but also use I.E.
For anyone who wants to have a look at the code
<style type="text/css">
body {background-color:#D9FFD8;}
div.leftbar {position:absolute; top:0px; left:0px; height:200%; width:13.8%; background-color:#24681b; min-width:170px;}
img.header {position:absolute; left:0px; top:50px; height:7.5%; min-height:6%;}
<body>
<div class="leftbar">
<img class="header" src="http://combinedesigns.zxq.net/imageheaders/Combine.png">
</div>
On my webpage there is a header, and as I'm working on a widescreen monitor, I originally made it quite large; and figured that I would be able to use a percentage and min-width/min-height to adjust it for other monitors.
Because of the colourschemes of the website, the header can't just go down in size (the body of the website is a pale green, whereas the navigation bar is a darker, and the first letter of the header is a pale green, while the rest is darker), where the first letter of the header image needs to stay with the navigation bar as it resizes, which I've managed to do.
The only problem is now, the code doesn't seem to look at the 'min-width' (or 'min-height', I've tried both), and keeps resizing past the navigation bars min-width. I've tried setting the min-width of the image at percentages, px, em, none seem to work. For the most part, I'm using firefox 3.6, but also use I.E.
For anyone who wants to have a look at the code
<style type="text/css">
body {background-color:#D9FFD8;}
div.leftbar {position:absolute; top:0px; left:0px; height:200%; width:13.8%; background-color:#24681b; min-width:170px;}
img.header {position:absolute; left:0px; top:50px; height:7.5%; min-height:6%;}
<body>
<div class="leftbar">
<img class="header" src="http://combinedesigns.zxq.net/imageheaders/Combine.png">
</div>