Forum Moderators: not2easy
I am new to this site and wonder if someone would help me please.
The below is taken from a page I have online showing the problem I am having with my page layout, I thought showing the problem this way would help, the page can be viewed at the following address.
<snip>
---------------------------------------------------------
The above descriptions sections do not stop under the corresponding image when the window is resized, or the screen resolution is below 1680x1050.
I require a 2 row 6 column grid that will keep the descriptions under the corresponding image, when the window is resized, or the screen resolution is below 1680x1050, the coding I think also still needs to be between a <div><div/> as this page is because when I tried a css table which did give me what I require it did not resize as this does.
How can I fix this?
[edited by: swa66 at 6:59 pm (utc) on April 27, 2009]
[edit reason] No personal URLs please see ToS and forum charter [/edit]
Thanks for the reply, <snip> the code I am using is below.
THE CSS
----------------------------------------------------------
/* --- CSS Reset --- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* --- Typography --- */
.grid p {
line-height: 16px;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h1 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h2 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h3 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h4 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h5 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h6 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
/* --- Grid --- */
.grid {
width: 100%;
margin: auto;
border: thin silver dotted;
}
.grid-m1 {
float: left;
width: 5px;
height: 1px;
}
.grid-c1 {
float: left;
width: 144px;
}
.grid-m2 {
float: left;
width: 5px;
height: 1px;
}
.grid-c2 {
float: left;
width: 144px;
}
.grid-m3 {
float: left;
width: 5px;
height: 1px;
}
.grid-c3 {
float: left;
width: 144px;
}
.grid-m4 {
float: left;
width: 5px;
height: 1px;
}
.grid-c4 {
float: left;
width: 144px;
}
.grid-m5 {
float: left;
width: 5px;
height: 1px;
}
.grid-c5 {
float: left;
width: 144px;
}
.grid-m6 {
float: left;
width: 5px;
height: 1px;
}
.grid-c6 {
float: left;
width: 144px;
}
/* --- Grid Description --- */
.grid {
width: 100%;
margin: auto;
border: thin silver dotted;
}
.grid-m7 {
float: left;
width: 5px;
height: 1px;
}
.grid-c7 {
float: left;
width: 144px;
}
.grid-m8 {
float: left;
width: 5px;
height: 1px;
}
.grid-c8 {
float: left;
width: 144px;
}
.grid-m9 {
float: left;
width: 5px;
height: 1px;
}
.grid-c9 {
float: left;
width: 144px;
}
.grid-m10 {
float: left;
width: 5px;
height: 1px;
}
.grid-c10 {
float: left;
width: 144px;
}
.grid-m11 {
float: left;
width: 5px;
height: 1px;
}
.grid-c11 {
float: left;
width: 144px;
}
.grid-m12 {
float: left;
width: 5px;
height: 1px;
}
.grid-c12 {
float: left;
width: 144px;
}
-----------------------------------------------------------
THE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Header</title>
<link href="template.css" rel="stylesheet" type="text/css" />
<link href="table.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
border-style: solid;
border-width: 1px;
}
.style2 {
float: left;
width: 144px;
text-align: center;
}
.style3 {
color: #0000FF;
font-size: medium;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Site Best Viewed @ 1680x1050</h1>
</div>
<div id="leftnav">
<p>Left Sidebar</p>
</div>
<div id="rightnav">
<p>Right Sidebar</p>
</div>
<div id="content">
<h2>Content</h2>
<p></p>
<div class="grid">
<div class="grid-m1">
</div>
<div class="grid-c1" style="width: 200px; height: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" />
</div>
<div class="grid-m2">
</div>
<div class="grid-c2" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m3">
</div>
<div class="grid-c3" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m4">
</div>
<div class="grid-c4" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m5">
</div>
<div class="grid-c5" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m6">
</div>
<div class="grid-c6" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<br style="clear: both" />
</div>
<div class="grid">
<div class="grid-m7">
</div>
<div class="style2" style="width: 200px">
Description 1</div>
<div class="grid-m8">
</div>
<div class="style2" style="width: 200px">
Description 2</div>
<div class="grid-m9">
</div>
<div class="style2" style="width: 200px">
Description 3</div>
<div class="grid-m10">
</div>
<div class="style2" style="width: 200px">
Description 4</div>
<div class="grid-m11">
</div>
<div class="style2" style="width: 200px">
Description 5</div>
<div class="grid-m12">
</div>
<div class="style2" style="width: 200px">
Description 6</div>
<br style="clear: both" />
</div>
<div class="grid">
<div class="grid-m1">
</div>
<div class="grid-c1" style="width: 200px; height: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" />
</div>
<div class="grid-m2">
</div>
<div class="grid-c2" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m3">
</div>
<div class="grid-c3" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m4">
</div>
<div class="grid-c4" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m5">
</div>
<div class="grid-c5" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<div class="grid-m6">
</div>
<div class="grid-c6" style="width: 200px">
<img alt="" class="style1" height="200" src="images/placeholder.gif" width="200" /></div>
<br style="clear: both" />
</div>
<div class="grid">
<div class="grid-m7">
</div>
<div class="style2" style="width: 200px">
Description 7</div>
<div class="grid-m8">
</div>
<div class="style2" style="width: 200px">
Description 8</div>
<div class="grid-m9">
</div>
<div class="style2" style="width: 200px">
Description 9</div>
<div class="grid-m10">
</div>
<div class="style2" style="width: 200px">
Description 10</div>
<div class="grid-m11">
</div>
<div class="style2" style="width: 200px">
Description 11</div>
<div class="grid-m12">
</div>
<div class="style2" style="width: 200px">
Description 12</div>
<br style="clear: both" />
</div>
<p> </p>
<p class="style3">The above descriptions sections do not stop under the
corresponding image when the window is resized, or the screen resolution
is below 1680x1050.</p>
<p class="style3"> </p>
<p class="style3">I require a 2 row 6 column grid that will keep the
descriptions under the corresponding image, when the window is resized,
or the screen resolution is below 1680x1050, the coding I think also
still needs to be between a <div><div/> as this page is because when I
tried a css table which did give me what I require it did not resize as
this does.</p>
<p class="style3"> </p>
<p class="style3">How can I fix this?</p>
<p> </p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
[edited by: swa66 at 9:54 pm (utc) on April 27, 2009]
[edit reason] ToS #24 & please keep the discussion in the forum [/edit]
Thanks for the reply but any main wrappers I am using are not over 100%
The problem I am having is with the div grid I want to use on my page, I used the online builder Grid Designer 2 but this only gave me the option to make coloumns and not rows, if I had the option to make rows I don't think I would be having this problem.
How about some html like:
<ul class="images">
<li><img src="#" alt="alt" /><span>description</span></li>
<li><img src="#" alt="alt" /><span>description</span></li>
<li><img src="#" alt="alt" /><span>description</span></li>
<li><img src="#" alt="alt" /><span>description</span></li>
<li><img src="#" alt="alt" /><span>description</span></li>
<li><img src="#" alt="alt" /><span>description</span></li>
</ul>
The CSS: I'll give you some hint:
- float the <li>, give it the margins it needs
- size the <img> in css
- get the span to go under the image by making it a block (somewhere you'll need width to get controlled)
And your CSS that you have now is very long and overly complex for what it does.
e.g.:
.grid p {
line-height: 16px;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h1 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h2 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h3 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h4 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h5 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
.grid h6 {
line-height: 32px;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
I'd write that as:
.grid p, .grid h1, .grid h2, .grid h3, .grid h4, .grid h5, .grid h6 {
font: 16px/32px Verdana, Geneva, sans-serif;
}
.grid p {
line-height: 16px;
font-size: 10px;
}
Thanks for the reply, however your coding only gives me six images in a vertical line with the description to the right of the image.
What I am after is a horizontal row of four to six images with the description below eace image.
I did give you some hints how to get there.
The interesting bits are in the text, not in the code I use to illustrate it.
Frst let's start off by ditching legacy IE versions for now. It'll only confuse and I'll eventually fix it (not tonight not enough time)
So NO IE for now!
Let's start with something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>BEFORE</p>
<ul class="images">
<li><img src="1.png" alt="alt" /><span>description</span></li>
<li><img src="2.png" alt="alt" /><span>description that is
long enough to wrap</span></li>
<li><img src="3.png" alt="alt" /><span>description</span></li>
<li><img src="4.png" alt="alt" /><span>description</span></li>
<li><img src="5.png" alt="alt" /><span>description</span></li>
<li><img src="6.png" alt="alt" /><span>description</span></li>
</ul>
<p>AFTER</p>
</body>
</html>
First we validate the html, to be sure there are no issues (you can fix the warning yourself, is easy enough)
Note the reset I have in there, far shorter (and a lot more crude) than yours, but does the job too.
Now we want the images to be contained in size (my test ones are humongous in size)
All we need to add:
.images img {
width: 200px;
height: 200px;
}
The class images is on the <ul>, though it we fnd the right <ul> and then any children <img> get given their size.
Now let's put them all in a row
.images li {
float: left;
}
hmm, those blocks dots overlapping the text, that are the bullets that use to be on the list, let's get rid of them:
.images {
list-style: none;
}
Bullets gone.
Now the tricky part: to get the text to sit under the images.
Let's try making the span display as a block and let's center the text in it:
.images span {
display:block;
text-align:center;
}
Cool, but there's a problem with that long comment: it's wider than the image.
Let's limit the width of the parent (the <li>)
.images li {
float: left;
width: 200px;
}
There a few more problems to solve:
When the sndow is small enough they don;t wrap back to the beginning of the line, but instead stay "hooked on the one with the longer description now.
The easiest solution if we insist on floating is to make them all equally high (clearing on is an option too, but ... since we don;t know were the wrap is goign to be it's not an option)
The alternative is not to float them, but to display the <li>s inline. Far more interesting as that means we can also center it all if we want too.
So this is a decision point with diverging roads. I'll take the inline road asa an example here (but do remember floating is an option too, just set a height on the span)
So we [red]REMOVE[red]:
.images li {
float: left;
}
and add:
.images li {
display:inline-block;
}
uh, oh now the bottoms seem to be aligned, not what we were hoping for.
Q:why is that?
A:the inline blocks sit on the baseline as if they were images, need to set vertical alignment on them:
.images li {
display:inline-block;
vertical-align: top;
}
Now this looks a lot better.
So how about that centering ?
We can move the text-align cetner from the span to the <ul> (.images)
Adding this back together:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.images img {
width: 200px;
height: 200px;
}
.images li {
display:inline-block;
vertical-align: top;
width: 200px;
}
.images {
list-style: none;
text-align:center;
}
.images span {
display:block;
}
</style>
</head>
<body>
<p>BEFORE</p>
<ul class="images">
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description that is long enough to wr
ap</span></li>
<li><img src="3.jpg" alt="alt" /><span>description</span></li>
<li><img src="4.jpg" alt="alt" /><span>description</span></li>
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description</span></li>
</ul>
<p>AFTER</p>
</body>
</html>
Note how the AFTER stays neatly below it all and it doesn't try to mess with the BEFORE either.
Now you wanted some more space between them. Instead of adding superfluous html, we'll just use some margins on the <li> :
.images li {
margin: 0 30px;
}
Now would be a good time to review
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.images img {
width: 200px;
height: 200px;
}
.images li {
display:inline-block;
vertical-align: top;
width: 200px;
margin: 0 30px;
}
.images {
list-style: none;
text-align:center;
}
.images span {
display:block;
}
</style>
</head>
<body>
<p>BEFORE</p>
<ul class="images">
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description that is long enough to wr
ap</span></li>
<li><img src="3.jpg" alt="alt" /><span>description</span></li>
<li><img src="4.jpg" alt="alt" /><span>description</span></li>
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description</span></li>
</ul>
<p>AFTER</p>
</body>
</html>
Validate the xhtml.
Validate the CSS.
And test it in other browsers. Start with the standard compliant ones: (FF, safari, Opeara, ...)
And then move to IE .. IE8 should give little trouble but the older two poor excuses for a browser might be a different case. Something for tomorrow to look at. Bed time now. It'll also allow you to let this sink in a bit.
Please don;t just try the last one, try to understand the path to it and the reason for every statement in there.
Aside of this IE thing coding such a thing is nearly trivial if you know a few basic techniques and the CSS syntax.
Thanks for the detailed reply, I think my understanding of it with your help is slowly getting better, the result from what you have done so far is exactly as I wanted the display to look like however as you said there is no IE for now so I was testing in the latest firefox to see the result.
I have also been having a play around with things to try and work out how to make this work in Internet Explorer, but as CSS is fairly new to me I have not got anywhere as yet, so I await your next lesson with anticipation.
And thanks again I am glad I found this website and you, as the site and you have been a great help so far.
display:inline-block needs to be tripped back to display:inline
Adding this to the header:
<!--[if IE 7]>
<style type="text/css">
.images li {
display:inline;
}
</style>
<![endif]-->
I'll be back with IE6 and IE8 as I have them running for something else I need to finish.
<!--[if lt IE 8]>
<style type="text/css">
.images li {
display:inline;
}
</style>
<![endif]-->
so the result could be something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.images img {
width: 200px;
height: 200px;
}
.images li {
display:inline-block;
vertical-align: top;
width: 200px;
margin: 0 30px;
}
.images {
list-style: none;
text-align:center;
}
.images span {
display:block;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.images li {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<p>BEFORE</p>
<ul class="images">
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description that is long
enough to wrap</span></li>
<li><img src="3.jpg" alt="alt" /><span>description</span></li>
<li><img src="4.jpg" alt="alt" /><span>description</span></li>
<li><img src="1.jpg" alt="alt" /><span>description</span></li>
<li><img src="2.jpg" alt="alt" /><span>description</span></li>
</ul>
<p>AFTER</p>
</body>
</html>
Please do ask what is hard to understand as after a while this gets easy for me and I'm sure I'm skipping things that aren't trivial to understand.
Sorry I have taken a while coming back to you, I have been working away but am back now, thanks again for your coding however I have found out that the alt part of the tag don't work in firefox, and will only work in internet explorer 8 if it is in compatability mode, I have been trying a few things to fix this but so far I have come up blank.
Do you have any idea on this?
Thanks is that all it is, shows what I know just now LOL, so is best to enter text into the alt or not?
