Forum Moderators: not2easy
Firstly I would like to say thanks for all the other help I have fond in other posts!
Secondly - my problem!
I am a new user to CSS and just beginning to try and figure it all out.
I am working on the title bar which will go across the top of the page. I am trying to apply a minimum width effect so that when the browser window size is changed the whole lot will not shrink to a width of less than 600 or 700 pixels, the reason being that the title gets pushed down into the main content and also, once the main content is there I don't want to to shrink too much either. I understand that the is a min-width property but as far as I can tell it does not work in Internet Explorer which most of my users will be using.
I was wondering if any of you know a way for me to get it to do this?
Also, I would welcome any suggestions any of you have regarding the design/layout/code/etc. (the css will be in a seperate style sheet but for the purposes of this post I have put it in with the html).
Anyway, thanks in advance
Dini
[edited by: Nick_W at 8:06 pm (utc) on Nov. 15, 2003]
Standards compliant browsers (such as Gecko and Opera) support min-width. If you want it to work in IE you need to use Conditional Comments and CSS embedded expressions. Are you familiar with those at all?
Thanks for the reply. Unfortunately, no I'm not familiar with those comments/expressions...
<html>
<head>
<title>Site name</title>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#banner {
background-color: #000066;
height:100px;
border: 0px;
padding: 0px;
margin-left:100px;
}
#banner2 {
background-color:#0099cc;
height:100px;
border: 0px;
padding: 0px;
filter:alpha(Opacity=100 FinishOpacity=0 Style=1 StartX=100 FinishX=0);
}
#logo {
position: absolute;
left:0px;
top: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100px;
height: 100px;
background-color:#000066;
}
#title {
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 10px 0 0 0;
margin-left: 0;
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
padding-left:110px;
filter: DropShadow(Color=#000000, OffX=2, OffY=3, Positive=1);
}
#title h1 {
display: inline;
font-size: 35px;
font-weight: bold;
font-variant: small-caps;
}
#title h2 {
display: inline;
font-weight: bold;
font-size: 15px;
font-style:italic;
}
#titlephoto {
position: absolute;
top: 0px;
right: 0px;
border: 0;
padding: 0;
margin: 0;
width: 290px;
height: 100px;
text-align: right;
filter:alpha(Opacity=0 FinishOpacity=100 Style=1 StartX=0 FinishX=100);
}
#menu {
position: absolute;
top: 100px;
left: 0px;
width: 200px;
padding: 0px;
border: 0px;
margin: 0px;
background-color:#6666CC;
z-index: 100;
}
#body {
z-index: -100;
position: absolute;
top: 100px;
left: 0px;
right: 0px;
padding: 0;
border-left: 200px solid #663333;
border-right: 0;
border-top: 0;
border-bottom: 0;
background-color:#663399;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner2"></div>
</div>
<div id="logo"><img src="lcc.gif"></div>
<div id="titlephoto"><img src="pavilion2.jpg"></div>
<div id="title"><h1>Site name</h1><br /><h2> www.website_address.co.uk</h2></div>
</body>
</html>
[edited by: Robin_reala at 3:35 pm (utc) on Feb. 25, 2008]
