SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Hotspots for images

    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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ontargett View Post
    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
    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
    Code css:
    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.

  3. #3
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ontargett View Post
    would i put this in a separate div on the left?
    Yes, that's a pretty common way to do it.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ontargett View Post
    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
    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

  6. #6
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome thanks for the reply guys!

  7. #7
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ontargett View Post
    can anyone tell me how to embed the code, where scroll bars appear?
    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 [code] [/code] tags around your content. If you click the Go Advanced button, there are more options, where you can highlight code as PHP, JS etc.

  9. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    #headnav li a {
        ...
    /*  width: 96px; */
        padding: 0 5px;
        }
    =====
    You can add a link to the logo with:
    HTML Code:
    <div class="logo">
        <a href="#"></a>
    </div>
    And the style:
    Code:
    .logo a {
        height: 90px;
        display: block;
        }
    The height is the same as the height of the logo-image, the display:block; is for "filling" the whole logo area with the link.

  10. #10
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m thanks for that.

    Here is the code for the whole page then:

    Code:
    <!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>

  11. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Again a crosspost in the same minute!
    See #9.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •