[RESOLVED] Can This Be Done with CSS?

[BobH]

Imagine a class yearbook on a web page. There are 2 major columns. Half of the class members will appear in the left-hand column and the other half in the right-hand column. Each column will contain a photo on the left and the class member's name to the right of the photo with the person's school activities listed under the name. The left and right column will each be scrollable and will display 3 complete sets of photo/name/activities, one above the other.

That's the goal.

So far, I've been able to define the 2 column areas of appropriate, size, location, color and border and they have scroll bars. Within each column I've been able to define a place for the first photo/name/activities grouping and populate it from my HTML file that invokes the CSS code. I can't figure out how to define, in CSS, the areas for the successive groups of photos/names/activities.

Here's my CSS:

#yearbook_col_left {
overflow: auto;
border : 4px;
border-style: ridge;
border-color: #4F1386;
background-color: #FFD897;
position: absolute; top : 136px; left : 215px;
width: 378px;
height: 405px;
padding-top: 1px;
padding-left: 1px;
}

#yearbook_col_right {
overflow: auto;
border: 4px;
border-style: ridge;
border-color: #4F1386;
background-color: #FFD897;
position: absolute; top: 136px; left: 605px;
width: 378px;
height: 405px;
padding-top: 1px;
padding-left: 1px;

}

#yearbook_col_left_pic {
border: 1px;
border-style: solid;
border-color: black;
background-color: white;
position: absolute; top: 8px; left: 4px;
width: 85px;
height: 105px;
padding-top: 1px;
padding-left: 1px;
}

#yearbook_col_right_pic {
border: 1px;
border-style: solid;
border-color: black;
background-color: white;
position: absolute; top: 8px; left: 4px;
width: 85px;
height: 105px;
padding-top: 1px;
padding-left: 1px;
}

#yearbook_col_left_name {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: white;
color: black;position: absolute; top: 8px; left: 96px;
width: 247px;
height: 17px;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 2px;
font-variant: small-caps;

}
#yearbook_col_right_name {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: white;
color: black;position: absolute; top: 8px; left: 96px;
width: 247px;
height: 17px;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 2px;
font-variant: small-caps;
}

#yearbook_col_left_activities{
background-color: white;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;position: absolute; top: 27px; left: 96px;
width: 265px;
height: 80px;
padding-top: 10px;
padding-left: 2px;
}

#yearbook_col_right_activities{
background-color: white;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;position: absolute; top:27px; left: 96px;
width: 265px;
height: 80px;
padding-top: 10px;
padding-left: 2px;
}

This defines the formatting for only one set of information in each column area. I could add two more uniquely named elements for the successive groupings, but it seems that I would have to explicitly code to have data appear in the specific groupings in my HTML which leads to a maintenance problem if I have anythng misplaced or need to add or delete any entries.

All suggestions greatly appreciated and gratefully received.

[ray326]

I don't see the reason to distinguish between the left and right colums or content. I'd just define two of the same style column and float them so they sit side by side. I'd first try to do the content as a definition list. Then I'd start playing with styles.

<dl>
<dt><img ...></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
</dl>

Mea culpa. I had dls where there should've been dds up there.

[BobH]

Thank you for the response Ray!

Although your information was clear, it went right over my head. I thought that the reason for using CSS was to separate content from format/presentation. It seems to me that your approach would require formatting within the HTML/PHP file. Please help me understand why using lists in the manner you suggested is an appropriate use of CSS.

TIA

[ray326]

I used a DL because you have an image with an associated list of information. There are lots of other ways to look at it, hence "I'd first try...". That's pure content; no presentation suggested. Let me just throw out a pattern here that sort of models what I glean to be your content. One big plus IMHO is how the columns behave when viewed in a narrow versus wide browser window. Another is the potential for a much simplified CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Untitled</title>
<style type="text/css">
div.picwrap {
width: 250px;
border: 1px solid black;
float:left;
margin: 1em;
}
</style>
</head>
<body>
<!-- "left" side -->
<div class="picwrap">
<dl>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
</dl>
</div>
<!-- "right" side -->
<div class="picwrap">
<dl>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
<dt><img src="http://www.webdeveloper.com/forum/image.php?u=54052&dateline=1140914253" alt=""></dt>
<dd>name</dd>
<dd><ul>
<li>activity</li>
<li>activity</li>
</ul></dd>
</dl>
</div>

</body>
</html>

[BobH]

Howdy Ray!

