I am new to web design and have some experience with CSS.
I have built this web page, with javascript slideshow, but I am having problems aligning the 4 “widgets”- Prices, About, Testimonials and Contact.
I am thinking of putting them in to separate divs, contained within the “widgetcontainer” What is the best way to lay these out?
This is the web page www.neverup-neverin.com
Thanks in advance
The first question is how you want these boxes to appear. What’s the desired outcome?
Basically, since you are dealing with a fixed width design (960px) I would change the width of the boxes to px rather than 49%. Then I’d remove all the paddings and margins to start with so that you know what you are working with.
Once we know how you want this to look, we can guide further.
PS— It would look better to get all your images sized equally, too.
Hi,
You don’t need javascript to do those image rollovers as they can be done with CSS only. The images would be better as sprites though and just swap the background-position.
Avoid heights on containers unless they contain only images otherwise the content will most likely spill out at some stage.
You can’t use a number to start an ID as that is invalid. You will need to say #num1, #num2 etc or something similar.
There are too many containers for those 4 images and I would simply use a list.
Here’s a tidied up working example to show it all in action.
<!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>
<!--<link href="style/style2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.neverup-neverin.com/css/slider.css" />
-->
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:#fff;
color:#000;
}
.container {
width: 960px;
margin:auto;
}
.container:after, #nav after {/*clear floats*/
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.header {
background-image: url(http://www.neverup-neverin.com/images/header3.png);
height: 95px;
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
.slideshow {
height: 250px;
width: 960px;
margin: 0 auto;
}
.footer {
background: #ccf;
min-height: 200px;
border: 1px solid #000;
clear:both;
}
#nav {
margin:0 0 20px;
padding:0;
list-style:none;
zoom:1.0;
}
#nav li, #nav li a, #nav li span {
float:left;
width:461px;
height:131px;
position:relative;
overflow:hidden;
cursor:pointer;
text-decoration:none;
}
#nav li { margin:10px 0 }
#nav li.about, #nav li.contact { float:right }
#nav li span {
position:absolute;
left:0;
top:0
}
#nav li.prices a:hover { visibility:visible }
#nav li.prices a span { background:url(http://www.neverup-neverin.com/images/pricewidget.png) no-repeat 0 0 }
#nav li.prices a:hover span { background:url(http://www.neverup-neverin.com/images/pricewidgetroll.png) no-repeat 0 0 }
#nav li.about a span { background:url(http://www.neverup-neverin.com/images/aboutwidget.png) no-repeat 0 0 }
#nav li.about a:hover span { background:url(http://www.neverup-neverin.com/images/aboutwidgetroll.png) no-repeat 0 0 }
#nav li.testimonials a span { background:url(http://www.neverup-neverin.com/images/testimwidget.png) no-repeat 0 0 }
#nav li.testimonials a:hover span { background:url(http://www.neverup-neverin.com/images/testimwidgetroll.png) no-repeat 0 0 }
#nav li.contact a span { background:url(http://www.neverup-neverin.com/images/contactwidget.png) no-repeat 0 0 }
#nav li.contact a:hover span { background:url(http://www.neverup-neverin.com/images/contactwidgetroll.png) no-repeat 0 0 }
/* preload roll over images*/
#nav li.prices { background:url(http://www.neverup-neverin.com/images/pricewidgetroll.png) no-repeat 0 0 }
#nav li.about { background:url(http://www.neverup-neverin.com/images/aboutwidgetroll.png) no-repeat 0 0 }
#nav li.testimonials { background:url(http://www.neverup-neverin.com/images/testimwidgetroll.png) no-repeat 0 0 }
#nav li.contact { background:url(http://www.neverup-neverin.com/images/contactwidgetroll.png) no-repeat 0 0 }
/* slider CSS */
#slider {
height: 250px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 960px;
height: 250px;
float:left;
display: none;
}
#slider a {
padding: 5px 10px;
background-color:#f0f0f0;
margin-top: 30px;
text-decoration:none;
color: #666;
}
a.left { float: left; }
a.right { float:right; }
</style>
<script src="http://www.neverup-neverin.com/js/jquery.js"></script>
<script src="http://www.neverup-neverin.com/js/slider.js"></script>
</head>
<body>
<div class="container">
<div class="header"> </div>
<!--Closing header -->
<div class="slideshow">
<div id="slider"> <img id="1" src="http://www.neverup-neverin.com/images/markjames1.jpg" /> <img id="2" src="http://www.neverup-neverin.com/images/markjames2.jpg" /> <img id="3" src="http://www.neverup-neverin.com/images/markjames3.jpg" /> <a href="#" class="left" onclick="prev(); return false;">Previous</a> <a href="#" class="right" onclick="next(); return false;">Next</a> </div>
</div>
<!-- Closing slideshow div -->
<ul id="nav">
<li class="prices"><a href="#">Prices<span></span></a></li>
<li class="about"><a href="#">About<span></span></a></li>
<li class="testimonials"><a href="#">Testimonials<span></span></a></li>
<li class="contact"><a href="#">Contact<span></span></a></li>
</ul>
<div class="footer">Content for class "footer" Goes Here </div>
<!-- Closing footer-->
</div>
<!--Closing container-->
</body>
</html>
Also note that your 4 images are over 500k each and they should be about 20 - 40k at most.
@ralph_m
I am trying to get them in a “window” pattern as shown in the image below. So they are equally spaced, I had this before I used javascript to create the slideshow at the top:
@Paul_O_B
The rollover images were created by Dreamweaver, can rollover images be created another way then? I’m not sure if Dreamweaver had created id’s with numbers at the beginning as i can’t remember creating that started with numbers, where were they?
Could you possibly talk me through using lists instead of containers? When I inspect websites with firebug, or the likes of, I always see people using “li” and I’ve never known why. How does this work?
Also the images were created in fireworks, how would I reduce the size of these images?
Sorry if this all seems a bit trivial to you, but I am just starting out and would like to learn as much as possible
Thanks in advance
Hi,
I am trying to get them in a “window” pattern as shown in the image below. So they are equally spaced, I had this before I used javascript to create the slideshow at the top:
If you want to space them out in the example I gave then just change this as follows.
#nav li { margin:10px 0 10px 10px }
#nav li.about, #nav li.contact {float:right;margin:10px 10px 10px 0}
There was also a typo in my code and this rule should be like this:
.container:after, #nav:after {/*clear floats*/
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}
You can then put a border around the nav with this:
#nav {
margin:10px 0 20px;
padding:0;
list-style:none;
zoom:1.0;
border:1px solid #000;
}
Here is the whole code again with the fixes above.
<!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>
<!--<link href="style/style2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.neverup-neverin.com/css/slider.css" />
-->
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:#fff;
color:#000;
}
.container {
width: 960px;
margin:auto;
}
.container:after, #nav:after {/*clear floats*/
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.header {
background-image: url(http://www.neverup-neverin.com/images/header3.png);
height: 95px;
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
.slideshow {
height: 250px;
width: 960px;
margin: 0 auto;
}
.footer {
background: #ccf;
min-height: 200px;
border: 1px solid #000;
clear:both;
}
#nav {
margin:10px 0 20px;
padding:0;
list-style:none;
zoom:1.0;
border:1px solid #000;
}
#nav li, #nav li a, #nav li span {
float:left;
width:461px;
height:131px;
position:relative;
overflow:hidden;
cursor:pointer;
text-decoration:none;
}
#nav li { margin:10px 0 10px 10px }
#nav li.about, #nav li.contact {float:right;margin:10px 10px 10px 0}
#nav li span {
position:absolute;
left:0;
top:0
}
#nav li.prices a:hover { visibility:visible }
#nav li.prices a span { background:url(http://www.neverup-neverin.com/images/pricewidget.png) no-repeat 0 0 }
#nav li.prices a:hover span { background:url(http://www.neverup-neverin.com/images/pricewidgetroll.png) no-repeat 0 0 }
#nav li.about a span { background:url(http://www.neverup-neverin.com/images/aboutwidget.png) no-repeat 0 0 }
#nav li.about a:hover span { background:url(http://www.neverup-neverin.com/images/aboutwidgetroll.png) no-repeat 0 0 }
#nav li.testimonials a span { background:url(http://www.neverup-neverin.com/images/testimwidget.png) no-repeat 0 0 }
#nav li.testimonials a:hover span { background:url(http://www.neverup-neverin.com/images/testimwidgetroll.png) no-repeat 0 0 }
#nav li.contact a span { background:url(http://www.neverup-neverin.com/images/contactwidget.png) no-repeat 0 0 }
#nav li.contact a:hover span { background:url(http://www.neverup-neverin.com/images/contactwidgetroll.png) no-repeat 0 0 }
/* preload roll over images*/
#nav li.prices { background:url(http://www.neverup-neverin.com/images/pricewidgetroll.png) no-repeat 0 0 }
#nav li.about { background:url(http://www.neverup-neverin.com/images/aboutwidgetroll.png) no-repeat 0 0 }
#nav li.testimonials { background:url(http://www.neverup-neverin.com/images/testimwidgetroll.png) no-repeat 0 0 }
#nav li.contact { background:url(http://www.neverup-neverin.com/images/contactwidgetroll.png) no-repeat 0 0 }
/* slider CSS */
#slider {
height: 250px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 960px;
height: 250px;
float:left;
display: none;
}
#slider a {
padding: 5px 10px;
background-color:#f0f0f0;
margin-top: 30px;
text-decoration:none;
color: #666;
}
a.left { float: left; }
a.right { float:right; }
</style>
<script src="http://www.neverup-neverin.com/js/jquery.js"></script>
<script src="http://www.neverup-neverin.com/js/slider.js"></script>
</head>
<body>
<div class="container">
<div class="header"> </div>
<!--Closing header -->
<div class="slideshow">
<div id="slider"> <img id="1" src="http://www.neverup-neverin.com/images/markjames1.jpg" /> <img id="2" src="http://www.neverup-neverin.com/images/markjames2.jpg" /> <img id="3" src="http://www.neverup-neverin.com/images/markjames3.jpg" /> <a href="#" class="left" onclick="prev(); return false;">Previous</a> <a href="#" class="right" onclick="next(); return false;">Next</a> </div>
</div>
<!-- Closing slideshow div -->
<ul id="nav">
<li class="prices"><a href="#">Prices<span></span></a></li>
<li class="about"><a href="#">About<span></span></a></li>
<li class="testimonials"><a href="#">Testimonials<span></span></a></li>
<li class="contact"><a href="#">Contact<span></span></a></li>
</ul>
<div class="footer">Content for class "footer" Goes Here </div>
<!-- Closing footer-->
</div>
<!--Closing container-->
</body>
</html>
The rollover images were created by Dreamweaver, can rollover images be created another way then?
Yes you can do it with CSS and should never use JS for simple rollovers. You use a background image and then change the background image on hover - although this is usually better done with sprites…
The technique I used in your page was a gilder /levin image replacement so that you had real text in the htm.
Could you possibly talk me through using lists instead of containers?
There’s not much to say really but when you a have a ‘list’ of items or a series of images or links (as in a nav) then a list is the most semantic element to use.
It’s no different to using a div as far as the css is concerned once you have turned off the bullets, margin and padding but the semantics are more correct. Don’t use lists for everything though; just use them when you have a series of similar items that are best grouped together.
Also the images were created in fireworks, how would I reduce the size of these images?
In Fireworks go to File , Image preview - and then select the best option for the image. If its a normal image then you can choose jpg and lower the quality until the file size is reasonable without much loss of quality to the naked eye. It’s a matter of playing around with gif, png and jpg to see what looks best and what is the lowest filesize. (As a rule of thumb I wouldn’t use any image over 200k unless it was a for a full page background image or it was a special site to do with images.)
Those 4 small images of yours should be around 40k max.
Sorry if this all seems a bit trivial to you, but I am just starting out and would like to learn as much as possible
It’s not trivial and you are asking the right questions 
Thanks for the response
If you want to space them out in the example I gave then just change this as follows.
Code:
#nav li { margin:10px 0 10px 10px }
#nav li.about, #nav li.contact {float:right;margin:10px 10px 10px 0}
I have had a play with the code for the last hour or so, trying to understand it, I found by playing with these attributes I could space them out in different ways.
There was also a typo in my code and this rule should be like this:
Code:
.container:after, #nav:after {/clear floats/
content:“”;
clear:both;
display:block;
height:0;
visibility:hidden;
}
In this example of code I see you have added the : to the after what does the element after represent? I understand you said this allows me to put a border around the whole #nav area…is that correct?
Yes you can do it with CSS and should never use JS for simple rollovers. You use a background image and then change the background image on hover - although this is usually better done with sprites…
Ah ok, I never knew that JS shouldn’t be used for rollovers, as Dreamweaver does it I just thought it was the norm, now I know the right way I have had a good look at this and get the feeling for how the rollover images work in this way (using css). The only thing that has thrown me is the use of span tags in the images, is this something to do with the rollover images working?
I will also have a look at sprites and how they work.
Using lists looks like a great way to layout this grid like items, and i understand its the best way to gorup images that are similar. Thanks for the help on this, its explained perfectly- even for a newbie like myself
Thanks again! :tup:
Hi,
In this example of code I see you have added the : to the after what does the element after represent? I understand you said this allows me to put a border around the whole #nav area…is that correct?
Its a float containing technique that use the [URL=“http://reference.sitepoint.com/css/pseudoelement-after”]pseudo element :after and applies generated content after the content in that element and then uses the generated content to clear the floats and regain the flow of the page. Without it the parent would have no height as floats are removed from the flow.
The only thing that has thrown me is the use of span tags in the images, is this something to do with the rollover images working?
That is the Gilder/Levin image replacement technique I linked to in my original post. The span holds the actual image and it is placed on top of the text to hide it. This ensures that screen readers and search engines can see real text and should image be missing or turned off you still get the text. If css is turned off you still get text as well so its a win win technique. It can’t be used for transparent images though.
I loaded the over states of the image into the list element to pre-load them and then hid them by putting the normal image on top. Images only get loaded when they are called for on the page so hover effects would have a delay if you didn’t pre-load in some way. Sprites get over this also without the need for extra css as the normal image actually contains the over image as well except that you just can’t see it until you change the background-position on hover. Nothing extra needs to be loaded…
Thanks for the help originally on this but I am now having another problem!
I am having a problem with the layout of my navigation area on my page at www.neverup-neverin.com
As you can see the navigation block labelled “Prices” is overlapping the text. Now I can change the margin to these values:
#nav li { margin:5px 0 } to #nav li { margin: 30px 0 }
This solves the problem but then creates a large margin between all of the elements. I want to be able to just set the top margin to essentially “shift” the whole list down, but keep just a 5px margin between the other items, hope this makes sense
Thanks in advance
Setting heights on anything with text in it is a bad idea—for this very reason. Remove the height from here and all will be well.
#welcome {
float: left;
[COLOR="#FF0000"]height: 260px;[/COLOR]
width: 490px;
margin-top: 5px;
}
Thanks I have removed that line of code but it has thrown the whole #nav class out now?
Ideally, you would have wrapped those two floated items in a container, so remember that in future. A way to deal with it just will CSS is to add the code in red:
#nav {
margin: 4px 0 0 0;
padding: 0;
list-style: none;
zoom: 1.0;
[COLOR="#FF0000"]clear: both;[/COLOR]
}
Thanks for that ralp.m
Which two items are you referring to when you say the two floated items?
Also what does the clear:both code do in this instance, is there a simple explanation or a link where I can learn?
Thanks for your patience, my knowledge of css is limited at the moment
I meant the welcome and youtube divs. Because they are floated, they are somewhat taken out of the flow of elements. So the top margin on the div below them can’t push off them, and slips up underneath them instead. Putting clear: both on the div below tells it to keep away from the floated items above, but generally a better approach is to wrap the floated items in their own div and set that div to overflow: hidden, so that the container wraps around those floated items. Then you won’t get any surprises with content that follows the floated items, like you were experiencing.
Thanks for that ralph.m I understand it now, will take this advice forward into my next designs