HTML - List Menu And Textbox In Conjunction

Hi all,

[LINK REMOVED]

Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site.

So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right?

The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language.

The html looks like this:
Code:

			<!-- main navigation -->
			<ul id="nav">
				<li class="home">
					<a href="index.htm"><span>Home</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="message-from-director.htm">Message From Director</a></li>
							<li><a href="what-is-15-15.htm">What is 15/15?</a></li>
							<li><a href="festival-history.htm">Festival History</a></li>
							<li><a href="judges-special-guests.htm">Judges &amp; Special Guests</a></li>
						</ul>
					</div><a href="#"><span>About 15/15</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="register-now.php">Register Now</a></li>
							<li><a href="get-ready.htm">Get Ready</a></li>
							<li><a href="conditions-of-entry.htm">Conditions of Entry</a></li>
							<li><a href="faq.htm">FAQ</a></li>
						</ul>
					</div><a href="#"><span>How To Enter</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="screening-information.htm">Screening Information</a></li>
							<li><a href="nominations.htm">2009 Nominations</a></li>
						</ul>
					</div><a href="#"><span>Programme</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="films.htm">Films</a></li>
							<li><a href="festival-trailers.htm">Festival Trailers</a></li>						
						</ul>
					</div><a href="#"><span>Archives</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li>
						</ul>
					</div><a href="#"><span>Sponsors</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="press-releases.htm">Press Releases</a></li>
							<li><a href="images.htm">Images</a></li>
						</ul>
					</div><a href="#"><span>Newsroom</span></a>
				</li>
					<li class="contact">
					<div>
						<ul>
							<li><a href="contact-us.php">Contact Us</a></li>
							<li><a href="15-15-committee.htm">15/15 Committee</a></li>
						</ul>
					</div><a href="#"><span>Contact</span></a>
				</li>
			</ul>

...and the CSS looks like this:

Code:

#nav {
	font-size: 15px;
	line-height: 20px;
	list-style: none;
	padding: 0;
	position: absolute;
	top: 250px;
	left:-5px;
	width: 750px;
}
#nav li {
	display: inline;
	float: left;
	margin: 0 0 0 0px;
	position: relative;
}
#nav a {
	color: #000;
	float: left;
	text-decoration: none;
}
#nav a span {
	cursor: pointer;
	float: left;
	display: inline;
	font-weight: bold;
	line-height: 30px;
	padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
	background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
	background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
	background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
	left: auto;
	right: 0;
}
* html #nav .contact div {
	right: -1px;
}
#nav div {
	background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
	display: none;
	left: 0;
	padding: 5px 0 0;
	position: absolute;
	top: 30px;
	width: 168px;
	z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
	display: block;
}
#nav div ul {
	background: url(../img/bg-b.gif) no-repeat 0 100%;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 5px;
	text-transform: none;
	width: 168px;
}
#nav div ul li {
	margin: 0;
	padding: 0;
	width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
	background: none;
	color: #000;
	display: block;
	line-height: 30px;
	padding: 0 0 0 9px;
	width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
	background: #D9581F;
}

Any ideas?

Thanks so much in advance...

Neil

Hi,
I am using css to create a dropdown menu. It works fine in all browsers except IE6. In IE6 a dropdown list covers the dropdown menu. please see the atachment/screenshot.
Here is the html/css code I am using.

HTML Code:

{
	position: relative; z-index: 1;}*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;

}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 z-index: 599;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
 z-index: 598;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
 z-index: 598;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 z-index: 598;
}

HTML Code:

<div id="header" class="header" style="background-image: url(./images/blue-curve.jpg); background-position: top;">
            <h1>
                Finance and Risk
            </h1>
            <ul class="dropdown dropdown-horizontal noPrint">
                <li><a href="#" class="dir">Data Management</a>
                    <ul>
                        <?php echo '<li><a href="main.php?PageName=import3' . SID . '">Upload Data</a></li>'; ?>
						<?php echo '<li><a href="main.php?PageName=list' . SID . '">Download Data</a></li>';  ?>
						<?php echo '<li><a href="main.php?PageName=delete' . SID . '">Delete Data</a></li>';  ?>
   		    			<?php echo '<li><a href="main.php?PageName=assetupdate' . SID . '">Update Data</a></li>';  ?>
                    </ul>
                </li>
                <li><a href="#" class="dir">Reports</a>
					<ul>
						<?php echo '<li><a href="main.php?PageName=reports' . SID . '">BS Overview</a></li>';   ?>
						<?php echo '<li><a href="main.php?PageName=CDO' . SID . '">CDOs</a></li>';                ?>
						<?php echo '<li><a href="main.php?PageName=impairment' . SID . '">Impairments</a></li>';   ?>
                        <?php echo '<li><a href="main.php?PageName=fvecapreport' . SID . '">FairValue and Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=creditrisk' . SID . '">Credit Default Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=securitydata' . SID . '">MarketData</a></li>';?>
					</ul>
				</li>
				<li><a href="#" class="dir">Files & Manuals</a>
					<ul>
		        		<?php echo '<li><a href="magnitude.pdf" target="_blank">Product Codes</a></li>';?>
						<?php echo '<li><a href="uploadmanual.pdf" target="_blank">Upload Manual</a></li>';?>
						<?php echo '<li><a href="main.php?PageName=osmdocs' . SID . '">OSM Files</a></li>';   ?>
					</ul>
				</li>
				<li><a href="#" class="dir">Miscellaneous</a>    		<ul>
		        		<?php echo '<li><a href="main.php?PageName=creditcrises' . SID . '">Credit Crises</a></li>';   ?>
					</ul>
				</li>
            		<?php if ($_SESSION['Admin'] == "Yes") { ?>
				<li><a href="#" class="dir">Admin </a>
					<ul>
		        		<?php echo '<li><a href="main.php?PageName=message' . SID . '">Flash Alerts</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel1.php?' . SID . '">Test Marcel1</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel2.php?' . SID . '">Test Marcel2</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel3.php?' . SID . '">Test Marcel3</a></li>';   ?>
		        		<?php echo '<li><a href="main.php?PageName=testajay1' . SID . '">Test Ajay1</a></li>';   ?>
		        		<?php echo '<li><a href="testajay2.php?' . SID . '">Test Ajay2</a></li>';   ?>
		        		<?php echo '<li><a href="testajay3.php?' . SID . '">Test Ajay3</a></li>';   ?>
					</ul>
				</li>
             		<?php } ?>
                <li><a class="dir" href="main.php?PageName=menu">Menu</a>
                    <ul>
                        <?php echo '<li><a href="logout.php">Logout</a></li>';   ?>
                        <?php echo '<li><a href="#">Change password</a> </li>';   ?>
                    </ul>
                </li>
                <li><a class="dir" href="javascript:window.print()" color="green">Print</a> </li>
            </ul>
        </div>

Any one has an idea how to get the css menu on top of the dropdown list?

Thanks in advance

I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ?

thanks

I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0)

I was wondering if anyone know what it could be

HTML
Code:

Code:

<div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul>

CSS
Code:

Code:

#nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }

Any help at all would be appriciated please
I can show u the website via Private message if you are interested in helping

Thanks in advance
Reply With Quote

did not realize this was also javascript too.

Please help me on this one.

http://www.htmlforums.com/php-progra...eld-87724.html


how to make the page automatically grab the page's url and paste it into a textfield.

thanks

Hello, i was wondering if anyone could tell me how i would place a textbox inside a layer (textbox with scrollbar only vertical). The textbox can only be wrote in by me to display text, not by any other user.


I was also wondering then how would i position the textbox within the layer so it would be in the middle of the layer not at the top.

And how i would then changed the colour of the scrollbar.

Thanks

How can I add textbox on a form having a button? So I can pass it's value to the next page

Right...I'm in the process of creating a sample website, which takes in date data and number data...and I was wondering...as I have the option of using drop downs or textboxes....if the site does go onto a server...would it be easier (as the developer) to use drop downs or text inboxes..?

I mean..when it comes to the user choosing things using the drop down or inputting into the textbox..and sending it to search in a database...which would be easier to play around with..and less complicated..?

*thinks Am I making sense?*

Hi,
I am trying to work out a form i.e. user was to choose from a "Yes/No" drop-down option. For example if user was to choose "NO", nothing will happen, BUT if user was to choose "YES" option, a text box will appear next to the field to allow user to enter some information. Can this be done? My code is below.

Thanks

HTML Code:

<tr>
<td bgcolor="#eeeeff">
Is it a shared device?<br>
<font color='#F62817'>** If yes, please indicate the shared device </font>
</td>
<td bgcolor="#eeeeff">
<SELECT name="shared">
<option value="No"SELECTED>No</option>
<option value="Yes">Yes</option>
<INPUT type = "TEXT" name = "shared_remark" value = "NIL">
</td></tr>

Alright, I have a DIV with this as the background image:


I put two textboxes over them, the first one is aligned ok but the second one is too high. How do I space them out?

When I try br it goes down way too far.

Here is what it looks like right now:


Should I use a table? more DIVs? Or, is there a css code I could use to bring it down?

I have this page that can add textbox and remove it but the problem is if I add textbox they will all have the same name as the default. How can I have different name from my textbox so that I can call them individually on the next page...Thanks

<html>
<head>
<script language="javascript">
row_no=1;
function addRow(tbl,row)
{
var textbox='<td height="25" align="center" valign="middle" bgcolor="#EEEEEE"><input name="textfield5" type="text" class="bodytext" size="20"></td><td height="25" align="center" valign="middle" bgcolor="#EEEEEE"><input name="textfield6" type="text" class="bodytext" size="35"></td><td height="25" align="center" valign="middle" bgcolor="#EEEEEE"><input name="textfield7" type="text" class="bodytext" size="3"></td>';
var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a>';

var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
try
{
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox + " " + remove;
row_no++;
} catch (ex)
{
alert(ex);
}
}
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);
try
{
row_no--;
table.deleteRow(num);
} catch (ex)
{
alert(ex);
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="0" cellpadding="0" id="mytable">
<tr id="myrow">
<td colspan="2" align="center"><h3>Some Text goes here</h3>
</td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"><input type="button" name="Button" value="Add a new row" onClick="addRow('mytable','myrow')"></td>
</tr>
<tr ID="add">
<td width="177"> </td>
<td width="273" align="right"> </td>
</tr>
</table>
</form>
</body>
</html>

I am trying to put a simple text box on my form, but no matter what values I put in for the size of the textbox it reamins the same size!

However, copying just the form code to a blank html document and the text box appears in what ever size I want.

I didnt want to post the whole code here because a) is over 600 lines and b) im an ameatur and its rubbish code!

However, I am using PHP in Dreamweaver if that makes any difference. This is driving me crazy, pleasehelp!

I'm having problems moving textbox up toward upper right corner in div id "login". I tried in css margin-bottom or margin-top or padding-top or bottom and it moves the whitespace. How do I just move the textbox?Also I have no idea why Registration is a link with picture in it? How do I remove that and make it just text?
Heres my site http://www.college-ebook.com

Here's my css
PHP Code:
<style type="text
/css">
* {
    margin: 0px auto;
    padding: 0px;
}
#login {margin-left:780px;
padding-bottom:50px;}
body {
    font: 76% Verdana, Arial, Helvetica, sans-serif;
    background: #000;
    padding-top:120px;
}
#wrapper {
    width: 850px; /* Page width */
    background: #fff;
    padding: 10px;
    margin: 10px auto;
}
#header {
    font-size: 250%;
    margin: 10px;
}
#right_column {
    float: right;
    width: 590px;
    clear: right;
    text-align: left;
}
#left_column {
    width: 256px;
    
}
#left_column img {
    display: block;
    clear: right;
    font-size: 10px;
}
#footer {
    background: #ccc;
    height: 60px;
    margin-top: 10px;
}
.copyright {
    padding: 20px;
    
}
p {
    margin: 10px 0px;
    text-align: center;
    font-size: 15pt;
}
h1,h2,h4,h5,h6 {
    font-size: 155%; 
    margin: 20px 0px;
}
.bold {
    font-weight: bold;
}
.txt_center {
    text-align: center;
}
#left_column {
    width: 256px;
float: left;
     
}
</style>
#wrapper #right_column p {
    text-align: left;
}
#wrapper #right_column p {
    text-align: center;
}
#wrapper #right_column p {
    text-align: left;

text-indent:50px;
} 


Heres my html
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title>WEBSITE NAME</title>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19766501-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
	<meta name="description" content="Your description about your website for search engines.">
	<meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
    <link href="data1.css" rel="stylesheet" type="text/css">
<body>
<div id="wrapper">
	<p>&nbsp;</p>
  <div id="header" class="bold txt_center">Registration</div>
	<div id="login">
		<p>  
		<input type="text" name="mail" size="25"> </p>
	</div>
	 <div id="left_column">
	 


  </div>
	<br clear="both" />
	<div id="footer" class="txt_center">
		<div class="copyright"><a href="contact.html">Contact Us</a></div>
	</div>
    
</div>
</body>
</html>

Hello, I am in need of help...
I made a banner for my friends band. I'm trying to put the banner's html code inside of a textbox so that this code can be shared to others that wish to place the banner on their myspace profile.
How do i accomplish such?

Hi there,

I have a quick and simple terminology question.

what is the name given to the "helper text" that I've seen on some websites alongside textboxes to help you fill them in?

They are present at: https://twitter.com/signup

if you click on any of the fields.

Secondly, I see twitter does this using tables - which everyone seems to hate for layout.

What is a better way of doing this? I assume that you fire some javascript when the textbox is active etc. But how do you get the textbox styled and floating on the right?

Cheers,
J