HTML - Html / Css / Dropdown Menu Editors

Hello. =)

I was wondering: is there an HTML editor that can create this layout (and other similar layouts) in WYSIWYG format, and by using DIVs?:


I'm a complete beginner with HTML editors, but I'm intermediate with actual HTML code. For several years, I've been creating webpages by hand, WITHOUT using an HTML editor. That means I use my prior knowledge, type the code into NotePad, and then physically open/check/edit/refresh my pages as I go.

Since I know a lot of code (and my typing speed is 65 words per minute), I always figured this method was faster (and less frustrating) than using an editor and going to File -> Edit -> Insert -> Table -> 4 Rows, 3 Columns.

However, building pages by hand has a lot of negatives: I can't easily detect mistakes/typos; it gets very tiring; etc. So I really NEED to learn how to use HTML editors, and I want to start with something basic.

When I say "basic", I want something that will allow me to create DIVs, iFrames, etc. -- in WYSIWYG format. I've used the following free HTML editors, and none of them let me make DIVs in WYSIWYG format :
CoffeeCup HTML Editor Kompozer PageBreeze Microsoft FrontPage 2003 Amaya NotePad++ (as a side note, this program has so many options, I got confused/frustrated)
I've been using tables to make my layouts for years, but I heard that's "incorrect" so I'm starting to use DIVs now. But, I'm still new to DIVs -- which means they really confuse me and I HATE THEM (? - why are there are SO MANY "float:" and "position:" rules?!! And unlike tables, DIVs don't automatically match the width of the text inside them! By default, DIVs stretch and fit the entire page width! AND, DIVs aren't any smaller than tables!!!).

Anyway, since I'm new to DIVs, that means if I manually create them, chances are I'll get it wrong...so I have to keep checking/editing/refreshing the pages. Which is why I need a WYSIWYG DIV creator; it'd be great if I could draw a rectangle and the editor understands that, "Okay, this 'rectangle' is a DIV and she wants it in EXACTLY this spot".

Most of the editors I listed above are free and/or so basic that I can't even add DIVs. All I can do is make a boring, one-color, one link class page. And I never saw "Insert: DIV" option anywhere, which means I'd have to type the <div> tags myself. And that's not saving me any time.

So, that's my dilemma. I REALLY need to start using HTML editors, preferably one that's free, WYSIWYG, lets me "draw" DIVs, and allows me to switch between Visual Mode and HTML Mode (so I can see exactly how they made the DIVs).

