Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Can CSS deal with vertical and horizontal pictures

    I have a picture menu which uses CSS to format the display. As I have both vertical and horizontal pictures on screen at the same time, I need to know if.how it can be done,

    www.exitfegs.co.uk/nine.html

    This is the style sheet. I was hoping to use the very bottom section as an alternative format, but I cannot see how to do this.

    effpeetee

    Style sheet:-
    Code:
      body {
            font: 62.5%/1.6 "Lucida Grande", Tahoma, Verdana, sans-serif;
            font-weight:bold;
            background: #000;
            color: #FFF;
          }
          #container {
            width: 1000px;
            margin: 0 auto;
          }
          .pics {
            list-style-type: none;
          }
          .pics li { /* also specify font, color, margins, etc */
            float: left;
            margin: 0 20px 25px 0;
          }
          .pics img {
            width: 160px; 
            height: 120px; 
            border: thin solid white;
            display: block;
          }
          .clear { /* clear the floats */
              clear: both;
              height: 0;
          }
          
          .pics2 img {
            width: 120px; 
            height: 160px; 
            border: thin solid white;
            display: block;
          }
    HTML:-

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Effpeetee's Photo Gallery</title><LINK REL="stylesheet" TYPE="text/css" HREF="cssstyle.css">    <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="description" content="A page of family photos.">
         </head>
      
      <body>
        <div id="container">
         <ul class="pics">
         <li><a href="Steven2.html"><img src="YoungSteve.jpg" alt="Family photos" /></a>Young Steven.</li>
         <li><a href="Grandad.html"><img src="Grandad.jpg" alt="Family photos" /></a>Frank's Dad.</li>
         <li><a href="HonW.html"><img src="web20.jpg" alt="Family photos" /></a>Hay-on-Wye.</li>
         <li><a href="Glider.html"><img src="Glider.jpg" alt="Family photos" /></a>Frank in a glider - Wartime ATC.</li>
         <li><a href="Mum.html"><img src="web14.jpg" alt="Family photos" /></a>Frank's mum.</li>
         <li><a href="Steve3.html"><img src="steve-01.jpg" alt="Family photos" /></a>Steven.</li>
         <li><a href="FSin.html"><img src="EdPortrait2.jpg" alt="Family photos" /></a>Sister Edna.</li>
         <li><a href="web19large.html"><img src="web19.jpg" alt="Family photos" /></a>Frank - 45 years ago.</li>     
         <li><a href="bsgroup.html"><img src="96.jpg" alt="Family photos" /></a>Betty and Steven.</li>
         <li><a href="web20large.html"><img src="95.jpg" alt="Family photos" /></a>Samantha and Philip.</li>
         <li><a href="SteveandPhil.html"><img src="94.jpg" alt="Family photos" /></a>Steve and Philip.</li>
         <li><a href="famgroup.html"><img src="89.jpg" alt="Family photos" /></a>Family group.</li>
         <li><a href="css.html"><img src="web3.jpg" alt="Family photos" /></a>Betty and Frank - Arlesford.</li>
        </ul>
            <div class="clear"><!-- --></div>
        </div>
      </body>
    </html>
    Last edited by effpeetee; 05-22-2007 at 10:27 PM. Reason: add URL

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    I'm confused as to what you want to do? Could you elaborate?

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You need to clear the li element at the start of each line in the direction of the floats. For example, if you want a maximum of four list items on a line, you would clear the fifth, ninth, and thirteenth li elements.

    The effective layout would look like:

    [01][02][03][04]
    [05][06][07][08]
    [09][10][11][12]
    [13]


    You could use adjacent sibling, class, or ID selectors to do this. You’ll want to use one of the latter two methods if Internet Explorer 6 compatibility is an issue. The first two methods are shown below:

    Code:
    ul.pics li + li + li + li + li,
    ul.pics li + li + li + li + li + li + li + li + li,
    ul.pics li + li + li + li + li + li + li + li + li + li + li + li + li { clear: left; }
    ul.pics li + li + li + li + li + li,
    ul.pics li + li + li + li + li + li + li + li + li + li { clear: none; }
    Code:
    ul.pics li.fifth, ul.pics li.ninth, ul.pics li.thirteenth { clear: left; }
    For interest, the CSS3 Selector Module (Working Draft) has a much more effective method:

    Code:
    ul.pics li:nth-child(4n+5) { clear: left; }
    If the layout you want focuses on the vertical first (as shown below), then you’ll probably have to use tables or JavaScript unless each li element has fixed dimensions; then you could use absolute positioning.

    [01][05][09][13]
    [02][06][10]
    [03][07][11]
    [04][08][12]
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by 194673 View Post
    I'm confused as to what you want to do? Could you elaborate?
    www.exitfegs.co.uk

    If you go into my site (above) and select the CSSTestPage from the menu, you will see that pictures 4,5,6,7 should be vertical.

    I have added this piece of code to have an alternative vertical frame, but I cannot see how to use it.

    .pics2 img {
    width: 120px;
    height: 160px;
    border: thin solid white;
    display: block;
    }

    Is it possible to mix the two formats. The Family Photos option on the front menu, uses tables and mixes the two types. This is what I need to do with CSS version.

    effpeetee
    Last edited by effpeetee; 05-22-2007 at 11:34 PM. Reason: tidying up

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Arbitrator:

    I am sorry, but I did not make myself clear. Perhaps if you read my reply to 194673 is will save me from typing it in again.

    My problem is described there.

    Thank you,

    effpeetee

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by effpeetee View Post
    Arbitrator:

    I am sorry, but I did not make myself clear. Perhaps if you read my reply to 194673 is will save me from typing it in again.

    My problem is described there.

    Thank you,

    effpeetee
    My explanation still seems to address your issue. My take is that you want to know how to emulate the layout of that table through the use of CSS and an ul element. I see that you found another way of getting at the same thing though by use of a fixed width to force the floats to wrap. If you want four images per row, then this revised style sheet should do it:

    Code:
    * { margin: 0; padding: 0; }
    html { font: bold 62.5%/1.6 "Lucida Sans", "Lucida Grande", Tahoma, Geneva, Verdana, sans-serif; background: black; color: white; }
    #container { width: 728px; margin: 0 auto; }
    .pics li { list-style: none; float: left; width: 162px; margin: 0 10px 25px; }
    .pics img { display: block; width: 160px; height: 120px; border: 1px solid; }
    Substantial changes related to your issue are highlighted in green.

    Basically, I lessened the container width and more clearly defined other dimensions to ensure that exactly four items would fit on one line. It’s a good rule of thumb to remove margins and padding for all elements at the start of a style sheet to avoid confusion with default margins and padding. That way, you know that they are zero unless you have explicitly specified otherwise.

    Additional changes include condensing the CSS, changing the font fall‐backs to account for both Windows and Mac fonts, and changing the horizontal margins—by putting half of the right margin on the left—of the li elements so that the content would appear more centered.
    Last edited by Arbitrator; 05-23-2007 at 01:18 AM. Reason: (formatting)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    www.exitfegs.co.uk

    I have now bodged it using 'Drag and resize'

    If you go into my site (above) and select the CSSTestPage from the menu, you will see that pictures 4,5,6,7 should be Portrait
    The rest are Landscape.

    Is it possible to mix the two formats. The Family Photos option on the front menu, This is what I have cobbled together. Most in-elegant.

    I need to be able to have both Portrait and Landscape on the same page.
    effpeetee
    Last edited by effpeetee; 05-23-2007 at 10:25 AM. Reason: I have now fiddled it to give me what I need


  •  

    Posting Permissions

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