CSS Rollover question
Hi,
I've created a menu using CSS that mkaes a nice rollover.
The thing is - I can't figure ot how to close the gap. I want each
button to but up to it's neighbor:
http://www.daveblaker.com/rapidtest
I'm thinking it's got something to do with the DIV property,
but for the life of me, I can't seem to fix it. I also tried some
other CSS using the UL tag with the same frutrating result. Any
help would be appreciated.
Here's the CSS (below it is the html):
#topNav {
font-family:arial,sans-serif;
font-weight:normal;
font-size:9px;
background:#FFFFFF;
margin: 0px;
padding: 0px;
.topNavLink a {
color:#fff;
text-decoration:none;
font-size:9px;
line-height: 19px;
display:block;
background:url(../images/nav.jpg);
height: 17px;
width: 133px;
text-align: center;
.topNavLink a:hover {
color:#3d140c;
text-decoration:none;
background:url(../images/navON.jpg);
line-height: 19px;
<table width="750" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#BCBCBC"
class="header_left"> </td>
<td width="650" class="header"> </td>
</tr>
<tr>
<td><table border="0" cellpadding="0"
cellspacing="0">
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
The gap is caused by the margin-bottom: 6px; on your a:link
css.
a:link {
color: #2c3379;
text-decoration: none;
MARGIN-BOTTOM: 6px;
DaveB444 wrote:
> Hi,
> I've created a menu using CSS that mkaes a nice
rollover. The thing is - I
> can't figure ot how to close the gap. I want each button
to but up to it's
> neighbor:
http://www.daveblaker.com/rapidtest
>
> I'm thinking it's got something to do with the DIV
property, but for the life
> of me, I can't seem to fix it. I also tried some other
CSS using the UL tag
> with the same frutrating result. Any help would be
appreciated.
>
> Here's the CSS (below it is the html):
>
> #topNav {
> font-family:arial,sans-serif;
> font-weight:normal;
> font-size:9px;
> background:#FFFFFF;
> margin: 0px;
> padding: 0px;
> }
>
>
> .topNavLink a {
> color:#fff;
> text-decoration:none;
> font-size:9px;
> line-height: 19px;
> display:block;
> background:url(../images/nav.jpg);
> height: 17px;
> width: 133px;
> text-align: center;
>
> }
> .topNavLink a:hover {
> color:#3d140c;
> text-decoration:none;
> background:url(../images/navON.jpg);
> line-height: 19px;
>
>
>
>
> <table width="750" border="0" cellspacing="0"
cellpadding="0">
> <tr>
> <td bgcolor="#BCBCBC"
class="header_left"> </td>
> <td width="650"
class="header"> </td>
> </tr>
> <tr>
> <td><table border="0" cellpadding="0"
cellspacing="0">
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> </table></td>
> <td> </td>
> </tr>
> <tr>
> <td> </td>
> <td> </td>
> </tr>
> </table>
>
Similar Messages
-
Trifecta CSS rollover question
Hi Guys
I am currently using Flash buttons and would like to replace
them using trifecta CSS rollover effects. I have the buttons and
the over buttons in my images folder but the code I have only seems
to require the over button URL, how can i adapt this code to use
two images?
Code entered into CSS:
.cssnav
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 44px;
margin: 0;
padding: 0;
.cssnav a
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: left;
color: black;
text-decoration: none;
.cssnav img
width: 211px;
height: 44px;
border: 0
* html a:hover
visibility:visible
.cssnav a:hover img
visibility:hidden
.cssnav span
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
Text
Code entered into html:
<div class="cssnav">
<a href="
http://www.URL.com"><img
src="downbtn.jpg" alt="Alternative text" /><span>your
keyword</span></a>
</div>
downbtn.jpgYour code is a bit strange/voluminous. Consider my comments
shown below.
.cssnav /* why a class and not an ID? */
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
/* why display:block on an element that is already a block
tag? */
width: 211px;
height: 44px;
margin: 0;
padding: 0;
.cssnav a
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
/* why redundant styles? */
float: left;
color: black;
/* why redundant styles? */
text-decoration: none;
.cssnav img
width: 211px;
height: 44px;
border: 0
* html a:hover
visibility:visible
/* why this rule at all? */
.cssnav a:hover img
visibility:hidden
.cssnav span
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
/* why this style when it will be the default? */
/* try adding this rule */
.cssnav a:hover
background-image:url(overbtn.jpg);
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Mikes1471" <[email protected]> wrote in
message
news:[email protected]...
> Hi Guys
>
> I am currently using Flash buttons and would like to
replace them using
> trifecta CSS rollover effects. I have the buttons and
the over buttons in
> my
> images folder but the code I have only seems to require
the over button
> URL,
> how can i adapt this code to use two images?
>
> Code entered into CSS:
>
> .cssnav
> {
> position: relative;
> font-family: arial, helvetica, sans-serif;
> background: url(overbtn.jpg) no-repeat;
> white-space: nowrap;
> display: block;
> width: 211px;
> height: 44px;
> margin: 0;
> padding: 0;
> }
>
> .cssnav a
> {
> display: block;
> color: #000000;
> font-size: 11px;
> width: 211px;
> height: 44px;
> display: block;
> float: left;
> color: black;
> text-decoration: none;
> }
>
> .cssnav img
> {
> width: 211px;
> height: 44px;
> border: 0
> }
>
> * html a:hover
> {
> visibility:visible
> }
>
> .cssnav a:hover img
> {
> visibility:hidden
> }
>
> .cssnav span
> {
> position: absolute;
> left: 35px;
> top: 15px;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> }
>
>
Text
>
> Code entered into html:
>
> <div class="cssnav">
> <a href="
http://www.URL.com"><img
src="downbtn.jpg" alt="Alternative text"
> /><span>your keyword</span></a>
> </div>
>
>
>
downbtn.jpg
> -
Hello,
So I've been playing with muse since the beginning basically. A feature that would be greatly appreciated by me and probably the whole community would be CSS rollover effects. I know that there's states and all that, but I feel like that just uhhh kind of dull in a way. They work but there's only so much you can do. I know you can kind of make something in edge animate but that can get complicated for those who are not familiar and frankly uncomfortably with code (like myself). So I'm wondering in the next update if the Muse team can Add some sort of preset of CSS rollover effects to Muse.
For example you would be able to make a menu or a gallery, Then you could click the thing you wanted to add the effect to, then could select what style of effect you wanted. If that makes sense..I'm not the greatest at explaing things via type.
http://thecodeplayer.com/walkthrough/simple-hover-effects-with-css3-filters <----- That is just an example of photo/gallerly effects that would be sweet if Muse could implimnet. As of now i cant find a good site for text rollover effects.
Cheers
-BenI do not understand what you mean with "the rollover will extend the full width of the background"
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25 -
CSS Rollover Menu with Images and Current Page Indicator
Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Some nagging CSS image rollover questions
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
<li><a href="Contact_Us.htm">Contact</a></li>
<li><a href="Profiles.htm">Profiles</a></li>
<li><a href="Catalogue.htm">Songs</a></li>
<li><a href="BBL.htm">BBL Label</a></li>
<li><a href="Jazz_links.htm">Links</a></li>
</ul>
</div>
</body>
</html> -
Basic CSS Functionality Questions
Hi,
I have a CSS 11501 loaner on the way from Cisco, but was hoping to ask a few questions ahead of time. I am relatively new to this, so bear with me.
I have three offices connected via a VPN between two pix devices. Local users and anonymous web traffic all funnels through the remote office. I am hoping I can incorporate a CSS box to direct traffic (via a VPN to another pix) to a third office in the event the www server at the main office is not reachable, but return to the first office when it is back online.
I am a little confused by VIP. Right now, my domain name resolves to an IP address on the outside of my pix which NATs and sends the request on to my web server. If the CSS is behind it, do I create a VIP that maps to the actual IP of the www server, and have the pix send traffic to the VIP?
I have read the PDFs found online, but am still a little foggy.
Thanks,
JMthe Pix will have to send the traffic to the VIP.
The VIP should be an address existing only on the CSS and that the rest of your network knows how to reach.
The CSS will then nat to the real server ip.
Gilles. -
Hi guys,
Firstly a very Merry Christmas to you all !
I'm just getting to grips with converting all the text on my
site to CSS and have a quick question.
On some of my pages I add an 'Also see' links box aligned to
the right - it's a CSS div tag thingy someone kindly talked me
through once. All of my pages are built from a template with an
editable region.
My question is, can I add this box (perhaps with a standard
'Also check out' title and then spaces for my links) at the
template level? This will save me having to go to Insert>Layout
Objects>DivTag on every page. I've tried simply adding this to
the editable region of the template but it simply pushed the
editable region box over to the right and then didn't appear on my
pages
Also, the links box would ideally appear about half way down
my pages on the right...
Hope you can help, many thanks in advance!
James
Here's an example page where I have manually added my link
box on the right of the page...
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.htmlYour CSS link implies that the CSS file is in the Templates
folder. You
shouldn't have anything there other than the template (dwt)
files
themselves. Please move it out to any other location in your
site.
<link href="../../Templates/Box.css" rel="stylesheet"
type="text/css">
Changes made to template editable regions would not propagate
to existing
child pages - that's why you aren't seeing that addition in
them....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JamesFryer" <[email protected]> wrote in
message
news:[email protected]...
> Hi guys,
>
> Firstly a very Merry Christmas to you all !
>
> I'm just getting to grips with converting all the text
on my site to CSS
> and
> have a quick question.
>
> On some of my pages I add an 'Also see' links box
aligned to the right -
> it's
> a CSS div tag thingy someone kindly talked me through
once. All of my
> pages are
> built from a template with an editable region.
>
> My question is, can I add this box (perhaps with a
standard 'Also check
> out'
> title and then spaces for my links) at the template
level? This will save
> me
> having to go to Insert>Layout Objects>DivTag on
every page. I've tried
> simply
> adding this to the editable region of the template but
it simply pushed
> the
> editable region box over to the right and then didn't
appear on my pages
>
>
> Also, the links box would ideally appear about half way
down my pages on
> the
> right...
>
> Hope you can help, many thanks in advance!
>
> James
>
> Here's an example page where I have manually added my
link box on the
> right of
> the page...
>
http://www.fyrne.com/james_journalism/Pages/Mosaic_of_the_med.html
> -
CSS layout question regarding browser sizing
Hi,
Basically I want the basis of my site to be - A header, Main content with a background image, A Footer.
I'm having problems however, I can't seem to get my footer to position where I want it i.e. at the bottom of the browser window at all times. I'm doing it as an AP div and how it should work is that it's fixed at the bottom of the page and then if the user resizes their browser in the y direction the footer moves up with it, over the top of the main content (but not the header which will have a higher z-index).
The way I THOUGHT to do it was to firstly create a div tag for the whole page (780 pixels wide, auto left and right margins, auto height) and then inside that put my ap div header fixed height at the top and have another ap div as the footer, fixed height and tell it to position 0 pixels from the bottom. However this doesn't seem to do the trick, I'm sure I'm missing something really really simple. Anyone who's vaguely familiar with the program will be able to answer this I'm sure. If my question isn't clear please let me know and I'll rephrase,
TaThere is no reason to use APDivs for such a simple layout. Default CSS positioning (which is no positioning at all) is typically all you need for most layouts. Build your HTML markup logically from top to bottom of page and your footer will naturally appear at page bottom.
Live Demo (view page source to see the code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Or, for a Sticky Footer using Fixed positioning:
http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Only making baby steps in CSS still but I am learning a lot. Here's a link to the page I am trying to create: http://www3.telus.net/~jessum/details_layout.html
Here's what I have managed to create so far: http://www3.telus.net/~jessum/details.html
When explaining any steps please explain it using Dreamweaver. I will be looking in the code to see how it all works but I want to be able to get proficient using Dreamweaver so I can see how things flow etc. before I try and hand code.
Questions
1. Is it a good practice to use a "container" to hold all of the div's or is it better to start by adding a header without a container?
2. How can I centre a div in the page?
I read that to align the div so it's "centred' in the page I can use: margin: auto;
but I'm not sure how to do this. Please explain.
3. How do I remove the space around the "container"? I've set the margin and padding to: "0" but the space is still there.
Thanksosgood_ wrote:
Not sure where this notion of using the body as a container came from but for years a wrapper or container was considered standard practice.
The idea is being promoted by several of the most active and knowledgeable members of this forum. I think the idea first came from Altruistic Gramps, and I remember debating the issue with him about a year ago. It has also been picked up enthusiastically by Murray, and I've seen Nancy O suggest the same idea.
I've been doing a lot of research into CSS3 recently, and discovered that the Borders and Backgrounds module specifically advises against styling the <html> element (http://www.w3.org/TR/css3-background/#special-backgrounds). It doesn't give a reason for this recommendation.
I suppose the idea of giving the body a width instead of using a container might come from the HTML5 definition of the body as representing the main content of the document (http://dev.w3.org/html5/spec/the-body-element.html#the-body-element).
I suspect that this is likely to develop into the same type of fruitless argument as we had several years ago about the "superiority" of ems over pixels. Adding a single <div> to act as the container or wrapper for the content doesn't strike me as being less efficient. It also has the advantage of avoiding styling the <html> element. -
How to do CSS Rollover Text Links in Muse?
In Dreamweaver, we have to the ability to apply CSS styles to text links in order to make it behave like a rollover (the color changes on mouseover, etc.). How do we do this in Muse? Kind regards-
(EDIT): Have a look at the menus on Adobe's main website for an idea of what I want to do.Google "Adobe Muse Hyperlink Styles" or see threads such as How can I change Hyperlink text styles?
-
I have a floor plan of a shopping center with 24 rollover buttons. Each button has been sliced and linked to a frame (swap image) that shows the facade of a store. All photos (24 in all) preside in the same location on the canvas. Here is my problem, when previewing, only ten of the buttons work. No matter how I arrange and re-arrange behaviors, only ten buttons will link to the photos. I have tried this several times and the result is the same. Does Fireworks place a limit on the number of disjointed rollovers? I am using an older version (mx)...does anyone know if a later version fixed this? Any help is certainly appreciated!
Hi Joyce,
I spent some time playing with a practice file this morning and everthing seems to work okay now, so it was something I did wrong. Thanks so much for your insight and advice.
I do have one more question. On the attached file, which is the practice file I mentioned above, I want to form a second target to a trigger. In my file, I inserted another slice and I linked the frame named SubLink Number 1 to trigger number 1. My objective is to have the sublink L1 appear only when targeted image number 1 is triggered. In the real world, this sublink would be either detailed pictures or text describing the original target scene when triggered. When I proceeded to link Button number one to the sublink, it worked fine, but it also appears when I pressed any of the other buttons...which is not a desirable event. What am I missing?
Thanks,
Bob -
This should be a quick one - I have just added in some links to the other countries on the page below. Basically all the links under the main Botswana image on the left hand side.
Trouble is, that they have knocked the second row of lodges down to their right (this is how they should appear: http://www.goodsafariguide.com/botswana/index.php)
I thought the culprit might be a clear:both; in the #outerWrapper #contentWrapper #content #row_two rule in the botswana_layout.css file, but apparently not.
If anyone could quickly spot how to fix this that would be great.
The page is here:
http://www.goodsafariguide.com/botswana/botswana.php
Thank you!Good news with the solution!
Iain71 wrote:
So its all looking as it should now:
http://www.goodsafariguide.com/botswana/botswana3.php
Its interesting that you mention the <a href="someurl.php"><div>Some content</div></a> thing. Although it seems to work, it wa something I wasn't entirely convinced was technically correct. I'm not sure how else you would do that though, and it seems a fairly common thing on sites (if not achieved the same way), ie having a large area that acts as a link. Maybe it should be contained in an outer DIV.
Thanks again for your help.
As I understand it, strictly speaking a <div> cannot be a link so, it should not be wrapped in an anchor tag. I think it has something to do with the fact that a <div> is a block level element and <a> is in line. This link http://htmlhelp.com/reference/wilbur/special/a.html is a reference for <a> it lists what other elements it can occur in and what it can contain. An <a> can be placed inside a <div> but not the other way around. Having said that, your use of the two elements kind of proves that they work but then you can fix wood together with nails and screws but some situations call for one or the other! Reading up on this, I learn that it's different now in HTML5 but then I imagine, that was done to confuse me!
The way I work out a page these days is based on my simple understanding of semantic code which for me means that the best element to use will always be the one that was intended for that job. The most obvious are <ul> and <li> for lists and <p> for a paragraph. I suppose <head> and <body> give even stronger clues. I also understand that search engines and in particular, Google, appreciate the proper use of these elements when pages are crawled. I know that SEO is a dark art but it kind of makes sense that a stupid robot will understand only the information is sees. It knows a list is a list but it doesn't know that a div is a list.
I have had a go at building your box of images using Dreamweaver Javascript rollover and the list elements. It's quick and dirty and the javascript makes it look more complicated than it is. However, if you compare my code with yours, I think that you will agree that my alternative is more straight forward and easier to read.
One other thing about this idea is that but putting your image in the page, you can get a bit more content in there with your alt="" and title"" attributes. At the moment, your option is a string of content-less divs.
martcol.co.uk/test/africa.html
Regards
Martin
You have to bear in mind that I am a serious hobbyist web developer who trys his hardest understand this shizzle. -
Hi Guys
I am looking at adding an image rollover to some links on my HTML email, i have read alot on using css but am sure its not supported unless it's inline. my coding knowlege limited so i may not be fully understanding the expliantions given.
basically is there anyway to add an image rollover without using css?
Thanks guys n girls
DeanWith the exception of GMail, style rules are permitted in the head element, see.
Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail ...see -
Beginners CSS layout question - expanding a layer and not overlapping another
Having got well and truly fed up of using tables to layout
pages I am trying to gem up on CSS layer based layout. All well and
good but despite the various tutorials I can't find an answer to
this question...
Q. I have a layout with layers to make a three column layout,
however, I want to have a footer section at the bottom of the page
that runs the same width as the three columns (you can see my WIP
example here
http://www.spiralfilm.com/clients/broadoak/index_css.html
). Problem is, as the centre section expands with more content, how
do I make that section expand and not overrun the current footer
section? I want it to expand like a table does and push the footer
down.
I'm sure it is simple but I just can't get my head around it!
Thanks in advance for any pointers...> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
Yes, it would be one way to do that. A div tag is simply a
container for
other HTML elements, like a table. The problem you are having
comes with
using DW 'layers' to contain text. As Thierry suggested, this
is because
absolutely positioned elements (i.e., DW 'layers') are
removed from the
normal flow, preventing them from interacting with adjacent
page elements -
this means that when the text inside them expands, it will
begin to overlap
other content. See my demonstration of this here -
http://www.great-web-sights.com/g_layers-overlap.asp
Try these tutorials -
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Benfrain" <[email protected]> wrote in
message
news:elgpba$qds$[email protected]..
> Hi, thanks for those links. Sorry to confess they are
all a little beyond
> my
> knowledge. I will read on and see if I can understand
them.
>
> However, is the use of div tags the way to seperate
blocks of content? The
> DW8
> help file seems a little unclear on this?
> -
Adobe Flash CS3 Rollover Question
This should be a relatively simple question. I am using Adobe
Flash CS3. I created an image in photoshop with layers and imported
it in to flash. Basically the image I have is a map with a bunch of
different states and my goal if when a user rolls over a state I
want to state to display a color. As many of you know states are
not in perfect rectangles, so when I do this click on a layer,
convert to a symbol, then change the rollover state to the way I
want it, the active rollover "hotspot" overlaps with other states
because the layer outline overlaps with the other layers. Therefore
I can not produce the ability to click or rollover neighboring
states. Basically I need to use some type of hotspot function or
tool to get rid of the default rectangle that revolves around the
state.
Please give me specific directions on how to change the layer
shape to conform more with the actual layer rather than a rectangle
surrounding the layer.
Please let me know if you have any questions,
NeilBookmark and download Flash from here, DO NOT trust any website telling you to install anything or follow their links.
Flash update
http://get.adobe.com/flashplayer/
Silverlight update
http://www.microsoft.com/silverlight/get-started/install/default.aspx
There is a FlashBack trojan making the rounds which tries to con people into installing it by looking like it's the real thing.
Make sure your Flash (and Silverlight) is current by running these checks
http://flashbuilder.eu/flash-player-version.html
https://www.mozilla.org/en-US/plugincheck/
You Mac likely will come across sites and content that won't play in Quicktime or in your web browser unless you install additonal codecs
You can get them here
Perian
http://perian.org/
VLC
http://www.videolan.org/vlc/download-macosx.html
Flip4Mac $29
http://www.telestream.net/flip4mac-wmv/overview.htm
How to install
When you click a link, a download of the installer file occurs to your Downloads Folder usually located next to your Trash Can or in your Users Folder.
Open the folder and double click (or File: Open) the download and icon can appear on your desktop which you open and inside is a installer package which you double click on to launch the installer.
OS X will check the download to make sure you intended to start it and that it's not malware it knows about.
Follow the installer instructions to install the software onto your computer and quit when finished.
Some require the browsers to be closed first, others require the machine to be restarted to enable the software.
Once the install is completed, remove any and all downloads from your Download folder, it's safer to keep this folder empty so you can keep track of what appears in there.
Drive by downloads of malware can occur and reside in the Downloads folder, mixing in with files residing there and await your click to install.
Maybe you are looking for
-
Query to identify full table scans in progress
Does anybody have a query that would help me identify: 1) Full table scans in progress. 2) Long running queries in progress. Thanks, Thomas null
-
Error ORA-01790: for INSERT in master detail form
Gidday; I get the error message 'ORA-01790: expression must have same datatype as corresponding expression' when I attempt an insert operation in the detail region of a master/detail form. I have checked previous entries of this error I could find -
-
6D raw files, can't download in Lightroom 3
Downloaded LR 4 and still can't download files. Saw thread from back in December, but didn't offer any help.
-
Win 7 Won't Load on Toshiba Satellite C655 S5060
Okay, so I'm not sure what happened. Computer was unresponsive so I forced a hard shutdown. After that, it won't load Windows 7 and gives me 2 options: Launch windows repair or start win normal. The second option, start windows normally, takes a fe
-
How can I write this SQL?
the statement have the question: stxh-tdname length 70 itab-vbeln length 10 select tdobject into table it_stxh from stxh for all entries in itab where ( tdid = 'Z006' and tdspras = 'E' and tdname+0(10) = itab-vbeln