If anyone has suggestions or advice, please let me know! (By the way: you CAN mention programs that aren't free. Although I'm broke, I'll write them down until I can afford to buy them!)

Thanks in advance!

I'm using WYSIWYG, please look at my webpage he http://www.nwvisuals.com/

You'll notice that the text below the images gets all over the place if you

(A) Have resolution that is not 1024x768
(B) Not in full-screen mode

Which is really really bad for me. Should I fix it with basic HTML'ing? Is this the downfall of WYSIWYG editors?

hey

I'm new at the forum here and kinda need some help with a multi level drop down menu for my website.
there shall be 2 boxes where in the first one you can choose your Zipcode and then a box below to choose the city you are living in.
first time working with html and I'm not sure if it can be made be that, and i was thinking i could get some help with that for some one in here.

let me know if it's not understandable^^

^^thanks for the help^^

So for a while a have been trying very hard to create a dropdown menu for my navigation bar. I have searched the web long and hard for this and found little valuable information. I have a four link graphical navigation bar made from image sprites (see this tutorial) and have been trying to make a dropdown bar for just the second link. I know a bit of html/css but very little javascript which if I understand what I read from google, thats what I will need. Can anyone help please?

I've been working on a dropdown menu using html tables, css and javascript, but it seems to fail in Firefox. When I hover the button the first time it's like it should be, however, when I hover it the second time the dropdown menu
actually comes next to the button instead of below it.

It's hard to explain, so I've uploaded it to http://darkool.nl/table.php

This picture also explains what happens in Firefox:


It works fine in other browsers (IE, Opera and Safari)

Code:

<script>
function showMenu(num) {
	for (var count = 1; id = document.getElementById("show"+num+"."+count); ++count) {
		id.style.display = "block";
	}
}
function hideMenu(num) {
	for (var count = 1; id = document.getElementById("show"+num+"."+count); ++count) {
		id.style.display = "none";
	}
}
</script>
<style>
* {
	margin: none;
	padding: none;
}
tr {
	vertical-align: top;
}
td.menu0 {
	border: 1px solid black;
	display: none;
}
td.menu1 {
	border: 1px solid black;
	display: block;
}
</style>

<table onMouseOver='showMenu(0)' onMouseOut='hideMenu(0)' id='menu0' class='menu' cellpadding='0' cellspacing='0'>
<tr><td id='show' class='menu1'>Over ons</td></tr>
<tr><td id='show0.1' class='menu0'>Informatie</td></tr>
<tr><td id='show0.2' class='menu0'>Biografie</td></tr>
</table>

Any assistance that can be provided is greatly appreciated.

I am unable to get my dropdown menu to drop in front of my left column. I have copied the css and the html below. I am not sure if there is something wrong with the HTML or the css so please let me know if I need to post this to a CSS thread.

Thank you for any help provided.

#navigation
{
margin: 0;
padding: 0;
width: 100%;
background-color: #f5f5f5;
height: 1.3em;
float: left;
clear: both;
}

#navigation li
{
list-style: none;
float: left;


}

#navigation li a
{
display: block;
padding: 0 6px;
background-color: #f5f5f5;
color: #0000ff;
text-decoration: none;
border-right: 2px solid #fff;
font-size: 12px;}


#navigation li ul
{

display: none;
width: 10em;
background-color: #0000ff;
}

#navigation li:hover ul, #navigation li.hover ul

{ display: block;
position: absolute;
margin:0;
padding:0;
}

#navigation li:hover li, #navigation li.hover li
{
float: none;
}

#navigation li:hover li a, #navigation li.hover li a{
background-color: #0000ff;
border-bottom: 1px solid #fff;
color: #ffffff;
}

#navigation li li a:hover{
background-color: #0000ff;}

/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width: 100%;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;

}
/* 3 Column settings */
.threecol {
background-image: url('DCIMAGE3.jpg');
}
.threecol .colmid {
right:25%;
background-image: url('DCIMAGE3.jpg');
}
.threecol .colleft {
right:50%;
background-color: #ffffff;

}
.threecol .col1 {
width:46%;
text-align: center;
}
.threecol .col2 {
width:21%; left:31%;
}
.threecol .col3 {
width:21%;
left:85%; }


ul id="navigation">

<li><a href="www.zphibeasternregion.org">Home</a></li>
<li><a href="#">National Links</a><ul>
<li><a href="www.zphib1920.org">Zeta Phi Beta Sorority, Inc.</a></li>
<li><a href="http://www.zphib1920.org/antihazing.html">
Sorority's Statement on Hazing</a></li></ul>
</li>

<li><a href="#">States</a><ul>

<li><a href="DistrictofColumbia.htm">District of Columbia</a></li>
<li><a href="NorthCarolina.htm">North Carolina</a></li>
<li><a href="Virginia.htm">Virginia</a></li>
<li><a href="WestVirginia.htm">West Virginia</a></li></ul></li>
<li><a href="#">Contact us</a><ul>
<li><a href="regionalleadership.htm">Regional Leadership</a></li></ul>

</li>
</ul>

*****html
<div class="colmask threecol">


<div class="colmid">


<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<p>fajdflajslrejlaje;jerjekkj</p>
<!-- Column 1 end -->
</div>


<div class="col2">
<!-- Column 2 start -->
<p>fajdflajslrejlaje;jerjekkj</p>
<!-- Column 2 end -->


</div>

<div class="col3">
<!-- Column 3 start -->
<p>fajdflajslrejlaje;jerjekkj</p>

<!-- Column 3 end -->

</div>
</div>
</div>

I recently changed my navigation links from js to html and css based links but have a few problems with the layout, I wonder if you anyone can help?

http://www.for-rent-nerja.co.uk/

If you rollover the 'For Rent' dropdown do you notice how the dropdown is appearing under my sidebar! Is there any way to repair that?

It is running from http://www.for-rent-nerja.co.uk/nav_menu/style.css

I am also having problems stretching the width of the links to fit my 950px width, they seem to break apart after about 140px individually!

I'm aware that the menu in my site can get too-big to display properly at low to medium resolutions and/or browser windows that aren't maximized, so after considering a couple of possible solutions i figured i'd fix it by putting everything into five general categories, two of which would have subcategories (and some of the subcategories would have subsubcategories, and that's as far as it goes). So...

...I'm looking for a code to turn my menu into a dropdown one. Now, as far as i'm concerned there are three types of dropdown menus, two of which i don't like and thus don't want. Google only returns results for one type, which, true to Murphy's law, is one of the two i don't want.

Example of the one i want: the one on the top menu on this site ("HOME", "TUTORIAL", "FORUM", "QUICK LIST") (with possibility of images and that kind of stuff)

Example of the one i don't want that Google returns: the kind on this site (default computer type)

Example of the one i don't want that Google doesn't return: the kind that appears when you click on "Search", "KotV Roster" or any of those links on this site (forum type)

I tried to copy the relevant code on the first page i linked to, but either i didn't copy all that's relevant or i'm doing something wrong with it. I considered both possibilities and tried to fix things, but all failed. So how do i do it?

Here's a rough picture of exactly what i want: click. I hope the notes and pictures are enough, but if something is unclear please ask away. Sorry for the weird font, but i didn't pay much attention to how the whole thing looked; it's just a quick sketch i made in two minutes.

Thanks in advance.

Hi,
I have a menu that lets me select from multiple options, and I want that any option that I choose will lead me to another website, after that I click the submit button.
How I do this?

Code:

<form action="" method="post">

<select name="Dropdown Menu" id="menu">
<option selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<input type="submit" value="" id="button">
</form>

Thanks,
Steve

I had a program automatically generate code for me for a dropdown menu, but whenever I place the code into iWeb the HTML snippet just makes a blank box.

Can anyone give me a hand?

Here's the code:

Code:

<script src="psnavjs.js" type="text/javascript"></script><noscript><OBJECT id="psnavobj" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=950 HEIGHT=53> <PARAM NAME=movie VALUE="psnav.swf"> <PARAM NAME=menu VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED src="psnav.swf" menu=false quality=high bgcolor=#000000  WIDTH=950 HEIGHT=53 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED></OBJECT></noscript>

im having trouble with a drop-down menu.
when i highlight the <li>'s that drop down, i can't do anything that will make them dissapear. here's my java:
Code:

      <script type="text/javascript"><!--//--><![CDATA[//><!--

      sfHover = function() {
	      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	      for (var i=0; i<sfEls.length; i++) {
		      sfEls[i].onmouseover=function() {
			      this.className+=" sfhover";
		      }
		      sfEls[i].onmouseout=function() {
			      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		      }
	      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      //--><!]]></script>

heres my html:
Code:

      			  <li><a href="#">About us</a>
	      			  <ul>
	      				  <li><a href="#">Our company</a></li>
		      			  <li><a href="#">Services we offer</a></li>
		      			  <li><a href="#">Meet our people</a></li>
		      		  </ul>
	      		  </li>

heres my css:
Code:

/* drop down navigation */

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 0.6em;
	background: #333;
	font-weight: normal;
	padding: 0;
	border: solid thin #000;
	margin: 15px 0 30px 0;
	color:#fff;
}

#nav a {
	display: block;
	width: 124px;
	color: #fff;
	text-decoration: none;
	font-size:0.7em;
	padding:7px;
	border-left: solid 4px #000;
}

#nav li {
	float: left;
	padding: 0;
	width: 20%;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 10%;
	width: 13.9em;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
	padding:0;
}

#nav li li {
  margin-left:-1px;
	width: 13em;
}

#nav li ul a {
	width: 205px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav a:hover{
	background: #444;
}

/* end of drop down navigation*/

any ideas???

Is there anything wrong with this li tag?

<li><a href="uc.html" class="underline">Item 1</a></li>

uc.html is located in the same directory.
The menu is disabled and doesn't work. I can't find out what the problem is.

Hello

I have a problem that i dont know how to fix with drop down menu's

i seem to be missing out something

i applied a tutorial and eventually came up with this
http://www.piglatinhiphop.com/drop/index.htm

what i basically want is when i hover on the button "Services" to show the menu which works fine but there are 3 rows of buttons and the button Services is on one of them sitting there alone

i tried to fix it by just clicking backspace in frong page and came up with this result
http://www.piglatinhiphop.com/drop/gs.htm

but u see when i hover services it dont drop down nothing
and if u notice there ill still be a second row that will have a black area to the far left, thats the area that will show the drop down menu

also if u hover sumwhere below the button "Downloads" the list drops

now see i want the site to look as it is on the main official page
www.piglatinhiphop.com

but also have the list to drop when u hover "Services"

The files are attached with what i came up with when i 1st applied the tutorial (the 1st result that had 3 rows)

Please help me out, i am doing a favor to a friend and i dont want to fail him

Thanks

I am trying to implement a CSS dropdown menu into my site. I have it put in and positioned properly but when I hover over the links the menu doesn't drop. I have checked z-index's but other than that I am lost. I attached just the menu and the menu in the site.

Menu Only (This Works):
Code:

