22 replies [Last post]
jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok, i know how to create a drop down menu using css, the only problem is that all of the code i have used doesnt apply to this. Here is what i have: I have a nav menu in tables (i know why am i using tables) i have one sub section that needs to appear to the right of a link.

#wrapper { text-align:left; margin:0px; width:195px; border:1px solid #000000; padding:0px; background-color:#FFFFCC; }

#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}

#wrapper a:hover {
color: #003366;
text-decoration:underline;
}

#wrapper li {
position:relative;
}

#wrapper ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 100%;
width: 100%;
display:block;
}

#wrapper ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
background-color:#FFFFCC;
color:#000000;
}

#wrapper a ul li:hover ul li {
display:none;
}

#wrapper is the main table
so why wont this work, im not a pro so i am sure there are mistakes. If you can help me please do so, if you have any questions please ask.

Thank you.

yess

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok new plan

let me know if you want to take a look at my whole script, i can send it to you. There are only a few images not pertaining to the page. I have made some changes.

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

http://csscreator.com/menu/mu

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

thanks but...

I know how to do all of that, its just the problem is im trying to manipulate that code into using it on tables



Send E-card


  • Ebby

  • Ellen

  • DPM

the problem is what do i call to hover over i have right now

th:hover ul li

this is the only area where i use the tags ul and li

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

jcdevelopment wrote:I know

jcdevelopment wrote:
I know how to do all of that, its just the problem is im trying to manipulate that code into using it on tables

don't?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

what do you mean dont?

what do you mean dont?

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

use the appropriate UL and

use the appropriate UL and LI and then stick that into a table where the nav should be?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

see, i thought i was here

see, i thought i was here take a look at both

CSS:

div#listmenu li {
float:left;
list-style-type:none;
}

div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;

}

body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}

div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}

HTML:





Send E-card


  • Ebby

  • Ellen

  • DPM






Where did i mess up?

yess

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Get rid of the tables

Get rid of the tables entirely, it's completely unnecessary.

Verschwindende wrote:
  • CSS doesn't make pies

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

well, i have pictures placed

well, i have pictures placed in a specific area, so the tables control it better, and i had already created it so i just wanted to see if there was a way. Is there a way?

yess

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Yes, and ditching tables is

Yes, and ditching tables is a better way to do it.

If you post all your HTML and CSS (in between code tags please) we can have a more in-depth look at it.

Verschwindende wrote:
  • CSS doesn't make pies

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok, take a look at it here

ok, take a look at it
here is the whole thing

Left nav 2.0

* th {
padding-left:2px;
}

body {
behavior: url(csshover.htc);
}

#wrapper {
text-align:left;
margin:0px;
width:195px;
border:1px solid #000000;
padding:0px;
background-color:#FFFFCC;
}

#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}

#wrapper a:hover {
color: #003366;
text-decoration:underline;
}

div#tableb th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableba th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb2 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb3 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb4 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb5 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb6 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb7 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

.style1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
}

.style2 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
}

a.style2{
text-decoration:none;
}
.style3 {font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
color: #000000;
text-align:center;
}

div#listmenu li {
float:left;
list-style-type:none;
}

div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;

}

body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}

div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}



Marketing





Send E-card







Buyer/Seller Packet


Buyer/Seller Packet Esp.


Homeshow


Virtual Tours


Logos


Media Kits


Advertising Info


Do Not Call Search



Career Development


Ebby Hours


Calender



Relocation


Outgoing Referral


Client Relocation


Blanket Account List


Referral Update


Buyer Registration


Seller Registration



Resource Library


Associate Resources


Forms Manual


Library of Letters


Vendor Directory


Spanish Resources


Independent Contractor Guidlines


Legal Resources


Tax Info



Useful Links


Smart Links


Industry Links


Agent Discounts


Government Agencies


Schools/Education



Partners


Ebby Builder Services


Home Team Insurance


Home Team Mortgage


Alumni Group



Technology


E-mail


Market


Rappatoni


Ebbyware


Tech Links


[Employee Info]
[Managers]

yess

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Where's the top bit? The

Where's the top bit? The doctype, the opening HTML tag, the opening head tag, etc.

Verschwindende wrote:
  • CSS doesn't make pies

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

i just left that out, do you

i just left that out, do you need it too?

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

it won't validate without it.

it won't validate without it.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok heres the whole

ok heres the whole thing.

Left nav 2.0

* th {
padding-left:2px;
}

body {
behavior: url(csshover.htc);
}

#wrapper {
text-align:left;
margin:0px;
width:195px;
border:1px solid #000000;
padding:0px;
background-color:#FFFFCC;
}

#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}

#wrapper a:hover {
color: #003366;
text-decoration:underline;
}

div#tableb th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableba th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb2 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb3 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb4 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb5 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb6 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

div#tableb7 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}

.style1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
}

.style2 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
}

a.style2{
text-decoration:none;
}
.style3 {font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
color: #000000;
text-align:center;
}

div#listmenu li {
float:left;
list-style-type:none;
}

div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;

}

body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}

div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}



Marketing





Send E-card







Buyer/Seller Packet


Buyer/Seller Packet Esp.


Homeshow


Virtual Tours


Logos


Media Kits


Advertising Info


Do Not Call Search



Career Development


Ebby Hours


Calender



Relocation


Outgoing Referral


Client Relocation


Blanket Account List


Referral Update


Buyer Registration


Seller Registration



Resource Library


Associate Resources


Forms Manual


Library of Letters


Vendor Directory


Spanish Resources


Independent Contractor Guidlines


Legal Resources


Tax Info



Useful Links


Smart Links


Industry Links


Agent Discounts


Government Agencies


Schools/Education



Partners


Ebby Builder Services


Home Team Insurance


Home Team Mortgage


Alumni Group



Technology


E-mail


Market


Rappatoni


Ebbyware


Tech Links


[Employee Info]
[Managers]

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

For a giant list of links...

For a giant list of links... you really don't need tables.
Just build a ul and style it.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

i may sound stupid, but what

i may sound stupid, but what about the images that go to the left in a specific area?

yess

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

set them as a background of

set them as a background of the li and add a little padding.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok, thank you to everyone

ok, thank you to everyone for helping me, i will just re-do it into lists.

yess

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Keep us posted, there are

Keep us posted, there are gotchas when using lists that you might not know about!

Verschwindende wrote:
  • CSS doesn't make pies

jcdevelopment
jcdevelopment's picture
Offline
Regular
Dallas, tx
Last seen: 12 years 3 weeks ago
Dallas, tx
Joined: 2007-10-17
Posts: 17
Points: 0

ok, i was able to keep my

ok, i was able to keep my outlining tables and use the ul li to make it work, i appreciate everything.

yess

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Glad you got it working

Glad you got it working Laughing out loud However you should try and move towards a table-free environment Wink

Verschwindende wrote:
  • CSS doesn't make pies