I am trying to have 3 side by side images (or columns containing images) where the middle image is liquid, yet the left and right images are fixed size.
I have been able to get this working using text/background-color in 3 columns but with .jpg images I have only been able to come close.
Here is my CSS.
html,body{margin:0;padding:0}
body{
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
font: 76% arial, sans-serif;
/*background-image: url('../images/el_header.jpg');
background-repeat:no-repeat;*/
}
/* Header styles */
#header{
margin:0 -293px;
padding:0 254px 0 476px;
}
#container{
float:left;
width:100%;
margin-left:-254px;
margin-right:-476px;
display:inline; /* So IE plays nice */
}
#logo{
float:left;
width:293px;
margin-left:-293px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:476px;
margin-right:-476px;
position:relative;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 side by side images as a header</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type="text/css" href="./css/import.css" title="import stylesheets used for this page" />
</head>
<body>
<div id="header">
<div id="container">
<div id='center'><img src='./images/el_mid_top_header.jpg' /></div>
<div id ='logo' ><img src='./images/el_logo_header.jpg' /></div>
<div id='rightRail'><img src='./images/el_tagline_header.jpg' /></div>
</div>
</div>
</body>
</html>
Can you suggest a semantically method to get this working?
You can just give the image a percentage width, and it will grow and contract depending on the width of the column. However, browsers do not always handle image resizing very nicely. There are some IE fixes that help a bit.
The center image fills more than it is supposed to. I have create this temporary link because I think that it is too hard to envision what is going on: http://64.201.38.109:12342/el/template.php.
At the top of the template.php page you can see how the header is rendering; the center image covers the logo on the left-most side.So that you could see the way the header is supposed to look I have repeated the header as background image.
The way it should work is that the only area that should stretch is the gradient between the logo (on the left) and the tagline (on the right).
If you resize the template.php page you will see how the gradient is currently streching/shrinking. This is the desired behaviour only the center image as you can see (if using firebug) is covering the logo.
If you or anyone else has any further ideas about how I might solve this I would really appreciate it - I have been banging my head against the wall for a couple of days trying to get this
I’m not totally clear on what you want, but it looks like you should start from scratch here. I gather you want “ExpressLead” to sit left and “Technology should support…” to sit right, no matter how wide the browser window.
In that case float them left and right, and place the gradient as a background image underlying both. Make it wider than any likely browser window and center it horizontally:
I will rework this tomorrow the way in which you suggest and will post back my results. Thank you for your input. You described exactly what I want it to do. I am looking forward to what you have suggested.
I have a working version (Firefox 3) of the fixed size left and right images and the stretchable gradient middle column:
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>El template</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type="text/css" href="./css/import.css" title="import stylesheets used for this page" />
</head>
<body>
<div id="header_outer_wrapper">
<div id="head_inner_wrapper">
<div id="header">
<div id="leftcol"><!-- begin leftcol -->
<img src='./images/el_logo_header.jpg' />
</div>
<div id="rightcol">
<img src='./images/el_tagline_header.jpg' />
</div>
<div id="centercol">
<img src='./images/el_mid_top_header.jpg' width='100%' height='107px'/>
</div>
</div><!-- end header area -->
</div><!-- end head_inner_wrapper -->
</div><!-- end header_outer_wrapper -->
<!-- menu centralized file
require_once('menu.php')?>-->
<div id="left_menu">
<ul class="nav">
<li id='mm_home' class='arrow'><a href="#1">Home</a></li>
<li id='mm_view_contacts' class='arrow'><a href="#2">View Contacts</a></li>
<li id='add_contacts' class='arrow'><a href="#3">Add Contacts</a></li>
<li id='download_contacts' class='arrow'><a href="#4">Download Contacts</a></li>
<li id='reports' class='arrow'><a href="#4">Reports</a></li>
<li id='profile' class='arrow'><a href="#4">Profile</a></li>
<li id='admin' class='arrow'><a href="#5">Administration</a></li>
</ul>
</div>
<div id='content_wrapper'>
<div id='content'>
<h2>Contact</h2>
<img class='left' src='./images/top_wide_corners.jpg' />
<p>
Lorem ipsum vel admodum probatus conclusionemque cu, tale propriae reprimique in
sea, exerci molestie verterem est cu. Dolor nostrum eloquentiam et sea,
in affert salutandi consequat eam. Ei adhuc graecis menandri sea, ceteros insolens
corrumpit eam id. Ut qualisque consulatu nam, cu sea hinc rebum minimum, per ut
repudiare dissentiet. Possim mediocrem adipiscing id sea, patrioque delicatissimi id ius.
</p>
<p>
Has idque liber mollis ad. Usu tollit cetero mandamus ne, ei usu nobis voluptatum.
Ut vel virtute alienum luptatum, legere partiendo democritum has ut, est no explicari
maluisset. Nibh similique vel et, et sed posse vulputate. Has legere corpora et.
</p>
</div>
</div>
</body>
</html>
Here is it working http://64.201.38.109:12342/el/template.php… I have to make adjustments for IE7 and IE8 (haven’t looked at these yet) but this looks to be on the right track.
Hi, IE7 is fine, though IE6/8 have the font too large and as a result the words are dropping to a new line (in some). You can set a smaller font size and ensure no drop by setting white-space:nowrap
I am currently building VMs with IE7 and then another with IE8 so I have to get that done next; therefore I appreciate you looking at it in the IEs. Thanks also for the white-space:nowrap … nice
Hi, unless you have a mac, you can just download IEtester and that will allow you to use IE6/7/8 all through one program :). The tabs do crash sometimes but just fire it back up when that happens.
Again a good tip. Although I use Linux as my development/scripting environment so I have to use VMs when speaking about IE. I do however have a XP virtual machine where I will install IEtester and will use it (even with the crashes) until I get my VMs completed.
