oliwb
|
| posted on 5/1/11 at 10:31 PM |
|
|
Dreamweaver Spry Menu Bar Problems....
Hoping someone will know how to help! Take a look at:
http://www.kushclothing.co.uk/blog.php
I am trying to create a spry menu bar to the right of our logo. If I use a table as is presently shown the content below it starts at the end of the
menu bar when in design view in CS3 - ie. there is a big gap between the collapsed menu and the home link (this goes away when you hover over one of
the menu items and uncollapse it since it extends to fill this space.
If I simply place the menu bar to the right of the image (ie. in design view cursor click immediately to the right and insert, the menu bar is placed
underneath the logo and aligned to the left of the page. I understand that I can pad this out to the right using margins but this then cocks up all
the content underneath and still leaves the menu bar hanging about underneath the logo. I'm sure there must be a simple CSS rule to change this
but it's proving to be a nightmare! Any help much appreciated! I eventually want to end up with a blank template containing the java scripts
to run google checkout, the logo and spry bar so that I can add to the content. have a look at http://www.kushclothing.co.uk to have a look at the
layout I want (I basically want the same but with a spry men bar rather than images that form links.....
Please help!
Oli.
If your not living life on the edge you're taking up too much room!
|
|
|
|
|
m8kwr
|
| posted on 6/1/11 at 08:30 AM |
|
|
I would use the the display and float css properties.
But you would then need to make sure all the rest of the div, tables etc
but here is something i put together for you
Insert this before the head tag
<style media="all" type="text/css">@import "menu/menu_style.css";</style>
insert this where you want it - then you can mess about with the css code at the bottom to get the design right.
<div class="menu">
<ul>
<li><a id="current" href="" target="_self" >Clothes</a>
<ul>
<li><a href="http://www.kushclothing.co.uk/Products/Mens/mens_products.html"
target="_self">Men</a></li>
<li><a href="http://www.kushclothing.co.uk/Products/Womens/womens_products.html"
target="_self">Women</a></li>
<li><a href="http://www.kushclothing.co.uk/Products/Clearance/clearance_products.html"
target="_self">Clearance</a></li>
</ul>
</li>
<li><a href="http://www.kushclothing.co.uk/about_us.html" target="_self" >About Us</a>
</li>
<li><a href="http://kushclothing.blogspot.com/" target="_self" >Blog</a>
</li>
<li><a href="http://www.kushclothing.co.uk/contact_us.html" target="_self" >Contact Us</a>
</li>
</ul>
</div>
######################
CSS File
Create a folder called menu, then call the css file "menu_style.css"
###############
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background-position: left top;
background: left
top;
height: 43px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
border-left: 2px solid #0079b2;
border-right: 2px solid #0079b2;
border-bottom: 2px solid #0079b2;
display: none;
height: auto;
filter: alpha(opacity=95);
opacity: 0.95;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background-position: left top;
background: left
top;
color: #000000;
}
l(images/current-bg.gif) top left repeat-x;
nu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
####################
If there is anything else then let me know.
|
|
|
m8kwr
|
| posted on 6/1/11 at 08:57 AM |
|
|
You could also still use your present images, and then even create some more for the drop down menu.
If you want to use this method, and do not have the time to sort it out, then just me know it would only take me about 10 minutes to redo all the html
and css code.
|
|
|
designer
|
| posted on 6/1/11 at 09:36 AM |
|
|
Download the free trial on WYSIWYG and give it a try.
It's so easy to do a sight, and if you buy it, it's cheap.
|
|
|
