I am using dreamweaver at the moment and I have come to the point where I want to draw hotspots around certain areas of the image and use it as navigation. For example on the image below I want to be able to draw a hotspot around the “Home, Coaching, Prices, Testimonials” areas, but there seems to be a bug for drawing hotspots on items that are within divs.
How else could I do this in CSS, could it be done with a list?
Here is the image I am referring to:
Thanks in advance
edit: put the right image in
ontargett:
I am using dreamweaver at the moment and I have come to the point where I want to draw hotspots around certain areas of the image and use it as navigation. For example on the image below I want to be able to draw a hotspot around the “Home, Coaching, Prices, Testimonials” areas, but there seems to be a bug for drawing hotspots on items that are within divs.
How else could I do this in CSS, could it be done with a list?
Here is the image I am referring to:
Thanks in advance
[font=calibri]You’ve just got text with separators … why on earth would you ever even consider creating an image for that, and not using a list with text?
Very, very easy.
Something along the lines of
ul#navigation {list-style-type:none; padding-right:20px; background: url('dots.png') right;}
ul#navigation li {display:inline; padding-left:20px; background: url('dots.png') left;}
will do the trick. Obviously you’ll need to play around with the padding and margins to get it exactly as you want it.[/font]
I did think of this but just wanted to make sure it was the right way to go about it, thanks for your input will get on this now. There is also a logo to the left of it as show in the image below, would i put this in a separate div on the left?
Thanks in advance
ralphm
November 25, 2013, 11:24pm
4
Yes, that’s a pretty common way to do it.
PaulOB
November 26, 2013, 5:02pm
5
Yes just float the logo image container to the left but make sure you use alt attributes in the image or instead use the Gilder/levin image replacement method I mentioned in your other thread
Awesome thanks for the reply guys!
I have developed the menu using a ul and these are the results: www.neverup-neverin.com (ignore the logo, it is just a mock up for this purpose)
I would paste the code in here but don’t want to clog up the page, can anyone tell me how to embed the code, where scroll bars appear? I have seen this done on some other posts.
If anyone could have a look at the code of this webpage and suggest any corrections I could make with the ul at the top right I’d be really grateful!
Thanks in advance
ralphm
November 28, 2013, 1:20pm
8
There are various ways, but the easiest is to highlight your code and click the # in the editor tools above the post. Or you can just type [noparse]
[/noparse] tags around your content. If you click the Go Advanced button, there are more options, where you can highlight code as PHP, JS etc.
Francky
November 28, 2013, 2:30pm
9
The menu is fine already. The only thing: the items have a fixed width in px. If a visitor is scaling the font-size, the hovers don’t work anymore. You can avoid this by removing the width, and adding a padding L/R to the items, then it’s flexible:
#headnav li a {
...
/* width: 96px; */
padding: 0 5px;
}
=====
<div class="logo">
<a href="#"></a>
</div>
And the style:
.logo a {
height: 90px;
display: block;
}
The height is the same as the height of the logo-image, the display:block;
@ralph_m thanks for that.
Here is the code for the whole page then:
<!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>- Mark James Golf Coaching -</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:white;
color:#000;
}
.container {
width: 960px;
margin:auto;
}
.container:after, #nav:after {/*clear floats*/
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.header {
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;
}
#headnav {
list-style: none;
float: right;
margin-top: 10px;
}
#headnav li {
display: inline;
font-weight: bold;
float: left;
margin: 10px;
text-align:center;
}
#headnav li a {
text-decoration: none;
color: black;
display: block;
width: 96px;
}
#headnav li a:hover {
color: white;
background-color:black;
}
.logo {
background-image: url(images/mjlogo2.jpg);
width: 303px;
height: 91px;
float: left;
background-color:#666666;
margin-top: 8px auto;
}
/*The area that contains the 4 navigation widgets */
#nav {
margin:50px 0 0 0;
padding:0;
list-style:none;
zoom:1.0;
}
/* Below is code to change the size of the navigation images, the actual list elements, the links (a) and the rollover (span) */
#nav li, #nav li a, #nav li span {
float:left;
width:461px;
height:131px;
position:relative;
overflow:hidden;
cursor:pointer;
text-decoration:none;
}
/*Below is code to change margin of the images as a block*/
#nav li { margin: 5px 0 }
/*This make the about and contact widgets float right*/
#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;
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 class="logo"> </div><!--closing logo div-->
<div class="menu">
<ul id="headnav">
<li class="homehead"><a href="#">Home</a></li>
<li class="coachinghead"><a href="#">Coaching</a></li>
<li class="priceshead"><a href="#">Prices</a></li>
<li class="testimonialshead"><a href="#">Testimonials</a></li>
</ul>
</div><!--closing menu div-->
</div><!--Closing header -->
<div class="slideshow">
<!-- All these images are for the slideshow un through JS -->
<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>
Francky
November 28, 2013, 3:22pm
11
Again a crosspost in the same minute! #9 .
