SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)

    3 side by side images with the center being liquid

    Hi I have a challenging CSS situation.

    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 Code:
    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;
    }
    This html is taken from http://www.alistapart.com/d/multicol...ColLiquid.html but is geared for colours and text not images.

    Here is my <html>
    HTML Code:
    <!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?

    Regards,
    Steve
    ictus==""

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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.

    Code:
    #logo img {
      width:100%;
    }

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi ralph.m,

    I added
    HTML Code:
    #center img { 
        width: 100&#37;; 
        height: 107px;
    }
    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

    Regards,
    Steve
    ictus==""

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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:

    Code:
    #header {
      width: 100&#37;;
      background: url(gradient.gif) no-repeat 50% 0;
    }

  5. #5
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi ralph.m

    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    #header {
      width: 100%;
      background: url(gradient.gif) no-repeat 50% 0;
    }
    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.

    Regards,
    Steve
    ictus==""

  6. #6
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    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:
    HTML Code:
    <!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&#37;' 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>
    And here is the CSS
    HTML Code:
    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_outer_wrapper{
        position:relative;
        width:100%;
    
        }
    #wrapper2 {
        position:relative;
        width:100%;
    }
    #header{
        position:relative;
        padding:10px;
        min-width: 800px;
    }
    #leftcol { 
        position:relative;
        float:left;
        }
    #rightcol {
        position:relative;
        float:right;
        width:476px;
        }
    #centercol {
        position:relative;
        padding:0 476px 0 293px;
    }
    #centercol img { width: 100%; height: 107px; }
    
    /* Content styles */
    #content_wrapper {
         overflow: hidden;
    }
    
    #content {
        float: left;
        width:700px;
    
    }
    
    #content p, #content h2{
        margin-left: 20px;
        margin-right: 20px;
    }
    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.

    Regards,
    Steve
    ictus==""

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    li.arrow a{white-space:nowrap;font-size:/*something*/}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Thanks Ryan,

    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

    Quote Originally Posted by RyanReese View Post
    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
    Code:
    li.arrow a{white-space:nowrap;font-size:/*something*/}
    Regards,
    Steve
    ictus==""

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Hi Ryan,

    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.

    Thanks for your help!

    Regards,
    Steve
    ictus==""

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by ServerStorm View Post
    I have a working version (Firefox 3) of the fixed size left and right images and the stretchable gradient middle column
    Well done, looks good!

  12. #12
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Thanks ralph.m! ... also for your direction that put me on the right course

    Regards,
    Steve
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •