PDA

View Full Version : is this possible?

kade119
03-16-2007, 09:19 PM
I want to re-create this drop menu but in all css and xhtml.. no tables.. is that possible?






<!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=gb2312" />
<title>About Kreativ</title>
<style type="text/css">
<!--
body,td,th {
color: #666666;
font-family: candara;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.TitleFont {
font-size: 20px;
font-weight: normal;
}
.DropdownMenuFont {
color: #FFFFFF;
font-weight: bold;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FF9900;
}
a:hover {
text-decoration: none;
color: #FF6600;
}
a:active {
text-decoration: none;
}
.WhoweareFont {
color: #FF9900;
font-size: 30px;
font-family: candara;
}
.style1 {color: #339900}
.style2 {
color: #406EED;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
.style4 {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
}
.style7 {
font-size: 20px;
font-weight: bold;
}
.style8 {color: #000000}
.style9 {color: #406EED}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="DM_ABOUTKREATIV" style="position:absolute; left:208px; top:225px; width:518px; height:41px; z-index:1; visibility: hidden;"
onmouseover="ShowDropdownMenu(this.id,'AboutUs',true);"
onmouseout="ShowDropdownMenu(this.id,'AboutUs',false);">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="24" align="center" background="page1/dropmenu.png" style="background-repeat:no-repeat; background-position:right;"><table width="90%" height="90%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● WHO WE ARE</a> </span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● MAIN PAGE</a> </span></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="DM_OURSERVICES" style="position:absolute; left:208px; top:225px; width:518px; height:41px; z-index:2; visibility:hidden;"
onmouseover="ShowDropdownMenu(this.id,'OurServices',true);"
onmouseout="ShowDropdownMenu(this.id,'OurServices',false);">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="24" align="center" background="page1/dropmenu.png" style="background-repeat:no-repeat; background-position:right;"><table width="90%" height="90%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● GRAPHIC DESIGN</a> </span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● Imaging </a> </span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● Web Development</a></span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● Programming </a></span></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="DM_PORTFOLIO" style="position:absolute; left:208px; top:225px; width:518px; height:41px; z-index:3; visibility:hidden;"
onmouseover="ShowDropdownMenu(this.id,'AboutUs',true);"
onmouseout="ShowDropdownMenu(this.id,'AboutUs',false);">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="24" align="center" background="page1/dropmenu.png" style="background-repeat:no-repeat; background-position:right;"><table width="90%" height="90%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● ITEM1</a> </span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● ITEM2 </a> </span></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="DM_CONTACTUS" style="position:absolute; left:208px; top:225px; width:518px; height:41px; z-index:4; visibility: hidden;"
onmouseover="ShowDropdownMenu(this.id,'AboutUs',true);"
onmouseout="ShowDropdownMenu(this.id,'AboutUs',false);">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="24" align="center" background="page1/dropmenu.png" style="background-repeat:no-repeat; background-position:right;"><table width="90%" height="90%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● ITEM1 </a> </span></div></td>
<td width="20%"><div align="center"><span class="DropdownMenuFont"><a href="#">● ITEM2 </a> </span></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
<td width="20%"><div align="center"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>

<table width="812" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="48" height="70">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="130">&nbsp;</td>
<td width="382">&nbsp;</td>
<td colspan="2" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="242" height="144"><img src="page1/Logo2.png" width="230" height="144" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="74">&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="130" height="117"><img src="page1/Logo.png" width="130" height="117" /></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="43">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="156">&nbsp;</td>
<td width="86">&nbsp;</td>
</tr>
<tr>
<td height="14">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="291" colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"
background="page1/linebar.png" style=" background-repeat:no-repeat; ">
<!--DWLayoutTable-->
<tr>
<td width="46" height="24">&nbsp;</td>
<td width="171">&nbsp;</td>
<td width="127" valign="top" class="TitleFont"><div align="center" onmouseover="ShowDropdownMenu('DM_ABOUTKREATIV','AboutUs',true);" onmouseout="ShowDropdownMenu('DM_ABOUTKREATIV','AboutUs',false);">About Kreativ</div></td>
<td width="127" valign="top" class="TitleFont"><div align="center" onmouseover="ShowDropdownMenu('DM_OURSERVICES','OurServices',true);" onmouseout="ShowDropdownMenu('DM_OURSERVICES','OurServices',false);">Our Services</div></td>
<td width="127" valign="top" class="TitleFont"><div align="center" onmouseover="ShowDropdownMenu('DM_PORTFOLIO','Portfolio',true);" onmouseout="ShowDropdownMenu('DM_PORTFOLIO','Portfolio',false);">Portfolio</div></td>
<td width="127" valign="top" class="TitleFont"><div align="center" onmouseover="ShowDropdownMenu('DM_CONTACTUS','ContactUs',true);" onmouseout="ShowDropdownMenu('DM_CONTACTUS','ContactUs',false);">Contact Us</div></td>
<td width="87">&nbsp;</td>
</tr>
<tr>
<td height="28">&nbsp;</td>
<td colspan="5" align="right" valign="top" background="page1/line1.png" style="background-position:top; background-repeat:no-repeat; "><!--DWLayoutEmptyCell-->&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="239">&nbsp;</td>
<td colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="208" height="176" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="208" height="40" valign="top"><span class="WhoweareFont">Who we are </span></td>
</tr>
<tr>
<td height="85" valign="top"><img src="page1/pic1.png" width="208" height="76" /></td>
</tr>
<tr>
<td height="51" valign="top">Guys with computer expertise and <span class="style1">createiv personalities</span> doing the job we really do love. </td>
</tr>
</table></td>
<td width="9">&nbsp;</td>
<td width="292" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="292" height="21">&nbsp;</td>
</tr>
<tr>
<td height="218" valign="top" background="page1/pic2.png" style="background-position:right; background-repeat:no-repeat; "><span class="WhoweareFont">What we do</span><br />
<span class="style2">Advancing your company</span><br />
We are a creative design<br />
company determined <br />
to provide you with a <br />
compelling mix of <br />
graphics, designs <br />
and programming to <br />
better communicate <br />
with your targeted consumers. </td>
</tr>
</table></td>
<td width="9">&nbsp;</td>
<td width="161" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#FFCC00">
<!--DWLayoutTable-->
<tr>
<td width="153" height="25" align="left" valign="middle" bgcolor="#FF9933"><div align="left" class="style4">
<div align="left">Company News </div>
</div></td>
</tr>
<tr>
<td height="70" valign="middle"><div align="center"><img id="NewsImg1" src="page1/circlebutton.png" width="10" height="10" /><a href="#" onclick="NewsImg1.src='page1/circlebuttonroll.png'" onmouseout="NewsImg1.src='page1/circlebutton.png'">Recently developed a site for a fitness trainer, in corporating a very user-friendly interface with</a> </div></td>
</tr>
<tr>
<td height="32" align="center" valign="middle"><div align="center"><img id="NewsImg2" src="page1/circlebutton.png" width="10" height="10" /><a href="#" onclick="NewsImg2.src='page1/circlebuttonroll.png'" onmouseout="NewsImg2.src='page1/circlebutton.png'">Search engine Optimization</a> </div></td>
</tr>
<tr>
<td height="25" align="center" valign="middle"><div align="left"><img id="NewsImg3" src="page1/circlebutton.png" width="10" height="10" /><a href="#" onclick="NewsImg3.src='page1/circlebuttonroll.png'" onmouseout="NewsImg3.src='page1/circlebutton.png'">&quot;Solutions by Design&quot;</a> </div></td>
</tr>
<tr>
<td height="86">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="63"></td>
<td></td>
<td></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="229">&nbsp;</td>
<td colspan="4" align="right" valign="top"><table width="678" style="background-position:top; background-repeat:no-repeat; " border="0" cellpadding="0" cellspacing="0" background="page1/line1.png" bgcolor="#E1E1E1">
<!--DWLayoutTable-->
<tr>
<td width="444" height="14">&nbsp;</td>
<td width="233" rowspan="3" align="right" valign="top"><table width="217" style="background-position:right; background-repeat:no-repeat; " border="0" cellpadding="0" cellspacing="0" background="page1/graphic2.png">
<!--DWLayoutTable-->
<tr>
<td width="202" height="101">&nbsp;</td>
<td width="15" valign="top" onclick="img1.style.visibility='visible';" onmouseout="img1.style.visibility='hidden';"><img style="visibility:hidden;" id='img1' src="page1/box1rollover.png" width="32" height="101" /></td>
</tr>
</table></td>
<td width="1"></td>
</tr>
<tr>
<td height="24" valign="top"><div align="left"><img src="page1/graphic1.png" width="185" height="24" /></div></td>
<td></td>
</tr>
<tr>
<td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="444" height="176" valign="top"><div align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td><span class="style7"><span class="style8">Kr</span><span class="style9">eativ</span></span><br />
Since our inception in 2006,Kreativ has substantially evolved from its humble beginnings as two designer's personal portfolio clashed and formed a new design agency. We have an unparalleled team in order to tender our clients with a true 'full-service' offering. At Kreativ, we are fascinated by technology, devoted to perfection and obsessed with quality. This couped with our dedication to professionalism and precision is our commitment to you. We invite you to explore our 'Prophecy' and to challenge us with your next project. And so it begins... </td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="1"></td>
</tr>
</table></td>
<td height="63"></td>
</tr>
<tr>
<td rowspan="2"><table width="217" border="0" align="right" cellpadding="0" cellspacing="0" background="page1/graphic3.png" style="background-position:right; background-repeat:no-repeat; ">
<!--DWLayoutTable-->
<tr>
<td width="183" height="128">&nbsp;</td>
<td width="33" valign="top" onclick="img2.style.visibility='visible';" onmouseout="img2.style.visibility='hidden';"><div align="right"><img style="visibility:hidden;" src="page1/box2rollover.png" name="img2" width="32" height="125" id="img2" /></div></td>
</tr>
</table></td>
<td height="114"></td>
</tr>
<tr>
<td height="14">&nbsp;</td>
<td></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="34">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<script language="JavaScript">
<!--
function ShowDropdownMenu(DivName,MenuName,IsShow){
var DivObject = document.getElementById(DivName) ;
var VisibilityType = (IsShow==true)?'visible':'hidden';
//alert(VisibilityType );
if( MenuName == "AboutUs" ) {
DivObject.style.visibility = VisibilityType ;
}
if( MenuName == "OurServices" ) {
DivObject.style.visibility = VisibilityType ;
}
if( MenuName == "Portfolio" ) {
DivObject.style.visibility = VisibilityType ;
}
if( MenuName == "ContactUs" ) {
DivObject.style.visibility = VisibilityType ;
}
}
-->
</script>
</body>
</html>
kade119
03-16-2007, 10:14 PM
The thing I am trying to do is create this blue bar drop menu in CSS/xhtml and I got it to drop but it is not aligned with the text that drops and also.. I am not sure how to make it disappear. If anyone could help me accomplish this I would appreciate it so much


<?php header('Content-Language: en'); ?>
<!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" xml:lang="en" lang="en">
<head>
<title>Horizontal expanding menu on a CSS line</title>
<style type="text/css" media="all">
@import "css/kss.css";
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


</head>

<body>
<div id="container">


<div id="menu">


<dl>
<dt onmouseover="montre('smenu1');"><a href="#">About Kreativ</a></dt>
<dd id="smenu1">

<ul>
<li><a href="#">Who We Are</a></li><li><a href="#">Main Page</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Portfolio</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Imaging</a></li>
<li><a href="#">Programming</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Our Services</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Imaging</a></li>
<li><a href="#">Programming</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Support</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</dd>
</dl>


</div>

</body>
</html>




CSS




#menu dl {
float: left;
}

#menu li {
display: inline;
left: 5;
color: #406EED;
display: inline;
margin-left: 10px;
padding: 50px 0px 0px 0px;
}

#menu a {
text-decoration: none;
color: #595959;
}

body {
margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;
}


dt, dl, dd {
margin: 0 18px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 90px;
border: none;
font-family: "myriad pro";
}

#menu dl {
float: left;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
width: 400px;
}
#smenu1 ul
{
background-image: url(dropmenu.png);
background-repeat: no-repeat;
background-position: top;
width: 469px;
height: 24px;
}

#smenu1 li a {
text-decoration: none;
color: #ffcc33;
padding: 200px 0px 0px 0px;
}

#smenu2 ul li a {
text-decoration: none;
color: #99ff33;
}

#smenu3 ul li a {
text-decoration: none;
color: #ff9933;
}

#smenu4 ul li a {
text-decoration: none;
color: #99ccff;
}


#container
{
position: absolute;
width: 700px;
left: 50%;
margin-top: 0;
margin-left: 0px;
background-image: url(bg1page.jpg);
background-repeat: no-repeat;
background-position: center;
padding-top:68px;
margin-bottom:50px;
}


html>body #container
{
position: relative;
clear: none;
left: auto;
width: 700px;
margin: 0 auto;
height: 635px;
}
Pennimus
03-16-2007, 10:29 PM
Dear God, please use the code tags around your code!
twodayslate
03-16-2007, 10:43 PM
Dear God, please use the code tags around your code!

Yes please!
http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=CSS+drop+down+menu&spell=1
http://alistapart.com/articles/horizdropdowns
http://www.htmldog.com/articles/suckerfish/dropdowns/
There are some helpful links to get you well on your way to a beautiful drop down menu!
jlhaslip
03-17-2007, 01:44 AM
Forgot one:

http://cssplay.co.uk/menus/index.html
kade119
03-17-2007, 05:57 AM
haha so im guessing its possible.. well done my fellow mates
kade119
03-17-2007, 05:57 AM
im a new coder... but im a cool coder ...what?
kade119
03-17-2007, 06:05 AM
by the way did you see the code there already... paste it .. it already drops.. thats not my problem its aligning the text on top of the bar .......
kade119
03-17-2007, 06:37 AM
CODE:


I need the dropmenu you to dissappear when mouseoff..




<?php header('Content-Language: en'); ?>
<!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" xml:lang="en" lang="en">
<head>
<title>Horizontal expanding menu on a CSS line</title>
<style type="text/css" media="all">
@import "css/kss.css";
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


</head>

<body>

<div id="container">


<div id="menu">


<dl>
<dt onmouseover="montre('smenu1');"><a href="#">About Kreativ</a></dt>
<dd id="smenu1">

<ul>
<li><a href="#">Who We Are</a></li><li><a href="#">Main Page</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Portfolio</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Imaging</a></li>
<li><a href="#">Programming</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Our Services</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Imaging</a></li>
<li><a href="#">Programming</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Support</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</dd>
</dl>

</div>
</div>

</body>
</html>
nexosis
03-17-2007, 09:42 AM
CODE:
I need the dropmenu you to dissappear when mouseoff..

put this attribute in your drop-downs

onmouseout="style.visibility:hidden"
jlhaslip
03-17-2007, 11:13 AM
haha so im guessing its possible.. well done my fellow mates
Google works, too.
kade119
03-19-2007, 03:39 AM
if you guys do not want to reply with helpful information.. why reply ? lol
kade119
03-19-2007, 03:39 AM
thankx nexosis