...

View Full Version : Can CSS deal with vertical and horizontal pictures



effpeetee
05-22-2007, 10:54 PM
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:-

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:-


<!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>

194673
05-22-2007, 11:38 PM
I'm confused as to what you want to do? Could you elaborate?

Arbitrator
05-23-2007, 12:13 AM
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:


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; }


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 (http://www.w3.org/TR/css3-selectors/#nth-child-pseudo):


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]

effpeetee
05-23-2007, 12:21 AM
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

effpeetee
05-23-2007, 12:26 AM
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

Arbitrator
05-23-2007, 02:13 AM
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,

effpeeteeMy 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:


* { 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.

effpeetee
05-23-2007, 08:28 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum