This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > July 2005 > CSS DROP DOWNS
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| ash_designman 2005-07-17, 7:19 pm |
| HI,
I really need some help here, I have made this site
http://www.truedesigns.co.uk/test_a...ates/Master.htm (Not a .dwt file,
but a page that I made from the template and got it to work before it stoped)
So if you can help with why that is, that would be great. OR even better in
the long run tell me how to go about making a drop down using nothing but CSS
that would be great too.
2. When viewed in FireFox the alianment of the left thumb nails pannel does
not want to go to the top of the page.
Thanks
Ash
XTHML
<!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>
<title>Welcome to James Cooper Designs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../CSS/JC.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_0702165013_0) return;
window.mm_menu_0702165013_0 = new
Menu("root",100,30,"Arial, Helvetica,
sans-serif",18,"#FFFFFF","#990000","#009900","#006600","center","middle",3,0,500
,-5,7,true,true,true,0,false,false);
mm_menu_0702165013_0.addMenuItem("Project 1","location='#'");
mm_menu_0702165013_0.addMenuItem("Project 2","location='#'");
mm_menu_0702165013_0.addMenuItem("Project 3","location='#'");
mm_menu_0702165013_0.addMenuItem("Project 4","location='#'");
mm_menu_0702165013_0.addMenuItem("Project 5","location='#'");
mm_menu_0702165013_0.addMenuItem("Project 6","location='#'");
mm_menu_0702165013_0.hideOnMouseOut=true;
mm_menu_0702165013_0.bgColor='#555555';
mm_menu_0702165013_0.menuBorder=1;
mm_menu_0702165013_0.menuLiteBgColor='#CCCCCC';
mm_menu_0702165013_0.menuBorderBgColor='#006600';
mm_menu_0702165013_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>
<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="Wrapper">
<div id="Header"><img src="../Images/TopRight.jpg" alt="Welcome to James
Cooper Designs" width="515" height="100" /></div>
<div id="Nav">| <a href="../Index.htm" class="NavLinks">Home</a> | <a
href="#" name="link2" class="NavLinks" id="link1"
onmouseover="MM_showMenu(window.mm_menu_0702165013_0,-12,25,null,'link2')"
onmouseout="MM_startTimeout();">Portfolio</a> | <a
href="../CURRICULUM%20VITAE.pdf" target="_blank" class="NavLinks">C.V.</a> | <a
href="#" class="NavLinks">Contact</a> | <a href="#" class="NavLinks">Links</a>
|</div>
<div id="Middle">
<div id="MiddleContainer"><!-- TemplateBeginEditable name="MainImage"
--><img src="../Images/MiddleJag.jpg" alt="Image 1" width="480" height="140"
/><!-- TemplateEndEditable --></div>
</div>
<div id="TopLeft">
<!-- TemplateBeginEditable name="Thumb1" -->
<div id="Thumb1"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 1"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Thumb2" -->
<div id="Thumb2"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 2"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Thumb3" -->
<div id="Thumb3"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 3"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Thumb4" -->
<div id="Thumb4"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 4"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Thumb5" -->
<div id="Thumb5"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 5"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Thumb6" -->
<div id="Thumb6"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 6"
width="105" height="70" border="0" /></a></div>
<!-- TemplateEndEditable --></div>
<div id="ContentTOPBG"></div>
<div id="Content">
<!-- TemplateBeginEditable name="Content" -->
<div id="ContentLeft">
<h2>Heading </h2>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
tellus felis, viverra eget, auctor non, tincidunt vel, leo. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam
vel pede vitae wisi blandit feugiat. Curabitur vel odio id dui suscipit
dignissim. Vestibulum gravida pellentesque libero. Integer bibendum.
Pellentesque nibh turpis, scelerisque sed, gravida vel, lobortis quis, nibh.
Vivamus sit amet felis. Sed odio. sem ipsum mollis velit, ut posuere ipsum
magna vitae quam. Nullam .</h1>
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="SubImage" -->
<div id="ContentRight"><img src="../Images/ContentImage.jpg" alt="Content
Image" width="270" height="190" /></div>
<!-- TemplateEndEditable --></div>
<div id="ContentBOTTOMBG"></div>
<div id="Footer">
<div id="FooterW3C"><a
href="http://validator.w3.org/check?uri=referer"><img
src="../Images/W3C_XHTML.gif"
alt="Valid XHTML 1.0!" width="75" height="25" hspace="15" vspace="3"
border="0" /></a><a href="http://jigsaw.w3.org/css-validator/"> <img
src="../Images/W3C_CSS.gif"
alt="Valid CSS!" width="75" height="25" vspace="3"
style="border:0;width:75px;height:25px" /> </a></div>
<div id="FooterLinks">
<h3>| <a href="../Index.htm" class="ArialLightGrey12">Home</a> | <a
href="#" class="ArialLightGrey12">Portfolio</a> | <a href="#"
class="ArialLightGrey12">C.V.</a> | <a href="#"
class="ArialLightGrey12">Contact Us</a> | <a href="#"
class="ArialLightGrey12">Links</a> |</h3>
</div>
<div id="FooterTrue"> Designed & Produced by <a
href="http://www.truedesigns.co.uk/" target="_blank"
class="ArialLightGrey12">True Designs</a>.</div>
</div>
<div id="Copyright">All content on this site is subject to Copyright.<br />
© <a href="#" class="ArailWhite11">James Cooper</a> 2005 </div>
</div>
</body>
</html>
CSS
body {
background-image: url(../Images/greyleather_2.png);
background-repeat: repeat;
}
#Wrapper {
width: 770px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 600px;
}
#TopLeft {
background-image: url(../Images/TopLeft_BG.jpg);
background-repeat: no-repeat;
float: left;
height: 300px;
width: 255px;
margin: 0px;
padding: 0px;
}
#Header {
height: 100px;
width: 515px;
float: right;
}
#Nav {
float: right;
height: 30px;
width: 515px;
clear: both;
background-image: url(../Images/Nav_BG.jpg);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 30px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
word-spacing: 2px;
letter-spacing: 2px;
}
.NavLinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 30px;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 2px;
word-spacing: 2px;
}
.NavLinks:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 30px;
color: #990000;
text-decoration: none;
letter-spacing: 2px;
word-spacing: 2px;
}
#Middle {
background-image: url(../Images/MiddleRight_BG.jpg);
background-repeat: no-repeat;
clear: both;
float: right;
height: 170px;
width: 515px;
}
#Content {
background-image: url(../Images/Content_BG.jpg);
background-repeat: repeat-y;
clear: both;
height: 220px;
width: 770px;
margin: 0px;
padding: 0px;
}
#ContentLeft {
width: 420px;
float: left;
margin: 10px 15px 5px 10px;
text-align: justify;
word-spacing: 2px;
}
#ContentRight {
float: right;
height: 190px;
width: 270px;
border: 1px solid #009900;
margin: 10px 10px 5px 15px;
}
#Footer {
background-image: url(../Images/Footer_BG.jpg);
background-repeat: no-repeat;
height: 30px;
width: 770px;
clear: both;
margin: 0px;
padding: 0px;
}
#ContentTOPBG {
background-image: url(../Images/Content_Top_BG.jpg);
background-repeat: no-repeat;
height: 20px;
width: 770px;
margin: 0px;
padding: 0px;
clear: both;
}
#ContentBOTTOMBG {
background-image: url(../Images/Content_Bottom_BG.jpg);
background-repeat: no-repeat;
height: 10px;
width: 770px;
clear: both;
margin: 0px;
padding: 0px;
}
#MiddleContainer {
border: 1px solid #009900;
height: 140px;
width: 480px;
margin: 12px 12px 12px 17px;
}
#Thumb1 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: left;
clear: none;
margin-top: 13px;
margin-left: 6px;
}#Thumb2 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: right;
margin-top: 13px;
margin-right: 6px;
}#Thumb3 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: left;
clear: none;
margin-top: 26px;
margin-left: 6px;
}#Thumb4 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: right;
margin-top: 26px;
margin-right: 6px;
}#Thumb5 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: left;
clear: none;
margin-top: 26px;
margin-left: 6px;
}#Thumb6 {
height: 70px;
width: 105px;
border: 1px solid #009900;
float: right;
margin-top: 26px;
margin-right: 6px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #999999;
text-decoration: none;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #990000;
text-decoration: none;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
col
| |
| Travis 2005-07-17, 7:19 pm |
| Here is an alternative to your menus,that will work much better for you.
http://www.projectseven.com/tutoria...ation/index.htm
Travis
***************************************
http://www.webblobber.com - Free Templates, Javascript, Fonts & More.
***************************************
ash_designman wrote:
> HI,
>
> I really need some help here, I have made this site
> http://www.truedesigns.co.uk/test_a...ates/Master.htm (Not a .dwt file,
> but a page that I made from the template and got it to work before it stoped)
>
> So if you can help with why that is, that would be great. OR even better in
> the long run tell me how to go about making a drop down using nothing but CSS
> that would be great too.
>
> 2. When viewed in FireFox the alianment of the left thumb nails pannel does
> not want to go to the top of the page.
>
> Thanks
>
> Ash
>
> XTHML
>
> <!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>
> <title>Welcome to James Cooper Designs</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <link href="../CSS/JC.css" rel="stylesheet" type="text/css" />
> <script language="JavaScript">
> <!--
> function mmLoadMenus() {
> if (window.mm_menu_0702165013_0) return;
> window.mm_menu_0702165013_0 = new
> Menu("root",100,30,"Arial, Helvetica,
> sans-serif",18,"#FFFFFF","#990000","#009900","#006600","center","middle",3,0,500
> ,-5,7,true,true,true,0,false,false);
> mm_menu_0702165013_0.addMenuItem("Project 1","location='#'");
> mm_menu_0702165013_0.addMenuItem("Project 2","location='#'");
> mm_menu_0702165013_0.addMenuItem("Project 3","location='#'");
> mm_menu_0702165013_0.addMenuItem("Project 4","location='#'");
> mm_menu_0702165013_0.addMenuItem("Project 5","location='#'");
> mm_menu_0702165013_0.addMenuItem("Project 6","location='#'");
> mm_menu_0702165013_0.hideOnMouseOut=true;
> mm_menu_0702165013_0.bgColor='#555555';
> mm_menu_0702165013_0.menuBorder=1;
> mm_menu_0702165013_0.menuLiteBgColor='#CCCCCC';
> mm_menu_0702165013_0.menuBorderBgColor='#006600';
>
> mm_menu_0702165013_0.writeMenus();
> } // mmLoadMenus()
> //-->
> </script>
> <script language="JavaScript" src="mm_menu.js"></script>
> </head>
>
> <body>
> <script language="JavaScript1.2">mmLoadMenus();</script>
> <div id="Wrapper">
> <div id="Header"><img src="../Images/TopRight.jpg" alt="Welcome to James
> Cooper Designs" width="515" height="100" /></div>
> <div id="Nav">| <a href="../Index.htm" class="NavLinks">Home</a> | <a
> href="#" name="link2" class="NavLinks" id="link1"
> onmouseover="MM_showMenu(window.mm_menu_0702165013_0,-12,25,null,'link2')"
> onmouseout="MM_startTimeout();">Portfolio</a> | <a
> href="../CURRICULUM%20VITAE.pdf" target="_blank" class="NavLinks">C.V.</a> | <a
> href="#" class="NavLinks">Contact</a> | <a href="#" class="NavLinks">Links</a>
> |</div>
> <div id="Middle">
> <div id="MiddleContainer"><!-- TemplateBeginEditable name="MainImage"
> --><img src="../Images/MiddleJag.jpg" alt="Image 1" width="480" height="140"
> /><!-- TemplateEndEditable --></div>
> </div>
> <div id="TopLeft">
> <!-- TemplateBeginEditable name="Thumb1" -->
> <div id="Thumb1"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 1"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="Thumb2" -->
> <div id="Thumb2"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 2"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="Thumb3" -->
> <div id="Thumb3"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 3"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="Thumb4" -->
> <div id="Thumb4"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 4"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="Thumb5" -->
> <div id="Thumb5"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 5"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="Thumb6" -->
> <div id="Thumb6"><a href="#"><img src="../Images/Thumb1.jpg" alt="Thumb 6"
> width="105" height="70" border="0" /></a></div>
> <!-- TemplateEndEditable --></div>
> <div id="ContentTOPBG"></div>
> <div id="Content">
> <!-- TemplateBeginEditable name="Content" -->
> <div id="ContentLeft">
> <h2>Heading </h2>
> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
> tellus felis, viverra eget, auctor non, tincidunt vel, leo. Class aptent taciti
> sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam
> vel pede vitae wisi blandit feugiat. Curabitur vel odio id dui suscipit
> dignissim. Vestibulum gravida pellentesque libero. Integer bibendum.
> Pellentesque nibh turpis, scelerisque sed, gravida vel, lobortis quis, nibh.
> Vivamus sit amet felis. Sed odio. sem ipsum mollis velit, ut posuere ipsum
> magna vitae quam. Nullam .</h1>
> </div>
> <!-- TemplateEndEditable -->
> <!-- TemplateBeginEditable name="SubImage" -->
> <div id="ContentRight"><img src="../Images/ContentImage.jpg" alt="Content
> Image" width="270" height="190" /></div>
> <!-- TemplateEndEditable --></div>
> <div id="ContentBOTTOMBG"></div>
> <div id="Footer">
> <div id="FooterW3C"><a
> href="http://validator.w3.org/check?uri=referer"><img
> src="../Images/W3C_XHTML.gif"
> alt="Valid XHTML 1.0!" width="75" height="25" hspace="15" vspace="3"
> border="0" /></a><a href="http://jigsaw.w3.org/css-validator/"> <img
> src="../Images/W3C_CSS.gif"
> alt="Valid CSS!" width="75" height="25" vspace="3"
> style="border:0;width:75px;height:25px" /> </a></div>
> <div id="FooterLinks">
> <h3>| <a href="../Index.htm" class="ArialLightGrey12">Home</a> | <a
> href="#" class="ArialLightGrey12">Portfolio</a> | <a href="#"
> class="ArialLightGrey12">C.V.</a> | <a href="#"
> class="ArialLightGrey12">Contact Us</a> | <a href="#"
> class="ArialLightGrey12">Links</a> |</h3>
> </div>
> <div id="FooterTrue"> Designed & Produced by <a
> href="http://www.truedesigns.co.uk/" target="_blank"
> class="ArialLightGrey12">True Designs</a>.</div>
> </div>
> <div id="Copyright">All content on this site is subject to Copyright.<br />
> © <a href="#" class="ArailWhite11">James Cooper</a> 2005 </div>
> </div>
> </body>
> </html>
>
>
> CSS
>
> body {
> background-image: url(../Images/greyleather_2.png);
> background-repeat: repeat;
> }
> #Wrapper {
> width: 770px;
> margin-top: 10px;
> margin-right: auto;
> margin-bottom: 10px;
> margin-left: auto;
> height: 600px;
> }
> #TopLeft {
> background-image: url(../Images/TopLeft_BG.jpg);
> background-repeat: no-repeat;
> float: left;
> height: 300px;
> width: 255px;
> margin: 0px;
> padding: 0px;
> }
> #Header {
> height: 100px;
> width: 515px;
> float: right;
> }
> #Nav {
> float: right;
> height: 30px;
> width: 515px;
> clear: both;
> background-image: url(../Images/Nav_BG.jpg);
> background-repeat: no-repeat;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 18px;
> line-height: 30px;
> color: #FFFFFF;
> text-decoration: none;
> text-align: center;
> word-spacing: 2px;
> letter-spacing: 2px;
> }
> .NavLinks {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 18px;
> line-height: 30px;
> color: #FFFFFF;
> text-decoration: none;
> letter-spacing: 2px;
> word-spacing: 2px;
> }
> .NavLinks:hover {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 18px;
> line-height: 30px;
> color: #990000;
> text-decoration: none;
> letter-spacing: 2px;
> word-spacing: 2px;
> }
> #Middle {
> background-image: url(../Images/MiddleRight_BG.jpg);
> background-repeat: no-repeat;
> clear: both;
> float: right;
> height: 170px;
> width: 515px;
> }
> #Content {
> background-image: url(../Images/Content_BG.jpg);
> background-repeat: repeat-y;
> clear: both;
> height: 220px;
> width: 770px;
> margin: 0px;
> padding: 0px;
> }
> #ContentLeft {
> width: 420px;
> float: left;
> margin: 10px 15px 5px 10px;
> text-align: justify;
> word-spacing: 2px;
> }
> #ContentRight {
> float: right;
> height: 190px;
> width: 270px;
> border: 1px solid #009900;
> margin: 10px 10px 5px 15px;
> }
> #Footer {
> background-image: url(../Images/Footer_BG.jpg);
> background-repeat: no-repeat;
> height: 30px;
> width: 770px;
> clear: both;
> margin: 0px;
> padding: 0px;
> }
> #ContentTOPBG {
> background-image: url(../Images/Content_Top_BG.jpg);
> background-repeat: no-repeat;
> height: 20px;
> width: 770px;
> margin: 0px;
> padding: 0px;
> clear: both;
> }
> #ContentBOTTOMBG {
> background-image: url(../Images/Content_Bottom_BG.jpg);
> background-repeat: no-repeat;
> height: 10px;
> width: 770px;
> clear: both;
> margin: 0px;
> padding: 0px;
> }
> #MiddleContainer {
> border: 1px solid #009900;
> height: 140px;
> width: 480px;
> margin: 12px 12px 12px 17px;
> }
> #Thumb1 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: left;
> clear: none;
> margin-top: 13px;
> margin-left: 6px;
> }#Thumb2 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: right;
> margin-top: 13px;
> margin-right: 6px;
> }#Thumb3 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: left;
> clear: none;
> margin-top: 26px;
> margin-left: 6px;
> }#Thumb4 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: right;
> margin-top: 26px;
> margin-right: 6px;
> }#Thumb5 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: left;
> clear: none;
> margin-top: 26px;
> margin-left: 6px;
> }#Thumb6 {
> height: 70px;
> width: 105px;
> border: 1px solid #009900;
> float: right;
> margin-top: 26px;
> margin-right: 6px;
> }
> h1 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 14px;
> font-weight: normal;
> color: #999999;
> text-decoration: none;
> }
> h2 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 24px;
> font-weight: normal;
> color: #990000;
> text-decoration: none;
> }
> h3 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: normal;
> col
| |
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|