website: www.neverup-neverin.com (excuse the garish colours, just for my references)
I have displayed 3 images in an inline unordered list, I am trying to find out two things:
I have been trying all sorts or things, would it be easier putting these images in separate divs?
Hi, ontargett.
Since you’re in a learning mode, you can give this a try and see how it works for you.
#homeimages {
[color=red][s]width: 100%;[/s][/color] /* delete */
background-color:#FF00FF;
margin:0 auto;
[color=red][s]height: 200px;[/s][/color] /* delete */
}
#homeimageslist {
list-style:none;
[color=blue]text-align:center;[/color] /* add */
[color=blue]padding:0px;[/color] /* add */
[color=blue]margin:0px;[/color] /* change */
[color=red][s]overflow:hidden;[/s][/color] /* delete */
}
[color=blue]#homeimageslist li { /* all different */
display:inline-block;
vertical-align:middle;
text-align:center;
margin:6px 1.25%;
}[/color]
[color=blue]img {vertical-align:top;}[/color] /* add */
In case the colors are confusing, the modified CSS should look like this:
#homeimages {
background-color:#FF00FF;
margin:0 auto;
}
#homeimageslist {
list-style:none;
text-align:center;
padding:0px;
margin:0px;
}
#homeimageslist li {
display:inline-block;
vertical-align:middle;
text-align:center;
margin:6px 1.25%;
}
img {vertical-align:top;}
In the HTML:
<div id="homeimages">
<ul id="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
<!-- note that an "x" was added between adjacent dashes in the open comment marks below
<div id="homeimg1">
</div> <!-x-closing homeimg1
<div id="homeimg2">
</div> <!-x-Closing homeimg2
<div id="homeimg3">
</div> <!-x-Closing homeimg3
-->
There are other ways of skinning this cat. Consider this a starter. 
@ronpat Thanks for all of that, this gives me a much better result.
I now want to be able to set the margins for these images, so they are an equal distance from the edges of the container as they are to each other.
My understanding would be to do the following:
img {
vertical-align: top;
margin-left: 40px;
}
But how do i ensure that these attributes are only applied to the images in the list #homeimageslist and not any other images I may put on this page in the future?
Thanks in advance
I think I have sorted the problem above, by using the following code:
#homeimages img {
vertical-align:top;
margin-left: 60px;
}
Please correct me if I’m wrong.
But the first image in the list seems to be a fair way from the left edge, why is this happening? www.neverup-neverin.com
ontargett,
It would be helpful if you could describe exactly how you want the images to behave on the page… how close to the edges, etc. It looks like the page is intended to be responsive eventually, so my suggestions have that in mind.
You asked how to target only the images inside .homeimageslist. This example shows how that’s done. No image outside of .homeimageslist is affected by those styles.
You can target any particular image by giving that image a classname and addressing it accordingly in CSS.
In this example, I have changed the IDs to classnames. I do not like to use IDs unnecessarily.
Those funny little comment marks touching the <li> tags in the HTML are intentional. They stop the inline white space between elements that can interfere with percent widths. There are other ways to do that, too.
As I suggested before, there is no one right or best way to do this. How it’s done depends on its surroundings… the context.
@charset "UTF-8";
/* CSS Document */
.container {
width:95%;
min-width:310px;
margin: 0 auto;
background-color:#999;
}
.header {
background-color:#f00;
height:278px;
}
.navbar {
height: 35px;
background-color:#ff0;
}
.content {
background-color:#00f;
}
.homeimages {
background-color:#f0f;
}
.welcome {
background-color:#000;
color: white;
}
.footer {
background-color:pink;
color: white;
}
.homeimageslist {
list-style:none;
text-align:center;
padding:10px 0 0;
margin:0;
}
.homeimageslist li {
/* outline:1px solid cyan; /* TEST Outline */
display:inline-block;
vertical-align:middle;
text-align:center;
width:50%;
min-width:310px;
margin:0 0 10px;
}
@media only screen and (min-width:1024px) {
.homeimageslist li {width:33.3%;}
}
.homeimageslist img {
display:block;
margin:0 auto;
}
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="style/style2a.css" rel="stylesheet" type="text/css" />
<title>Lister lets with Style</title>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="navbar"></div>
<div class="content">
<div class="homeimages">
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
</div> <!-- .homeimages -->
<div class="welcome">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div> <!-- .content -->
<div class="footer">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div> <!-- .footer -->
</div> <!-- .container -->
</body>
</html>
Let me know if we’re getting closer, please
Thanks for that, I want the images to have an equal distance between them as it is to the edges of the container, I hope this make sense?
Just a couple of questions:
Is this the reason why I can’t move the image closer to the left edge?
Really appreciate your patience with this, quite new to web design
The list items are centered, but the images have a left margin, which pushes them all to the right. You could remove the left margin from the images, and instead try a right margin on the LIs:
#homeimages img {
vertical-align: top;
[COLOR="#FF0000"][s]margin-left: 60px;[/s][/COLOR]
}
#homeimageslist li {
display: inline-block;
vertical-align: middle;
text-align: center;
[COLOR="#FF0000"]margin: 0 30px;[/COLOR]
}
ontargett, I have a couple of questions for you.
What happens to your page when you change (narrow) the width of your browser window?
Did you copy the code that I posted in #5 into two NEW files and try the HTML page in your browser to see how it behaves? I wrote those pages to help me understand what you want your code to do. If you did not, please DO.
Why do I prefer classes over IDs?
IDs can be used ONLY ONCE on a page. Classes can be reused as needed.
IDs are “heavy handed”. In terms of specificity, they override classes. “Gee, why doesn’t this style work?” can come up all too often when coding an ID-heavy page. (The issue comes up often enough anyway.)
IDs are needed for JavaScript targets and fragment identifiers (on-page links), otherwise, classes are fine.
Why do people use IDs?
IDs are easy to write, only two letters “id”; classes are hard, “class”, five letters.
IDs are easy to see, “#”, classes are hard, “.”
I guess I know the answer (was already busy with it). 
At the moment the images are dropping when the browser window is less than about 1150px width:
[CENTER]
What I should do to get the theater of the images scalable (as the rest of the design):
If you do this, it can be something like this:
[CENTER]
Notes: The css in is the <head>. Some <div>'s can be missed (at the moment). I changed the Doctype from Transitional into Strict, which is the recommended standards complying coding method for new websites, since 1999.
And of course with some media queries a desired responsive design can be added.
The images tend to drop beneath each other, as @Francky has mentioned beneath.
Francky if I make the changes that you have suggested- will it affect any of the changes I have made with Ronpat’s changes in the HTML in the #5 post?
- Did you copy the code that I posted in #5 into two NEW files and try the HTML page in your browser to see how it behaves? I wrote those pages to help me understand what you want your code to do. If you did not, please DO.
I have just done this and the images are evenly spaced now, it has also got rid of the left-margin each list item had (in this case my images) For my future reference, could you tell me which parts of code you added, or removed, so I could understand how this was achieved?
I’ve never heard that using id’s can cause problems, I’ll take this on board and make sure I use classes wherever possible now.
Thanks for the help
Sorry to be slow getting back to you. These things take time to put together.
For simplicity, I deleted the irrelevant parts of your code (the stuff that was completely unnecessary to this issue). The css is at the top of the HTML page. There’s no need to link to another stylesheet.
I like to use outlines when building a page because they help me visualize the layout without adversely influencing it. Much more useful than colored borders, IMO. You can delete or comment out the outlines when you’re finished studying the code.
All are standalone working pages and are intended to be copied to a file and opened in a browser exactly as they are.
This first code box shows how I changed your CSS and HTML to make it work as it does in my example. I left the IDs in place for this explanation.
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="style/style2e.css" rel="stylesheet" type="text/css" />
<!--
In the HTML, I commented out the white space between the list items to counteract the inline white space issue.
-->
<title>Fluid Row</title>
<style type="text/css">
#homeimages {
width:95%; /* TEMPORARILY moved here from .container{} for this demo */
min-width:310px; /* ADDED. Move to .container{} along with width:95% */
background-color:#f0f;
margin: 0 auto;
}
#homeimageslist {
list-style: none;
text-align: center;
/* padding: 0px; */ /* DELETED/CHANGED */
padding:10px 0px 0; /* ADDED */
margin: 0px;
}
#homeimageslist li {
outline:1px solid cyan; /* TEMPORARY TEST OUTLINE */
display: inline-block;
vertical-align: middle;
/* text-align: center; */ /* DELETED */
width:50%; /* ADDED *//* IF fluid behavor is NOT desired, replace 50% with 33.3% and delete the media query at the bottom */
min-width:310px; /* ADDED */
margin:0 0 10px; /* ADDED */
/* mergin: 15px 5%; */ /* DELETED (misspelled) */
}
/* DELETED this selector, REPLACED by next selector.
#homeimages img {
vertical-align:top;
margin-left: 60px;
}
*/
#homeimageslist img { /* ADDED this selector */
display:block;
margin:0 auto;
}
@media screen and (min-width:1024px) { /* ADDED *//* optimum breakpoint depends on number of images and image widths */
#homeimageslist li {width:33.3%;}
}
</style>
</head>
<body>
<div id="homeimages">
<ul id="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
</div> <!-- .homeimages -->
</body>
</html>
This next code box is another look at this same code. I added more list items to demonstrate how this code behaves with more than 3 images and considered IE8 compatibility. Be sure to read the notes in the comment marks at the top of the page.
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="style/style2f.css" rel="stylesheet" type="text/css" />
<script src="js/respond.min.js" type="text/javascript"></script>
<!--
Images (list items) can be added or removed without changing the CSS.
Horizontal space between images is twice the space at the ends of the widest row. Seems visually appealing to me.
If IE8 compatibility is required, add respond.js https://github.com/scottjehl/Respond; if not, delete the above script tags.
-->
<title>Fluid Rows</title>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
body {
outline:1px solid #00f; /* TEST Outline */
background-color:#eee;
}
.homeimages {
width:95%;
min-width:310px;
background-color:#f0f;
margin: 0 auto;
}
.homeimageslist {
list-style:none;
text-align:center;
padding:10px 0 0;
margin:0;
}
.homeimageslist li {
outline:1px solid cyan; /* TEST Outline */
display:inline-block;
vertical-align:middle;
width:50%;
min-width:310px;
margin:0 0 10px;
}
@media screen and (min-width:1024px) { /* optimum breakpoint depends on number of images and image widths */
.homeimageslist li {width:33.3%;}
}
.homeimageslist img {
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<div class="homeimages">
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li><!--
--><li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
</ul>
</div> <!-- .homeimages -->
</body>
</html>
The behavior of the images in this last code box is exactly the same as those in @Francky’s excellent example; however, the list items are coded differently. Again, see the notes for more info.
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="style/style2g.css" rel="stylesheet" type="text/css" />
<!--
The number of images in each row will not change as the page width changes. (They don't drop down as the page narrows.)
The space between and around images is identical on all sides.
The size of the images is fluid and changes with the width of the page.
Images can be added to or removed from any row without changing the CSS. No math required.
This technique uses display-table and table-cells for each row.
Works in IE8+.
-->
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
body {
outline:1px solid #00f; /* TEST Outline around the page body */
background-color:#eee;
/* margin:0; /* Commonly used reset. Delete comment marks to enable. */
}
.homeimages {
width:95%;
min-width:300px;
background-color:#f0f;
padding:0 0 10px;
margin:0 auto;
}
.homeimageslist {
list-style:none;
display:table;
width:100%;
border-spacing:10px 0; /* Cannot use percent */
padding:10px 0 0;
margin:0;
}
.homeimageslist li {
outline:1px solid cyan; /* TEST Outline */
display:table-cell;
vertical-align:middle;
}
.homeimageslist img {
display:block;
width:100%;
height:100%;
}
</style>
<title>Fluid Images</title>
</head>
<body>
<div class="homeimages">
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
</div> <!-- .homeimages -->
</body>
</html>
Hope this is helpful.
Thanks for getting back to me, wasn’t slow at all, I can only ever look at the forum every other day due to full time job anyway.
I have had a good look through the code, thanks its been really helpful. I just have a few questions about some of the coding:
Regarding 1st set of code:
Regarding 2nd set of code (IE8 compatibility)
Regarding @Francky Code:
Thanks for this, sorry to be a pain, have lots of questions
Question #1. Yes. Normally, the width of the page is set in the outermost container, which is usually the first <div> inside the <body> tag. .container in your case. To simplify these examples, I removed all of the boxes from your code except those that directly affected the images. .header, .navbar, .content, .footer and .container were removed. That made .homeimages the outermost container. So I moved the width properties from .container into .homeimages. Guess I could have left .container in place, but didn’t.
Perhaps this full page example will be easier to follow: (It uses the display:table and display:table-cell properties).
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="style/style2h.css" rel="stylesheet" type="text/css"/>
<title>Lister lets with Style</title>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
.container {
width:95%;
min-width:240px;
background-color:#999;
margin:0 auto;
}
.header {
height:278px; /* fixed height is not recommended */
background-color:#f00;
}
.navbar {
height:35px; /* fixed height is not recommended */
background-color:#ff0;
}
.content {
background-color:#00f;
}
.welcome {
background-color:#000;
color:white;
}
.footer {
background-color:pink;
color:white;
}
.homeimages {
background-color:#f0f;
padding:0 0 10px;
margin:0 auto;
}
.homeimageslist {
list-style:none;
display:table;
width:100%;
border-spacing:10px 0; /* Cannot use percent */
padding:10px 0 0;
margin:0;
}
.homeimageslist li {
/* outline:1px solid cyan; /* TEST Outline */
display:table-cell;
vertical-align:middle;
}
.homeimageslist img {
display:block;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="navbar"></div>
<div class="content">
<div class="homeimages">
<ul class="homeimageslist">
<li><img src="images/homeimage1.jpg" height= "190" width="300" alt=""/></li>
<li><img src="images/F1 Bottle door.jpeg" height= "190" width="300" alt=""/></li>
<li><img src="images/Stairs.jpeg" height= "190" width="300" alt=""/></li>
</ul>
</div> <!-- .homeimages -->
<div class="welcome">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div> <!-- .content -->
<div class="footer">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div> <!-- .footer -->
</div> <!-- .container -->
</body>
</html>
About the JavaScript in example 2. I used a media query to set the breakpoint where the row of images changes between 3 and 2 images per row in a responsive layout. IE8 does not understand media queries. For that media query to work in IE8, one must add a polyfill to make IE8 understand the media query. Respond.js is a simple polyfill for media queries that only use the width property.
In your third question you refer to Francky’s code. Francky’s code does not use CSS table/table-cell properties. Francky floats the image boxes (the list items). The code that I posted achieves the same result more easily by using CSS table/table-cell properties. Both methods have advantages and disadvantages. Most of the time, I prefer the easier method because you can change the number of images in the row without changing any CSS (as shown in the example in post #11); ie. it’s flexible.
You are correct that HTML <table> tags are “poo-poo’d” for page framing and non-tabular content. There are no <table> tags in any of this HTML. Unordered lists <ul> and list items <li> are not <table> tags. What I have done is apply certain table behaviors to <ul> and <li> tags using CSS properties because these table properties are the easiest way to achieve the image behavior that you like. That is perfectly acceptable HTML and CSS. Yes, IE8 understands these CSS styles; therefore, these styles are said to be compatible with IE8.
Hi Guys, sorry I have been away from this for so long. I work in retail so as you can imagine Christmas is a manic time for work, but I’m back to it now!
I have gone with the code that uses display: table-cell as the image do not drop down beneath each other.
I have just added an attribute to min-width: 300px, to the images. Is this good practice to do this, or do I just accept that the images will “squash” if the user resizes the window.
Thanks in advance
ontargett, please post a link to the page so we can see how it behaves. If you do not want the images to scale down smaller, then they will need to drop to another row for those users who have narrow viewports, like the code in post #11 example 2. I’m a bit puzzled about what you want, so I don’t want to comment about what is “good” or “not good” practice.
Sorry for the confusion.
I have uploaded it to www.neverup-neverin.com now.
I have set a minimum width to the images as you can see, so they can’t be reduced in size and not be “squashed” pas that point.
I suppose my question is this good practice, or should I just set a fixed width for each image, regardless of the window size?
What you are doing right now is not good practice. What you are trying to accomplish (what you think would look good to you and your clients) is still a mystery. Could you live with two images in one row and one image in the second row? Why three images? Why not two or four? There are several choices available to you no matter what you choose. “Good Practice” depends on how you want the page to behave. The menu above the images is wrapping (“breaking”) also when the page narrows.
Ok, I see your point, as I am just building this to practice at the moment I don’t know what is right or wrong.
How would I stop the menu from breaking then?
Thanks
Please allow a couple of “good” and “bad” opinions here.
The questions you are asking, “Is it good, bad, right or wrong, etc.”, are too general/black-and-white to be applied to all design situations. Layout choices/judgements typically depend on the context of the page. What is “bad” on one page may be perfectly acceptable on another.
I recommend that you learn how HTML and CSS properties behave (which I believe you are doing at this time), then read about page layout techniques separately (where you can apply some of those “right, wrong, good, bad, and ugly” judgement calls).
Don’t get me wrong… there are poor ways to write code, too; but so far, except for “tables”, you have asked about general layout issues, not code specific issues. Tables are not “bad”, but there are MUCH better techniques for page layout nowadays. That’s true of many coding techniques. If you are looking for copy-and-paste “always good” coding techniques, you’ll be hard pressed to find them.
Spend more words describing what you want (your objectives), what you see (desired and undesired), and what you expect to see (hopefully we can explain why you don’t see it and show you how to get there).
“Good” and “bad” are non-descriptive and too subjective.
If you limit the ability of the images to shrink to fit the width of the window, then the images overflow past the right edge of the window at narrow widths. That’s not cool. Instead of restricting the ability of the images to adapt to the width of the window, why not restrict the window to an arbitrary minimum width such that the image are not allowed to shrink any smaller than you like and the images will not overflow the window. As a bonus, the menu bar no longer wraps. (There are still lessons to be learned from the menu about fluid coding, but they can wait for another day.)
With these changes, I delete the restrictions applied to the images and change the page min-width to 600px… Try this and tell us what you see and think:
.container {
background-color: #FFFFFF;
margin: 0 auto;
min-width: [color=blue]600px;[/color] /* was 310px */
width: 95%;
}
.homeimages {
background-color: #FFFFFF;
margin: 0 auto;
[color=red]min-width: 300px;[/color] /* delete me */
padding: 0 0 10px;
[color=red]width: 95%;[/color] /* delete me */
}
.homeimageslist li {
display: table-cell;
[color=red]min-width: 200px;[/color] /* delete me */
vertical-align: middle;
}
Thanks, I have appied these to my website and it appears a lot better when resizing the windows.
I also have a little problem with my footer, I am trying to have 3 divs within the footer, from the code on www.neverup-neverin.com you can see I have floated one left and one right, then used margin: 0 auto for the central div. But .footright doesn’t seem to float correctly.
I have tried overflow: hidden in the .footer parent element, but it doesn’t seem to help.
I have seen a few online tutorials using a span class to clear: both but am I bit confused as to how this works and how to implement it.
Thanks in advance