If, you want us to follow this more easily then it would be in your interests to set up a live test server so that we can work with the real code and see what its supposed to look like. Hosting is pretty cheap these days (or a free host if you must but they usually come at the cost of adverts).
I looked at your horizontal nav code and it didn’t look too bad.
Can you help with something I might have mentioned earlier: Automatic resizing of content within browser. Is this CSS, obviously the columns would need to change width depending on what the user does with the Browser Window.
An excellent example of this is Amazon.co.uk: Low Prices in Electronics, Books, Sports Equipment & more The middle section changes it width. And the search box changes length as you resize the window.
Is this easy? I am prepared to work to achieve this but not if it means extensive coding.
Matt.
Well that amazon layout is little bit messy but you’d need to do something roughly like this.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
#outer {
width:100%;
margin:auto;
border:1px solid #000;
min-width:800px;
max-width:1400px;
}
#column1, #column3 {
width:250px;
float:left;
background:red;
}
#column3 {
width:63%;
float:right;
background:blue;
overflow:hidden;
}
#column2 {
float:left;
width:35%;
margin:0;
background:#fffccc;
overflow:hidden;
}
#footer, #header {
width:100%;
clear:both;
background:green;
text-align:center;
padding:10px 0;
}
h1, p {
margin:0 0 1em;
padding:0 5px;
}
#content {
margin:0 0 0 260px;
}
.inner {
width:100%;
float:left;
}
.subhead {
background:yellow;
clear:both;
width:100%;
margin:0 0 5px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Header</h1>
</div>
<div id="column1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
</div>
<div id="content">
<div class="inner">
<div class="subhead">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
</div>
<div id="column2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
</div>
<div id="column3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
</div>
<div class="subhead">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
The above has a min amd max width on the outer which can be removed if you want a full stretch but its best not to let the window stretch too big because on my 27" imac it would be unusable at that width.
Fluid layouts are harder to code and you have to expect that every element will wrap to a new line so you can’t just make things fit exactly where you want because that changes on sc reen width. You have to allow room to breathe and to break to new lines
Thanks. I am just trying it out at the moment. But in the meanwhile can I ask something else. I am also looking at CSS text font and styling…
This is taken from MSN.co.uk CSS file:
.richtext code, .richtext samp, .richtext kbd {
font-family: “courier new”,courier,monospace;
This is something I have used with my old web site:
#title {
font-family: Arial, Helvetica, sans-serif;
Mine is much simpler but am I missing a trick?
Why do MSN use 3 different names for the style (.richtext code, .richtext samp, .richtext kbd {)?
And does monospace mean anything. Is it a spacing technique?
Matt.
There is nothing in the MSN CSS that provides anything extra.
“.richtext code, .richtext samp, .richtext kbd” is a group of selectors for elements within that particular design which are intended to share the same font-family values. In this case the purpose is to specify a monospace font for code, samp and kbd elements that are children of elements with the class “richtext”. If using a single selector, such as “#title”, works for your purpose then that is fine.
“courier new” and “courier” are the names of individual fonts while “monospace” is a generic font family, as are “serif” and “sans-serif”. Including a generic font family (at the end) allows the browser to substitute an appropriate font if the named fonts are not available.
I don’t want to but-in with my limited knowledge, but I wanted to ask…
Wouldn’t the code be less confusing doing it this way…
#column1 {
width:250px;
float:left;
background:red;
}
#column3 {
width:63%;
float:right;
background:blue;
overflow:hidden;
}
I didn’t see a need to have #column3 with #column1 with all of the changes from your original example.
#column1, #column3 {
width:250px;
float:left;
background:red;
}
#column3 {
width:63%;
float:right;
background:blue;
overflow:hidden;
}
And I didn’t understand floating #column3 left just to turn it around and float it right.
Just a novice observation from someone that gets confused easily…
Yes you are correct and that would now be a better way to write the code after all the changes.
I was just trying to preserve the original code structure to make it easy to spot the changes from the original but there is no need for the comma separated list anymore.
I always use a comma separated list when there are similar rules as it saves on code.
e.g.
#rule1, #rule2 {
width:250px;
float:left;
background:red;
color:blue;
font-weight:bold;
}
#rule2 {float:right;}
However as the demo example has no similar rules then they should be separated as you suggest. Well spotted
Many times I’ve looked at other peoples code to see how to do something and got so confused that I almost gave up.
I try to keep it simple to read even if it takes extra coding to do it. Recently though, I have begun to combine rules but usually start out with individual rules then combine what I can later.
Yes that’s a good approach. Start out simple and then once you have it working nicely then reduce the rules where possible without sacrificing readability.
There are great savings to be made in CSS by using comma separated rules and shorthand but a balance between size and readability is always good.
Hi,
I have got the site working like amazon.co.uk and just need to decide the min and max width.
Something I am stuck with now is ‘paragraph spacing’. If I want a single space between lines I use the <p> and </p> tags. But I need a double space (two lines spacing) in some cases. The only way I have found is not useable
<p>space</p>
The word space appears. I have tried without any text between the tag but it does not insert a blank line like I thought it might.
What is the best way to add line-spacing?
Matt.
First set a suitable default for your p elements globally at the start of the document.
e.g.
p{margin:0 0 .7em}
Then when you want extra margin on say the last paragraph or a special paragraph then just add a class.
p.last{margin-bottom:2em}
<p class=“last”>Lorem ipsum dolor etc…</p>
There is never a reason to add an empty element just to make space. You would very rarely use breaks in paragraph sections either as breaks are used in things like addresses, poems, form controls but not just to make space or end a line rather than using a paragraph.
That is a very good way of achieving the spacing - thanks!
Going back to the column layout for CSS, I am looking to design a footer like the one at John Lewis | Furniture, TVs, Men’s & Women’s Clothing, Toys & More - this web site has what looks like 5 columns in the footer column. How can I do that? It does seem a bit excessive to have 5 extra columns…is there an easier way?!?
Matt.
I’m not sure what you mean by an easier way as you simply float the 5 blocks across. It couldn’t really be much easier.
Using the code from the site you linked to.
.ftr-col {
float: left;
width: 19.8%;
}
You just wrap each block in that class and float them across. Remember to clear the floats afterwards if you want content underneath.
OK - that is rather easy.
Are there any ‘guidelines’ with CSS styling sheets? Does the order of styling matter? Order of CSS stylings at the moment are: (navigation bar, text, columns layout). Should columns CSS styling be listed before the rest instead??
I am also looking into designing a CSS image gallery like with amazon.co.uk.
Gulliver’s Travels Blu-ray 3D + 2D Blu-ray + DVD + Digital Copy: Amazon.co.uk: Jack Black, Emily Blunt, Jason Segel, Billy Connolly, Catherine Tate, Rob Letterman: Film & TV
When a small image is hovered over the main image changes (and there is zero time delay between hovering over the image and it appearing in place of the main image). Also, if the small picture is clicked then a new window opens with a larger picture. I would also like to have something like that as well. The new window that opens on my mac is not a normal browser window so I am not sure how easy it is to create a custom new window with a “close” link at the top right!?!
I have found and read a tutorial which produces this (SCROLL DOWN THE PAGE AND CLICK “EXAMPLE 12” as I could not get the direct link for some reason!!: How to Create a Photographic Gallery Using CSS / Page 2
The tutorial explaining this is at: How to Create a Photographic Gallery Using CSS
It is something like what I am trying to create but not exact. I am thinking if I use that code I can the edit it for my purposes. If you cannot help point in the right direction or confirm that the code I have found is the best solution or not, I was thinking I could create a new post about this Image Gallery CSS problem but you may be able to help…
Thanks again for your help so far,
Matt.
That particular bit is done with JavaScript. There are lots of free scripts out there for doing a gallery like that, such as slimbox2. But mixing the two kinds of gallery may be trickier. The gallery in example 12 seems quite viable. that sort of gallery has been discussed quite a bit around here. Paul has some nice example of that on his site too.
I am quite keen to not use JavaScript at all on the new site. Our current site uses a Java Script Shopping Basket system (JShop). If someone has their JavaScript disabled then the prices on the site read “undefined” and hence they cannot buy from us.
So I do not want to ‘ignore’ people without JavaScript enabled. So I will need something that is pure CSS (like the example I found, without the new window bit - I suppose I can get the new window without JavaScript but it will not look as good/professional).
Matt.
Worthy sentiments. Best-practice JavaScript allows for a nice, usable fallback if JS is not available. So those with JS on will get a slightly nicer experience.
The Amazon example fails badly with JS off, so it’s not a good example. Stu’s Example12 works fine with JS off, though. (The fact that it pops up in a separate window is by the by, though that’s done with JavaScript.)
Paul O’B,
Going back to the footer you explained. I am looking at Maps and SD Cards - Accessories - TomTom
This layout could be achieved by setting
width: 24%;
But what about the actual styling of the background? How do I get a border (with rounded corners, which I know can be difficult). Is this easily written with the CSS column structure or is it something to do with background images? How does this work?
Matt.
Round corners are always difficult unless you just want to use border radius and support modern browsers (ie9+).
There are many tutorials around for [URL=“http://www.cutcodedown.com/tutorials/eightCorners/page1.html”]round corners and all vary in their usefulness depending on situation. They all have to cover the same ground as you need extra elements to hang your corners on and in a fluid layout you need to address each corner rather than capping and element top and bottom.
There is no mystery as its just basic css and manipulation images to match. There are clever techniques using a sprite image which are the best methods to use.
I am not sure whether these sites
Maps and SD Cards - Accessories - TomTom
(rounded corners top and bottom)
OutdoorGB the Outdoor Equipment Specialists
(rounded corners top only)
use separate images for the corners?! They do not appear to be background images. It looks to me like it is just a border. Can you confirm if separate images for corners (like the linked tutorial you provided) is the only method. I think it looks like a border property?!
Matt.