-
1. Re: List is disappearing
Jon Fritz II Mar 15, 2013 8:16 AM (in response to matthew stuart)This is invalid code and "could" be making DW go nutty...
<ul>
<a href="#"><li id="navhome"></li></a>
<a href="#"><li id="navabout"></li></a>
<a href="#"><li id="navequipment"></li></a>
</ul>
It should be...
<ul>
<li id="navhome"><a href="#"></a></li>
<li id="navabout"><a href="#"></a></li>
<li id="navequipment"><a href="#"></a></li>
</ul>
EDIT: It's really hard to say what exactly is causing the issue without seeing all of your code (could you post a link?), but invalid html is often the culprit in display issues.
-
2. Re: List is disappearing
osgood_ Mar 15, 2013 8:17 AM (in response to matthew stuart)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
float: left;
}
#navhome a {
background-image: url(images/btn-nav-home.png);
background-repeat: no-repeat;
height: 88px;
width: 66px;
display: block;
}
#navhome a:hover {
background-image: url(images/btn-nav-home1.png);
}
#navabout a {
background-image: url(images/btn-nav-about.png);
background-repeat: no-repeat;
height: 88px;
width: 66px;
}
#navabout a:hover {
background-image: url(images/btn-nav-about1.png);
}
</style>
</head>
<body>
<ul>
<li id="navhome"><a href="#">Link One</a></li>
<li id="navabout"><a href="#">Link Two</a></li>
<li id="navequipment"><a href="#">Link Three</a></li>
</ul>
</body>
</html>
-
3. Re: List is disappearing
Nancy O. Mar 15, 2013 9:56 AM (in response to osgood_)Actually ID should be applied to the anchors; not the list items.
<ul>
<li><a id="navhome" href="#">Link One</a></li>
<li><a id="navabout" href="#">Link Two</a></li>
<li><a id="navequipment" href="#">Link Three</a></li>
</ul>
Nancy O.
-
4. Re: List is disappearing
osgood_ Mar 15, 2013 10:12 AM (in response to Nancy O.)Nancy O. wrote:
Actually ID should be applied to the anchors; not the list items.
Nancy O.
Wouldn't work with this css structure:
#navhome a
Might do with this
a #navhome
But I dont know as I never use that set up....the way I've shown it always works without failure for me.
-
5. Re: List is disappearing
matthew stuart Mar 15, 2013 5:21 PM (in response to Nancy O.)Oh noooooo... I've got it working on the <li... I have just tried it on the <a, however it fell to bits again!
I've switched about the #nav... and the 'a' to see if it makes a difference when applying it to the <a, but no joy. Here's the code I have that works with the <li:
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
float: left; /* this helped a lot - thanks osgood */
padding: 0 3.7% 20px 3.7%;
}
#navhome a {
background-image: url(images/btn-nav-home.png);
background-repeat: no-repeat;
height: 88px;
width: 61px;
list-style-type: none;
display: block;
}
#navhome a:hover {
background-image: url(images/btn-nav-home1.png);
}
#navabout a {
background-image: url(images/btn-nav-about.png);
background-repeat: no-repeat;
height: 88px;
width: 66px;
list-style-type: none;
display: block;
}
#navabout a:hover {
background-image: url(images/btn-nav-about1.png);
}
</style>
<ul>
<li id="navhome"><a href="#"></a></li>
<li id="navabout"><a href="#"></a></li>
</ul>
-
6. Re: List is disappearing
matthew stuart Mar 15, 2013 6:50 PM (in response to matthew stuart)OK, so the above code has created another issue for me where the menu was centered on the page, but now it will only range left. Here is the page that it should look like:
You'll notice with my swap image behaviour, as the page width reduces, the nav bar wraps around on to a second line and centres. How can I get it centered again?
Thanks.
CSS can really be more hassle than it's worth sometimes.
-
-
-
9. Re: List is disappearing
matthew stuart Mar 16, 2013 8:10 AM (in response to matthew stuart)I meant to say that what's on that domain is the swap image behaviour rather than the CSS version. I need the dev site to look correct for the client, that's why I pasted the code in this thread above.
Once again, thanks for your advice, I do appreciate it.
-
10. Re: List is disappearing
osgood_ Mar 16, 2013 11:41 AM (in response to matthew stuart)Does the below work for you? I'm not sure you'll see anything in design view. But it seems to work once viewed in a browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
text-align: center;
}
ul li {
list-style-type: none;
padding: 0 3.7% 20px 3.7%;
display: inline;
}
#navhome a {
background-image: url(images/btn-nav-home.png);
background-repeat: no-repeat;
background-color:#0F9;
height: 88px;
width: 61px;
display: inline-block;
}
#navhome a:hover {
background-image: url(images/btn-nav-home1.png);
}
#navabout a {
background-image: url(images/btn-nav-about.png);
background-repeat: no-repeat;
background-color:#9C0;
height: 88px;
width: 66px;
display: inline-block;
}
#navabout a:hover {
background-image: url(images/btn-nav-about1.png);
}
</style>
</head>
<body>
<ul>
<li id="navhome"><a href="#"></a></li>
<li id="navabout"><a href="#"></a></li>
</ul>
</body>
</html>