<!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">
<style media="all" type="text/css">@import "menu/menu_style.css";</style>
<div>
<ul class="menu">
<li class="top"><a href="www.collegecovers.com" target="_self" class="top_link"><span>Home</span></a>
</li>
<li class="top"><a href="www.collegecovers.com/schools.html" target="_self" class="top_link"><span>Shop By School</span></a>
<ul class="sub">
<li><a href="www.collegecovers.com/alabama.html" target="_self">Alabama</a></li>
<li><a href="www.collegecovers.com/arkansas.html" target="_self">Arkansas</a></li>
<li><a href="www.collegecovers.com/auburn.html" target="_self">Auburn</a></li>
<li><a href="www.collegecovers.com/clemson.html" target="_self">Clemson</a></li>
<li><a href="www.collegecovers.com/duke.html" target="_self">Duke</a></li>
<li><a href="www.collegecovers.com/florida.html" target="_self">Florida</a></li>
<li><a href="www.collegecovers.com/floridastate.html" target="_self">Florida State</a></li>
<li><a href="www.collegecovers.com/georgia.html" target="_self">Georgia</a></li>
<li><a href="www.collegecovers.com/gonzaga.html" target="_self">Gonzaga</a></li>
<li><a href="www.collegecovers.com/georgetown.html" target="_self">Georgetown</a></li>
<li><a href="www.collegecovers.com/iowa.html" target="_self">Iowa</a></li>
<li><a href="www.collegecovers.com/iowastate.html" target="_self">Iowa State</a></li>
<li><a href="www.collegecovers.com/kansas.html" target="_self">Kansas</a></li>
<li><a href="www.collegecovers.com/kansasstate.html" target="_self">Kansas State</a></li>
<li><a href="www.collegecovers.com/kentucky.html" target="_self">Kentucky</a></li>
<li><a href="www.collegecovers.com/louisianastate.html" target="_self">Louisiana State</a></li>
<li><a href="www.collegecovers.com/michigan.html" target="_self">Michigan</a></li>
<li><a href="www.collegecovers.com/michiganstate.html" target="_self">Michigan State</a></li>
<li><a href="www.collegecovers.com/northcarolina.html" target="_self">North Carolina</a></li>
<li><a href="www.collegecovers.com/northcarolinastate.html" target="_self">North Carolina State</a></li>
<li><a href="www.collegecovers.com/nebraska.html" target="_self">Nebraska</a></li>
<li><a href="www.collegecovers.com/ohiostate.html" target="_self">Ohio State</a></li>
<li><a href="www.collegecovers.com/oklahoma.html" target="_self">Oklahoma</a></li>
<li><a href="www.collegecovers.com/oklahomastate.html" target="_self">Oklahoma State</a></li>
<li><a href="www.collegecovers.com/oregon.html" target="_self">Oregon</a></li>
<li><a href="www.collegecovers.com/oregonstate.html" target="_self">Oregon State</a></li>
<li><a href="www.collegecovers.com/penn.html" target="_self">Penn State</a></li>
<li><a href="www.collegecovers.com/southcarolina.html" target="_self">Oregon</a></li>
<li><a href="www.collegecovers.com/texas.html" target="_self">Texas</a></li>
<li><a href="www.collegecovers.com/texasam.html" target="_self">Texas A&M</a></li>
<li><a href="www.collegecovers.com/texastech.html" target="_self">Texas Tech</a></li>
<li><a href="www.collegecovers.com/vanderbilt.html" target="_self">Vanderbilt</a></li>
<li><a href="www.collegecovers.com/wakeforest.html" target="_self">Wake Forest</a></li>
<li><a href="www.collegecovers.com/westvirginia.html" target="_self">West Virginia</a></li>
</ul>
</li>
<li class="top"><a href="www.collegecovers.com/category.html" target="_self" class="top_link"><span>Shop By Category</span></a>
<ul class="sub">
<li><a href="www.collegecovers.com/bib.html" target="_self">Bed in a Bag</a></li>
<li><a href="www.collegecovers.com/comforter.html" target="_self">Comforters</a></li>
<li><a href="www.collegecovers.com/sheets.html" target="_self">Sheets</a></li>
<li><a href="www.collegecovers.com/futon.html" target="_self">Futon Covers</a></li>
<li><a href="www.collegecovers.com/crib.html" target="_self">Crib Covers </a></li>
<li><a href="www.collegecovers.com/etc.html" target="_self">Accessories</a></li>
</ul>
</li>
<li class="top"><a href="www.collegecovers.com/register.html" target="_self" class="top_link"><span>Register</span></a>
</li>
<li class="top"><a href="www.collegecovers.com/contactus.html" target="_self" class="top_link"><span>Contact Us</span></a>
</li>
</ul>
</div>
</body>
</html>

Menu on site (Not working):
Code:

.bg {background: url(images/button4.gif);}
.menu {
	padding:0 0 0 32px;
	margin:0;
	list-style:none;
	height:40px;
	background:#fff url(images/button1a.gif) repeat-x;
	position:relative;
	font-family:arial, verdana, sans-serif;
	z-index: 100;
	visibility: visible;
}
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:100;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Thank you for the help!

Reference:

http://www.skinquotient.com

This is a shopping cart using OSCommerce. In the left hand column, you will notice that the second item from the top is a drop down menu titled "Shop by Concern".

The length of some of the value in the shop by concern drop down menu are wider than the width of the left column.

In firefox, when you open the menu, the menu itself expands wider then the width of the column so life is good.

Of course, IE likes to make your life difficult, so in IE the menu values are truncated to fit the column width.

I don't want to make that left column wider - I want to leave as much room as possible in the main body for content. My preferred solution would be to somehow make that menu expand in IE like it does in firefox, however I don't know if this is possible.

Ideas are welcome!