dirtybirdsurf
03-25-2008, 08:18 PM
how can I add hotspots to my menu i created in a gif that is called in CSS?
here (http://www.dirtybirdsurf.com/test/index2.html)
here (http://www.dirtybirdsurf.com/test/index2.html)
Click to See Complete Forum and Search --> : adding hotspots to CSS
Centauri
03-25-2008, 08:45 PM
This can be done quite easily by converting the <a> links to blocks via a float, sizing them, and hiding the text with a negative text indent. The <li>s are then floated left with a right margin for spacing, and the <ul> can get a left padding for spacing (whilst adjusting the width to suit) :#navcontainer ul {
margin:0;
padding: 0;
padding-left: 42px;
width: 732px;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer li {
float: left;
list-style: none;
margin-right: 40px
}
#navcontainer a {
float: left;
height: 60px;
width: 102px;
text-indent: -999em;
}
#navcontainer a:hover {
}
margin:0;
padding: 0;
padding-left: 42px;
width: 732px;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer li {
float: left;
list-style: none;
margin-right: 40px
}
#navcontainer a {
float: left;
height: 60px;
width: 102px;
text-indent: -999em;
}
#navcontainer a:hover {
}
dirtybirdsurf
03-25-2008, 08:53 PM
how do change the <a> to blocks? sorry i am learning css
ray326
03-25-2008, 11:03 PM
Normally you'd use display:block but the float:left does that for you since blocks are the only thing you can float.
dirtybirdsurf
03-26-2008, 08:06 PM
still cant get it try the link above
Centauri
03-26-2008, 09:13 PM
Thats because you have got extra stuff in there causing problems. Remove ALL of your current styling for the navigation setup, and REPLACE it with what I posted above....
dirtybirdsurf
03-27-2008, 05:59 AM
you are amazing centauri! :D thanks
dirtybirdsurf
03-29-2008, 12:42 PM
centauri, it doesnt look right when i load it off my host. the graphics dont line up perfectly and there is an extra little piece of the nav container on the right hand side of it
WebJoel
03-29-2008, 05:26 PM
#navcontainer ul {
margin:0;
padding: 0;
padding-left: 42px;
width: 732px;
background: url("images/menu_bg.gif");
height:60px;
};
height:60px;
} total width is width + padding, so the width here is 774px. This appears to be the correct width to match the container of content..
Not sure what's going on here, but the background-image is being 'repeated'...
try changing this:background: url("images/menu_bg.gif"); to this:
background: url("images/menu_bg.gif") no-repeat; That will at least stop this 'repeat' that you see..
margin:0;
padding: 0;
padding-left: 42px;
width: 732px;
background: url("images/menu_bg.gif");
height:60px;
};
height:60px;
} total width is width + padding, so the width here is 774px. This appears to be the correct width to match the container of content..
Not sure what's going on here, but the background-image is being 'repeated'...
try changing this:background: url("images/menu_bg.gif"); to this:
background: url("images/menu_bg.gif") no-repeat; That will at least stop this 'repeat' that you see..
dirtybirdsurf
03-30-2008, 11:57 AM
thanks, the other problem is only in IE not in firefox. i cant figure it out
WebJoel
03-30-2008, 12:13 PM
thanks, the other problem is only in IE not in firefox. i cant figure it out Looks like default margin and/or padding. Add this as your first line in CSS:
* {margin:0; padding:0;}
This, the "universal selector", will remove default margin & padding from every element on the page (which is why you need to state this first).
This will only affect IE, as all other browsers do this by their default. Only IE adds margins & padding where it's not welcome.
This should clear it up.
Page is coming along great! Looks good! :)
* {margin:0; padding:0;}
This, the "universal selector", will remove default margin & padding from every element on the page (which is why you need to state this first).
This will only affect IE, as all other browsers do this by their default. Only IE adds margins & padding where it's not welcome.
This should clear it up.
Page is coming along great! Looks good! :)
dirtybirdsurf
03-30-2008, 03:59 PM
still not working, i added it as the first line then tried adding it to the HTML, body div but no luck. i gotta go outside and play for awhile my eyes hurt
WebJoel
03-30-2008, 04:36 PM
still not working, i added it as the first line then tried adding it to the HTML, body div but no luck. i gotta go outside and play for awhile my eyes hurt Got rid of the IE-conditional, removed some non-semantic spacer-paragraphs & incorrected nestings of same, got rid of a few deprecated tags (validated & corrected), and changed the width of the #footer to match width of content. Seems to be working / looking the same now for IE7 and Firefox 2.0.0.13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<!-- Title displayed in top of the webbrowser -->
<title>Dirty Bird Surfboards</title>
<!-- The file with the style sheet -->
<link href="http://www.dirtybirdsurf.com/test/style2.css" rel="stylesheet" type="text/css">
<base href="http://www.dirtybirdsurf.com/test/" />
</head>
<body>
<div id="container">
<div id="core_header"></div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
<li><a href="index2.html" title="Home">Home</a></li>
<li><a href="surfboards.html" title=
"Surfboards">Surfboards</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="links.html" title="Friends">Friends</a></li>
<li><a href="mailto:jay@dirtybirdsurf.com" title=
"Contact">Contact</a></li>
</ul>
</div>
</div>
<div id="core_right">
<div class="content-box">
<h3>News</h3>
</div>
<div class="content-box">
<h3>Current Conditions</h3>
<p><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','200','height','400','title','Buoy','src','Untitled-2','loop','false','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Untitled-2' ); //end AC code
</script><noscript><object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="200" height="400" title="Buoy"><param name="movie" value=
"Untitled-2.swf">
<param name="quality" value="high">
<param name="LOOP" value="false">
<embed src="Untitled-2.swf" width="200" height="400" loop="false"
quality="high" pluginspage=
"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"></object></noscript></p>
<center>
<p><img src=
"http://stormsurf.com/4cast/graphics/wna.ILM01.bull.4.png" alt=
"#########"></p>
</center>
<!-- End of content --></div>
</div>
</div>
<div id="footer2"> </div>
</div>
</div>
<div id="footer" style="width:758px;"> </div>
<br>
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code --><script language=
"JavaScript" src=
"http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"
type="text/javascript">
</script><script language="javascript" type="text/javascript">
geovisit();
</script><noscript><img src=
"http://visit.webhosting.yahoo.com/visit.gif?us1206908479" alt=
"setstats" border="0" width="1" height="1"></noscript>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<!-- Title displayed in top of the webbrowser -->
<title>Dirty Bird Surfboards</title>
<!-- The file with the style sheet -->
<link href="http://www.dirtybirdsurf.com/test/style2.css" rel="stylesheet" type="text/css">
<base href="http://www.dirtybirdsurf.com/test/" />
</head>
<body>
<div id="container">
<div id="core_header"></div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
<li><a href="index2.html" title="Home">Home</a></li>
<li><a href="surfboards.html" title=
"Surfboards">Surfboards</a></li>
<li><a href="photos.html" title="Photos">Photos</a></li>
<li><a href="links.html" title="Friends">Friends</a></li>
<li><a href="mailto:jay@dirtybirdsurf.com" title=
"Contact">Contact</a></li>
</ul>
</div>
</div>
<div id="core_right">
<div class="content-box">
<h3>News</h3>
</div>
<div class="content-box">
<h3>Current Conditions</h3>
<p><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','200','height','400','title','Buoy','src','Untitled-2','loop','false','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Untitled-2' ); //end AC code
</script><noscript><object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="200" height="400" title="Buoy"><param name="movie" value=
"Untitled-2.swf">
<param name="quality" value="high">
<param name="LOOP" value="false">
<embed src="Untitled-2.swf" width="200" height="400" loop="false"
quality="high" pluginspage=
"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"></object></noscript></p>
<center>
<p><img src=
"http://stormsurf.com/4cast/graphics/wna.ILM01.bull.4.png" alt=
"#########"></p>
</center>
<!-- End of content --></div>
</div>
</div>
<div id="footer2"> </div>
</div>
</div>
<div id="footer" style="width:758px;"> </div>
<br>
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code --><script language=
"JavaScript" src=
"http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"
type="text/javascript">
</script><script language="javascript" type="text/javascript">
geovisit();
</script><noscript><img src=
"http://visit.webhosting.yahoo.com/visit.gif?us1206908479" alt=
"setstats" border="0" width="1" height="1"></noscript>
</body>
</html>
Centauri
03-30-2008, 06:56 PM
This is quite interesting, and the repeated background image on the navigation is the clue - it should be the correct width. IE won't allow contents to overhang containers, but will force the container larger, and in this case something is forcing the <ul> wider, which in turn forces everything else including #container wider, which offsets it all from centre - the footer is actually in the right place, just that everything else is pushed left.
Not sure exactly why, but an inline display on the <li>s seems to cure the IE width problem:#navcontainer li {
float: left;
list-style: none;
margin-right: 40px;
display: inline;
}
Not sure exactly why, but an inline display on the <li>s seems to cure the IE width problem:#navcontainer li {
float: left;
list-style: none;
margin-right: 40px;
display: inline;
}
WebJoel
03-30-2008, 07:12 PM
Interesting, -I too had noticed a strange 'width' for the UL (added a border and saw it)... it started at the left-edge of my browser and stops on the right-edge of the UL as it should... I couldn't find the cause.
"display:inline;" on the "li" fixed this? hmm..
"display:inline;" on the "li" fixed this? hmm..
Centauri
03-30-2008, 07:59 PM
it started at the left-edge of my browser and stops on the right-edge of the UL as it should...
That is the negative text indent on the <a> tags - you also see that if you "Display Element Information" from the Webdeveloper toolbar. For some reason, IE seemed to be adding extra width for each <li>, increasing the width of the <ul> by about 18px, and the inline display seems to get rid of that.
That is the negative text indent on the <a> tags - you also see that if you "Display Element Information" from the Webdeveloper toolbar. For some reason, IE seemed to be adding extra width for each <li>, increasing the width of the <ul> by about 18px, and the inline display seems to get rid of that.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.