SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with horizontal layout

    On most of my detail pages, I often use side-by-side pictures:
    http://www.vintagetextile.com/new_page_610.htm

    using code like

    <p><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" />&nbsp; <img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>

    It works well as long as the viewer does not increase his/her font size in the browser, when the pictures no longer appear side-by-side but rather stacked vertically, which I don't intend.
    As you can see from the style sheet below, the relevant CSS rules seem to be

    body{width: body{margin: and
    #main{margin-right:12%;}
    since the bulk of the page's code is contained within a <div> with id="main".

    I have tried increasing all of the above parameters but they don't give any leeway allowing the user to even slightly increase font size and still retain the proper side-by-side formatting of pictures.
    Thanks in advance for your expert help.


    body{width:86%;
    margin:2% 3.5% 0 4.5%;
    padding:0;
    border:0;
    color:#000;
    background-color:#fff;
    font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif;}
    .bi{font-weight:bold;}
    .lg{font-size:large;}
    .lgbi{font-size:large;font-style:italic;font-weight:bold;}
    .reserved{color:Red;font-weight:bold;background-color:#fff;}
    #bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}
    #cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
    #cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}
    #cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
    #cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}
    #cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
    #main{margin-right:12%;}
    a:link{color:#00f;background-color:#fff;}
    a:visited{color:#939;background-color:#fff;}
    a:hover{color:#f00;background-color:#fff;}
    img{border:0;}
    img.tall {width:400px;height:585px;}
    img.wide {width:600px;height:500px;}
    .bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,"Times New Roman",serif;margin-left:1em;}
    .cap {font-size: small;font-style:italic;}

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    The problem most likely stems from the use of a non breaking space between images. When the user enlarges his/her fonts the size of the NBS will also enlarge ( since it essentially is text).

    try leaving out the NBS and spacing your images using (PIXEL UNITS!) padding or margin
    Code:
    <p class="img-shell-2"><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>
    
    .img-shell-2 img + img { margin-left:15px;}
    hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    The problem most likely stems from the use of a non breaking space between images. When the user enlarges his/her fonts the size of the NBS will also enlarge ( since it essentially is text).

    try leaving out the NBS and spacing your images using (PIXEL UNITS!) padding or margin
    Code:
    <p class="img-shell-2"><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>
    
    .img-shell-2 img + img { margin-left:15px;}
    hope that helps

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dresden:
    Thanks for the interesting concept. What I like about the Sitepoint forums is that it attracts experts like yourself.

    I added this rule to the governing stylesheet:
    .img-shell-2 img + img { margin-left:15px;}

    and modified the code as you suggested to this:

    <p class="img-shell-2"><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></p>
    <p class="img-shell-2"><img src="images/Couture/7371k.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371p.jpg" alt="" width="800" height="1170" class="tall" /></p>

    However, there was no improvement in the behaviour using FF. In fact, the appearance after a slight increase in font size was worse, as the vertically stacked pictures were no longer aligned. The 2nd picture was slightly to the right of the first (top) picture.

    I should added that this problem appears in FF. In IE11, with or without your changes, there is reasonable leeway to increase font size without causing a problem. I wonder if this different browser behavior gives a clue to what is going on with FF.

    Since I don't have Chrome, I was wondering how Chrome treats my detail pages if you check
    http://www.vintagetextile.com/new_page_610.htm

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I must be looking at the wrong thing as I don;t see any images dropping in Firefox when the text is resized (even to maximum). The only way I can make images drop is by closing the window until there is not enough room for 2 images side by side.

    I'm sure I must be missing the obvious here

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul:
    I suppose that should be good news to me. However, whether I look at a detail page online with FF, just as you did, or do the same thing in browser preview in Dreamweaver, I unfortunately experience the phenomenon I described.

    Since every FF user may have different settings, that may explain why we have different results when increasing font size in FF. BTW, when I do that in FF, I hold down "ctrl" and roll the middle wheel button forward one click.

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    (...) The only way I can make images drop is by closing the window until there is not enough room for 2 images side by side.
    I'm sure I must be missing the obvious here
    Yep, it is the screen width. At less than about 1070px window width the images are dropping, due to the body-margins and the 12% margin-right of the #main container.
    If the page width must be scalable, then the images have to scale too!

    I should go for a centered page (otherwise a lot of empty white space on the right side); the images can scale down at smaller windows/devices with a width of 100% (or almost 50% in case of 2) and in the meantime a max-width (for large screens). Some additional elements have to be added as hooks for the css to get them centered for larger screens

    For instance something like this:


  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fantastic accomplishment

    Francky:
    What a creative and brilliant accomplishment!
    I assume you are professional web designer. After I implement your concept for the 1/23/14 update, I will want to contact you privately.
    I have to implement your suggestions for 10 detail pages in the new update. Because code also has to change, I will leave all the old detail pages with the old "detail.css" and gradually replace them as those pages are taken down with the new, correct coding and styles.

    A couple of questions.
    You omitted img.tall {width:400px;height:585px;
    I assume that was an oversight.

    You have in the body rule:
    max-width: 980px; Is that some kind of fail-safe mechanism?

    In the code where two pictures are next to each other, for the first two pictures, in the <src code, you omitted the dimensions; but you had the dimensions with all the other .jpgs. Just an oversight?

    I hope to implement this on 1/19-20.

    My new detail_new.css

    html {height: 100%;
    padding-bottom: 1px; }
    body { width: 75%;
    max-width: 980px;
    margin: 0 auto;
    font:medium/1.2 Verdana, Tahoma, Helvetica, sans-serif; }
    #main { margin: 0; }
    .center,.images { text-align: center; }
    img { max-width: 100%;
    height: auto !important; }
    .center img.tall { width: 100%;
    max-width: 400px;
    height: auto; }
    .images span { display: inline-block;
    overflow: hidden; }
    .images .tall { float: left;
    width: 49%;
    max-width: 400px;
    height: auto; }
    .images .tall + img {float: right; }
    .wordspace { word-spacing: 5em; }
    .bi{font-weight:bold;}
    .lg{font-size:large;}
    .lgbi{font-size:large;font-style:italic;font-weight:bold;}
    .reserved{color:Red;font-weight:bold;background-color:#fff;}
    #bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}
    #cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
    #cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}
    #cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
    #cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}
    #cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
    a:link{color:#00f;background-color:#fff;}
    a:visited{color:#939;background-color:#fff;}
    a:hover{color:#f00;background-color:#fff;}
    img{border:0;}
    img.tall {width:400px;height:585px;}
    img.wide {width:600px;height:500px;}
    .bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,"Times New Roman",serif;margin-left:1em;}
    .cap {font-size: small; font-style: italic;}

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Francky:
    I have your design working fine. There is one huge practical glitch and wonder if you or any Dreamweaver expert would have an idea about this.
    The new design works great online (or in DW browser preview). That should be good enough, since that is what the web will see. The problem is that in DW design view (DW CS 5.5), the page looks all wrong and is almost unusable.

    Are there any changes in DW settings I can make that will retain image scaling but will appear correctly in DW design view?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cma6 View Post
    There is one huge practical glitch and wonder if you or any Dreamweaver expert would have an idea about this.
    The new design works great online (or in DW browser preview). That should be good enough, since that is what the web will see. The problem is that in DW design view (DW CS 5.5), the page looks all wrong and is almost unusable.

    Are there any changes in DW settings I can make that will retain image scaling but will appear correctly in DW design view?
    Hi,

    Unfortunately 'Design View' in DW is useless for CSS work and you should not rely on it at all I'm afraid. Design view was Ok about 12 years ago when everything was in tables with spacer gifs but since CSS has evolved the design view is less than worthless but for the simplest of tasks.

    You should stay in code view all the time (as the code editor is very good) but then just preview the page in a real browser (or a number of browsers as there may be differences) at every few steps.

    There is nothing you can do about this and I have yet to see anything more complicated than a few divs render correctly in design view and I've had versions of DW for about 14 years!

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dreamweaver Design View

    Thanks, Paul, that is what thought (feared) about DW Design View. I can work in code. It is just a question of discarding the crutch, Design View.
    Just for the record, I will try to attach a screen view of my DW Design View of the page.

    BTW, for a modern capable design view, is there a new, better web design program than DW that I should consider; or should I just buckle down and learn to edit in code?
    Attached Images Attached Images

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cma6 View Post
    =or should I just buckle down and learn to edit in code?
    Yes, just concentrate on the code as all the wysiwyg tools will lead you astray as most of them are in fact wysiwtf.

    Once you get used to working in code view and previewing in a browsers things more or less fall into place because its you that's doing it and not some mystical interface

    The DW code editor though is very good (but overpriced if all you want is the editor).

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am, as usual, very happy with the results at Sitepoint from experts like Francky, Dresden, and yourself.
    Francky provided a truly briliant CSS solution. Your advice on sticking with code view in the future is appreciated.

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering how I could adapt Francky's scalable style sheet above plus the relevant HTML code to having 3 pictures side-by-side as on my home page: http://www.vintagetextile.com/
    The relevant HTML code for two pictures:
    <p class="images"><span><img src="images/Victorian/c436a.jpg" alt="Pingat lace cape" width="800" height="1170" class="tall" /><img src="images/Victorian/c436h.jpg" width="800" height="1170" class="tall" /></span>


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
  •