Log in

View Full Version : Help with DD CSS Wire Frame Menu please.


paulrichardson
06-14-2008, 02:52 PM
Hi Guys,

I'm new here and a CSS Virgin.:o

I've just got the Dynamic Drive CSS Wire Frame Menu from the CSS Library:-

http://www.dynamicdrive.com/style/csslibrary/item/wire-frame-menu/

It's a Vertical Menu and I've got it to work OK. It was dead easy and I've successfully changed some of the parameters to give me different colours and sizes, I love it.

What I'd like to do is create a matching Horizontal Menu but I can't make it work.

I think I need a Float Left somewhere, but I've tried putting it in different places but I cannot make it work.:confused:

I'll put the CSS below (I hope that's OK) so you can take a look at it.

Looking forward to your advice.

Regards,

Paul

<style type="text/css">

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}

</style>
chasery
06-14-2008, 04:59 PM
.wireframemenu li{
display: inline;
float: left;
padding: 0;
margin: 0;
}

Try adding that in right below the .wireframe ul{}, it should make all of the list items want to stay inline and keep them floating to the left.
paulrichardson
06-14-2008, 05:45 PM
Hi Chasery,

Many thanks for your reply.

I've tried your suggestion, but I still can't make it work.

Here's where I put your new bit (copied from my page):-

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu li{
display: inline;
float: left;
padding: 0;
margin: 0;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

In between the UL and the a

If it helps I've uploaded my test page so you can see the results:-

http://www.craftee.co.uk/cssmenu.html

Thanks again for your help, hope you can see what I've got wrong.

Regards,

Paul
chasery
06-14-2008, 06:29 PM
Hey there, sorry, didn't catch the set width on that containing div.

That should work for you, also, right now, it has a two pixel border on the bottom. I think its kind of stylish, what is causing it is your <ul> has a 1px border as well as any <a>'s. If you want just a 1px border all around, remove this bit of code:


border-bottom: 1px solid #C0C0C0;

From:


.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

Whole Document here, tested in ie6 and FF2:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">

.wireframemenu{
background-color: white;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu li{
border: 1px solid #C0C0C0;
display: inline;
float: left;
padding: 0;
margin: 0;
text-align: center;
width: 170px;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}

</style>



</head>

<body bgcolor="#FFFFFF" text="#000000">

<div class="wireframemenu">

<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>


</body>
</html>
chasery
06-14-2008, 06:35 PM
Also, I would recommend taking this to an external style sheet (style.css) if you plan on styling any thing else within your document.

You can load an external style sheet by adding this bit of code to the <head> section of your html document:


<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

And it would look something like this:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chasery.com // A portfolio dedicated to the work of Ryan Chase</title>
<meta name="Keywords" content="Art, Photography, Chase, Design, Web, CSS, Website, Coding, HTML, Photoshop, Illustrator, Flash, AI, PS, CS3, Adobe" />
<meta name="Description" content=" Web Portfolio of Ryan Chase - Web Developer and Graphic Designer" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>

Standard practice (I typically see this) is to create a css folder in the directory/folder that your html file sits in.

This is how the style sheet would look:


/* CSS Document */

/* General Styles */

.wireframemenu{
background-color: white;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu li{
border: 1px solid #C0C0C0;
display: inline;
float: left;
padding: 0;
margin: 0;
text-align: center;
width: 170px;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}
paulrichardson
06-14-2008, 07:59 PM
Hi Chasery,

Many, Many thanks for your comprehensive reply.

It works a treat now, well done, I've even got a horizontal and a vertical version working on the same page.

I do have another problem though, when I use exactly the same Styles on my existing page it goes wrong.

I've uploaded it for you.

http://www.craftee.co.uk/testmenustyle.html

As you can see the horizontal one reverts to vertical, there must be something on the rest of my page that it is reacting to, but I have no idea what it is.

If I asked really nicely, could you take a look.


I intended to create an external style sheet, one I'd got it working, but I will now be able to do it much easier thanks to your guide.:)

Looking forward to hearing from you.

Regards,

Paul
chasery
06-14-2008, 09:16 PM
No problem.

The issue here is your table for that header/nav area is set to a specific width. I believe 964px.

What you could do is take the set width(170px) on the <li> and either:

a. Make it a smaller length until they fit


.wireframemenu li{
border: 1px solid #C0C0C0;
display: inline;
float: left;
padding: 0;
margin: 0;
text-align: center;
width: 170px;
}

b. Set a margin on the <a> with margin: 0 10px 0 10px; the 10px can really change to either be larger or smaller if need be to fit all of those buttons in one line, you would then remove the width on the <li> all together.


.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

The first value in that margin statement gives a margin on the top and moves clockwise around, so the next number gives you the margin on the right, the next is the bottom, and the last is left.

That should fix your problem after you experiment a little with it.

The first way will keep the boxes all the same size, but it gives you a potential issue if the content within the <li> is too large, but if you figure it out right, all of the boxes will be uniform in size and be on one line. The second method is a more fluid and probably more accepted way of doing what it is we are trying to do. Instead of saying "This box is going to be this large, and all of the content has to fit into it!" we are saying "Well we will build this box around this content after we know how large the item really is!"
paulrichardson
06-15-2008, 06:48 PM
Once Again it's many thanks for your valuable assistance.

I've reduced the size of the Horizontal Menu, and increased the table width, but to start with it didn't help.

On careful examination of the Table Code I found the Following:-

</table>
<table width="751" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr align="center">
<td width="100" height="27">

The important bit being <td width="100" height="27">

I changed this so that the td width was the same as the table width (751) and it is now working as I had hoped, many thanks for your guidance.

http://www.craftee.co.uk/testmenustyle.html

I just have one more tiny question, even though the table holding the horizontal menu is set to align centre, as you can see, it is slightly off-set to the left. I have tried different settings, but cannot get it to sit in the middle.

Is this a CSS thing, or a Dreamweaver thing?

Regards,

Paul.

P.S.
I'll be making my Style external next, watch out for more questions He He.
chasery
06-15-2008, 08:41 PM
I believe if you put the margin on the containing div wireframemenu of margin: 0 auto; that should fix the centering issue. You can also try putting in that align: center;. That should center all of the children elements within that div. First one will center that containing div, the second will center the elements within. Either way I imagine would be fine.
paulrichardson
06-18-2008, 06:18 AM
Hi,

I'm so sorry to be a pain in the side, but I've tried the things you suggested to centre my Horizontal Menu, but it just ignores everything I try.

Here's the whole table as I have it now, with a Centre on the Table and in the Menu div:-

<table width="751" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr align="center">
<td width="751" height="27">
<div align="center" class="wireframemenuh">
<ul>
<li><a href="#" onclick="history.go(-1);return false;">BACK</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="allaboutus.html">ABOUT US</a></li>
<li><a href="help.html">HELP</a></li>
<li><a href="http://ww4.aitsafe.com/cf/review.cfm?userid=60124207&return=www.craftee.co.uk/index.html">CART</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="search.html">SEARCH</a></li>
</ul>
</div></td>
</tr>
</table>

And here's what it looks like:-

http://www.craftee.co.uk/testmenustyle.html

These things never seem to do what I expect.:confused:

Regards,

Paul
paulrichardson
06-20-2008, 07:49 AM
Hi,

By adjusting the dimensions of the Table, I've managed to get the Horizontal Menu to sit in the centre of the Page.

I've spotted another tiny imperfection, but this time it's on the Vertical Menu.

When you Hover over the elements, the Background colour changes, but it doesn't fill the entire box. It leaves a tiny gap at the Top.

I've tried experimenting with padding etc, but can't get rid of the gap.

Do you have any suggestions?

http://www.craftee.co.uk/testmenustyle.html

Regards,

Paul