You have been most helpful and patient with me. Thank You!

I've come closer to defining an acceptable format for my yearbook page, but I've got a problem that I can't figure out.

In a panel on the screen I have rows of 4 photos each row. To the right of those photos I list the names of those in the photos (top to bottom names equate to photos left to right). The problem is that I can't make the rows of names (text) align on the same vertical boundary as the top of the photo rows throughout the page. There are 499 photos and names. I've verified and reverified that there are no photos without names, no names without photos.

You can see the page here: Yearbook (http://www.broughton1960.com/latipac.php)

Here's the relevant CSS:
#latipac {
overflow: auto;
position: absolute; top: 136px; left: 220px;
border: 4px 0px, 4px, 4px;
border-style: ridge;
border-color: #4F1386;
background-color: #FFD897;
width: 760px;
height: 340px;
}

#latipac_pics {
position: absolute; top: 8px; left: 15px;
width: 355px;
height: 105px;
}

#latipac_names {
position: absolute; top: 12px; left: 378px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: black;
font-variant: small-caps;
line-height: 27px;

}

Here's an example of the 499 image source statements: <img src="/graphics/latipacpics/adams_james_28.jpg" width="85" height="105">

And, the names statements: James McKinzie Adams<br>

As you scan down the page, you will see that the names creep "up" the page and the last two rows of photos have no names beside them. I've tried multiples of the number of pixels defined for the height of each area (pics, names) but can't come up with anything that works.

Can you point me to online tutorials or how-to's that will help me to understand how the font size, height, line-height, position, and border statements interact to control where things are placed? I'm trying to learn how to use CSS and doing my damnedest not to resort to HTML to resolve the problem because I'm pretty sure I'll want to redesign the site layout when I become more proficient at design and using HTML, CSS, PHP, etc. If you look at the CSS and the HTML, you will no doubt note that it is very bloated. I'll do my best to improve it as I learn more.

Thanks again for your help and your patience.

[therese]

Hi Bob

Thats quite a page you have going there!

My first suggestion would be to think about splitting it into multiple pages, it took an awfully long time to load into my browser. Perhaps something like last names A-G one page, H-P another page, etc...

Second thing is about the fonts and lining up the names exactly with the pictures. I don't know if there is an answer to that, but my thought is, if someone has bad site, they might increase the size of their font in their browser, and then your alignment might get broken. Also, you shouldn't set fonts as px's, they should be as em or %.

So, here is my third thought. Although I see you are sticking very well to the css way of webdesign, which is good, I think that, in this case, putting your pictures in a table ( :eek: curses to me! that forbidden word!) would be acceptable. I am not suggesting using tables to layout the whole page, just for containing the pictures with their corresponding names and activities.

Just my opinions...

[BobH]

Thank you for the response, therese!

Good suggestion about the load time. I have broadband that is very speedy and rarely think about page load speeds anymore. SHAME ON ME! I'll see if I can't break it up into smaller pages. Will you test its load time for me? :)

I sure hope someone can 'splain the alignment issue to me.

Thanks again!

[ray326]

Ok, now I can see what you're doing. To keep them aligned you'll need to group them. One way would be like so.

<div class="picrow">
<img ....><img ...><img ...><img ...>
<ul>
<li>name</li>
<li>name</li>
<li>name</li>
<li>name</li>
</ul>
</div>

Maybe a better one would be.

<div class="picrow">
<ul class="piclist">
<li><img ....></li>
<li><img ....></li>
<li><img ....></li>
<li><img ....></li>
</ul>
<ul class="namelist">
<li>name</li>
<li>name</li>
<li>name</li>
<li>name</li>
</ul>
</div>

At any rate, you have to do the names in groups with the pics to keep them aligned.

[BobH]

Hi therese!

Check the load time on my yearbook pages (5 of them) now. Is this any better or do they need to be made even smaller?

TIA

[therese]

Hi bob

yes, that is much better. I have broadband, but its only 500 kbps, so its not all that fast.

Just curious, did you have to scan all those pictures from a yearbook?! I graduated in 68 myself, things like digital pictures werent even dreamed of way back then. things have sure changed.

Hope you can get that alignment issue resolved.

[Sheldon]

Just a side note, on "http://www.broughton1960.com/biography.php" you have invalid html

<label for="mothers_maiden">Mother's Maiden Name</label>
<input type="text" size="15" id="mother_nee"<br>

And i cant find the year book page?