homepage Welcome to WebmasterWorld Guest from 23.22.137.135
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS 2 Level Horizontal Nav problem
starting from Adobe Spry code..
skywalker




msg:3681557
 3:40 pm on Jun 23, 2008 (gmt 0)

Hi,

Moving along further with my newly honed CSS skills ;-) acquired from the feedback on my last site, thanks to Suzy and all.

I am trying to template a CSS page which has a simple two level (all horizontal) navigation, I have decided on Spry as that gave me some of the basics already but I am really struggling now to show this how I want it.

Basically I have 7 main nav titles in the first line which are all white out of orange. When you roll over each there are up to seven sub sections which are needed to be all grey text appearing underneath the white list. So if you rollover 'Stuff We Do' the 'Museums & Exhibitions' to 'Signage' list comes up. But I want each one of those selectable and all in one line, not a vertical list.

Sorry, this may be a simple task, but it really is doing my head in ;-(

Here is the code


<div id="topmenu">
<ul id="homemenu" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Big Stuff</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Stuff We Do</a>
<ul>
<li><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a></li>
<li><a href="#">Stuff Others Say</a></li>
<li><a href="#">Tech Stuff</a></li>
<li><a href="#">Contact Stuff</a></li>
</ul>
</div>

Here is the Spry CSS file


ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
color: #FFFFFF;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
float: left;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-repeat: repeat;
visibility: inherit;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #F7840C;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #FFFFFF;
color: #FFF;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

Thanks in anticipation

EDIT: I put ( ) within this whole post so I showed code within forum rules but it has not worked. Tried to read through all the code posting threads and nothing showed me this was incorrect, can anyone please educate a newbie on this?.

Don't want to upset anyone ;-)

[edited by: tedster at 7:41 pm (utc) on June 23, 2008]
[edit reason] remove link from coded comment [/edit]

 

skywalker




msg:3683256
 4:46 pm on Jun 25, 2008 (gmt 0)

Anyone ;-) ?

appi2




msg:3683260
 4:52 pm on Jun 25, 2008 (gmt 0)

Problem is your using spry, without the spry/javascript code its to hard for anyone to answer.
Try suckerfish menu same thing but none of this adobe silliness.
Just my opinion.

skywalker




msg:3683268
 5:03 pm on Jun 25, 2008 (gmt 0)

appi2, thanks for the reply.

I really don't know what else to paste up here. Y'know I am a little hesitant to cut and paste anything which is not 'correct' for the forum or 'too much'

It is difficult enough trying to learn CSS before I get into the politics of do's and don'ts on these technical forums.

But thank you for at least pointing me somewhere, I am looking at Suckerfish now. But my main problem is finding a nav example which has one line of sections, when you roll over any one a second lower line appears as a sub nav and you can select any one of those.

Cheers

Philosopher




msg:3683280
 5:14 pm on Jun 25, 2008 (gmt 0)

Why don't you take a look at this thread from a couple of weeks ago.

[webmasterworld.com...]

It may provide you with a good foundation for what you are trying to do (examples and all).

appi2




msg:3683296
 5:27 pm on Jun 25, 2008 (gmt 0)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Dropdown Menu</title>
<script type="text/javascript">
var sfHover = function () {
var Atags = document.getElementById("nav").getElementsByTagName("a");
for (var t = 0; t < Atags.length; t++) {
Atags[t].onfocus = function () {
var closemD = document.getElementById("nav").getElementsByTagName("ul");
for (var t = 0; t < closemD.length; t++) {
closemD[t].style.left = '-999px';
closemD[t].id = 'menuID'+t;
}
var parent = this;
while (parent.id !== "nav") {
parent = parent.parentNode;
if (parent.nodeName === "UL") {
parent.style.left = 'auto';
}
}
if (this.nextSibling) {
var nextSib = this.nextSibling;
while (nextSib.nodeType !== 1) {
nextSib = nextSib.nextSibling;
}
if (nextSib) {
nextSib.style.left = 'auto';
}
}
};
}
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var t=0; t < sfEls.length; t++) {
sfEls[t].onmouseover = function () {
if (this.childNodes[2]) {
this.childNodes[2].style.left = 'auto';
}
}
sfEls[t].onmouseout = function () {
if (this.childNodes[2]) {
this.childNodes[2].style.left = '-999px';
}
}
}
};
window.onload = sfHover;
</script>

<style type="text/css">
/*START OF TOP DROP DOWN NAVIGATION MENU*/
* {margin:0;padding:0;}
#wrapper {width:900px;
}
#nav, #nav ul{
float: left;
list-style: none;
line-height:1;
background:transparent;
padding-left:0px;
margin:0px;
border-right:1px solid #000;
}

#nav a {
color:#FFFFFF;
background-color:#535353;
font-size: 15px;
display: block;
text-align:center;
text-decoration: none;
padding: 0.6em 0em;
border-top:1px solid #5c0904;
border-right:1px solid #515155;
border-bottom:1px solid #565720;
border-left: 1px solid #343428;
}

#nav li {
float: left;
padding: 0;
/*width:149px;*/width:123px;
background-color:#808000;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
margin: 0;
width:123px;
background-color:transparent;
}

#nav li li ,#nav li li li {
width:123px;
}

#nav li ul a {
color:#FFFFFF;
background-color:#828282;
text-align:center;
text-decoration:none;
padding: 0.6em 0;
border-top:1px solid #C3C49B;
border-right:1px solid #424319;
border-bottom:1px solid #565720;
border-left: 1px solid #A2A262;
}

#nav li ul ul {
margin: -1.85em 0 0 123px;
}

#nav li:focus ul ul,#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:focus ul,#nav li:hover ul,#nav li:active 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:focus,#nav a:hover,#nav a:active, #nav li ul a:hover{
color: #000000;
background: #e3dac5;
width:120px;
border-top:1px solid #565720;
border-right:1px solid #A2A262;
border-bottom:1px solid #C3C49B;
border-left: 1px solid #424319;
}

#nav li:hover, #nav li.sfhover, #navsmall li:hover {
background: #e3dac5;
}
/*END OF TOP DROP DOWN NAVIGATION MENU*/
</style>

</head>

<body>
<div id="wrapper">
<ul id="nav">
<li><a href="#">Big Stuff</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a></li>
<li><a href="#">Stuff We Do</a>
<ul>
<li><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a></li>
<li><a href="#">Stuff Others Say</a></li>
<li><a href="#">Tech Stuff</a></li>
<li><a href="#">Contact Stuff</a></li>
</ul>
</div>
</body>
</html>

The javascript is for IE6 and to get other browsers to show menu if someones uses the keyboard tab. It works with mouse hover on all newer browsers without the javascript. And looking at that old js code its a bit silly way of doing it, Was my first attempt a while ago. Some of the CSS is not needed, I've just done a quick cut and paste.

whoops dual horizontal, gah. yeah can be done. may post later.

skywalker




msg:3683327
 5:55 pm on Jun 25, 2008 (gmt 0)

Thanks guys, really appreciate the feedback. Had a look at the other thread Philosopher and having a really good read, some great info to help me understand first how they work.

Appi2, thanks for looking at the code, yeah all this is generated in Spry from Dreamweaver. They add these things for numbties like me and they are even more complicated than a correct stripped down version.

I have recently just changed my whole constructing attitude from frames to CSS, that was brain numbing to start with, but I am getting there ;-)

This is the final hurdle for me at the moment and any help on a workable 2 level horizontal nav would be great.

Thanks All

Nick

appi2




msg:3683491
 9:08 pm on Jun 25, 2008 (gmt 0)

You will need to add a bit of javasript for this to work in IE6.

I've made it centered, which then gives problems with the second level and where it shows on the left of the window.

I've added first/last class as its always handy to have (the green and tan colours).

Sizes are in em's. Which helps if some blind bat comes along with font size set to massive, the menu doesnt break.

Its by no means finished, lots of things to get right and play with.

Rather than me typing out lots of comments and why and what for, just ask or even better google ;) Have a play break it, add stuff, remove stuff and learn

Anyhoo have fun.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Dropdown Menu</title>

<style type="text/css">
/*START OF TOP DROP DOWN NAVIGATION MENU*/
* {
margin:0;
padding:0;
}

body {
font-size:100%;
}

.wrapper {
background-color: #F7840C;
height:1.4em;
width:100%;
border-bottom:1.4em solid red;
}
/*########################
START First Level of Menu
*/
#nav {
margin:0 auto;
text-align:center;
list-style: none;
width:56.3em;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}

#nav li {
float: left;
background-color: #F7840C;
padding: 0;
width:8em;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
background: #fff;
color:#000;
}

#nav a {
color:#FFFFFF;
display: block;
text-align:center;
text-decoration: none;
padding: 0.2em 0;
}

#nav a:focus,#nav a:hover,#nav a:active {
width:8em;
color:#000;
}
/*
END First Level of Menu
#######################*/

/*########################
START Second Level of Menu
*/
#nav ul{
list-style: none;
position: absolute;
left: -999em;
}

#nav li:hover ul {
position: absolute;
left:0;
top:auto;
margin-left:50px;
}

#nav li li {
float:left;
width:8em;
}

#nav li ul li a {
color:#fff;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}

#nav li li:hover {
border:0;
}

#nav li ul a:hover{
text-decoration:underline;
color:#000;
}
.twoline, .twoline a {
width:200px !important;
}
.first {background:green !important;}
.last {background:tan !important;}

/*END OF TOP DROP DOWN NAVIGATION MENU*/
</style>

</head>

<body>
<div class="wrapper">
<ul id="nav">
<li class="first"><a href="#">Big Stuff</a>
<ul>
<li class="first"><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li class="last"><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a></li>
<li><a href="#">Stuff We Do</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a></li>
<li><a href="#">Stuff Others Say</a></li>
<li><a href="#">Tech Stuff</a></li>
<li class="last"><a href="#">Contact Stuff</a></li>
</ul>
</div>
</body>
</html>

ps I just had a play with the adobe spry version. I wanted to cry.

skywalker




msg:3683834
 8:13 am on Jun 26, 2008 (gmt 0)

Appi2,

You are a twenty two carat diamond!, thanks ever so much for doing this.

I just need to get my head round how I implement this. Do I put the top part in the CSS and the bottom part in my <body>?

Sorry still a bit of a newbie at this and heavily reliant on DW, which I can see is where my problems are coming from. If you could tell me exactly what I need to do with the above I can fiddle around with it.

Fab job, cheers

Nick

appi2




msg:3683998
 12:36 pm on Jun 26, 2008 (gmt 0)

Your confusing me now;) erm not sure what your asking by top and bottom. That post above (two up from this) is a whole HTML file.

skywalker




msg:3684015
 1:13 pm on Jun 26, 2008 (gmt 0)

Sorry appi2, I thought that the post you were talking about had two parts because of the split in the file saying Start and End. My mistake.

I copied and pasted your earlier html into a text doc and saved up to my server to see and it just came out code, so I thought the second one may need splitting to work.

But I have just now copied and pasted the html above in a new page in DW and uploaded to server and ............. wahaaaaay it looks great.

Much, much more closer to what I was looking to try and do in Spry.

Damn you Spry, damn you to hadeeeeeesss.

I am going to have a tweak now, just need the second line to pop up grey text on pure white without any blocks and I am away.

Thank you soooo much for this, you are a superstar.

Cheers

Nick

skywalker




msg:3684152
 3:16 pm on Jun 26, 2008 (gmt 0)

Appi2,

Don't know if you are looking in ;-)

But I am struggling with the fiddling about on this nav you kindly provided. My problem is that I am unsure exactly what parts of the code I am changing to get the effect I need. I have already had a stab at the text colours for the second nav, but on changing that to a grey the top nav also changes. will I have to split both these with different styles?

Is there any navs for newbies pages around I can get a handle on which li, a, hover, goes where.

Sorry for the questions again, I really want to learn this but it still is a bit deep and I am worried about screwing the whole thing up. I have already tried to bring the nav into my page and style there and it has gone badly wrong. So I thought it better to restyle separately and get it how I need it and then get to the next hurdle of inserting it and positioning it.

It's tough, but lots of fun ;-)

Cheers

Nick

appi2




msg:3684203
 4:14 pm on Jun 26, 2008 (gmt 0)

This is where CSS cascade comes in.

very basic 2 level


<ul id="nav">
<li>one
<ul>
<li>two</li>
</ul>
</li>
</ul>

The first row of the menu is/can be controlled by

eg.1
#nav
#nav li
#nav li:hover
#nav li a
#nav li a:hover

and the second level by
eg.2
#nav ul
#nav ul li
#nav ul li:hover
#nav ul li a
#nav ul li a:hover

Problem is the first row (eg.1) will also effect the second level (eg.2), thats because what those rules are saying is...

#nav li {background:red;}

which means make all the <li> that are children of the element with an ID of nav have a background colour of red. So thats what it does, it makes ALL the <li> background red.

Ok so, say we want the second level to be green then we would have to overide the rule with...

#nav ul li {background:green}

and that would only effect the second level <li> and make them green

By the way it may be helpful to think of the #nav as UL as thats what it is.

Now things get difficult because theres also the :hover stuff to consider aswell.

And don't forget you can colour any element, the <UL>, <LI> and the <A>. As well as what happens when the mouse hovers.

Also I do think your trying to run before you can walk, but sometimes you gotta try so you can understand when its good to walk first :)

As for messing things up, just keep making copies then you can see the before and after of your edits.

As for is there any newby guides- whats google say ;)

skywalker




msg:3684399
 7:03 pm on Jun 26, 2008 (gmt 0)

Appi2,

Sorry have not replied, been trying to get my head round all this.

Still very much confused, but will keep trying ;-(

skywalker




msg:3688443
 12:50 pm on Jul 2, 2008 (gmt 0)

Appi2,

A good few days tweaking and I now have your nav suggestion working visually exactly how I always wanted ;-)

Huge thanks to you. You were right, it was just a case of me trawling through, step by step changing this, viewing in browser until I understood which bit controls which.

I cannot stress how much I have learnt off your valuable help, I really feel I have climbed a mountain ;-)

I am just putting together all the other elements and have even cleared out all my CSS and dropped into a style sheet, something I was still learning about and seem to also have conquered.

I have one tiny, tiny little niggle now ;-)

I have been trying to centre the whole page in the browser window. Yes, I have searched through loads of threads, wrappers, DIVs, Containers all explained. But I cannot get this content wrapping right as the centering is simply not working.

If I was to centre the page, would this also cause position problems with my other DIVs as they all correspond to a certain page width currently.

Can anyone please help me on this, the code for the page is quite small and I can cut and paste....if I knew how to wrap that properly for the forum rules, think I got it wrong last time.

Any help would be gratefully appreciated.

Ta

skywalker




msg:3688446
 1:02 pm on Jul 2, 2008 (gmt 0)

Sorry Guys......

Had a look at my handywork in Firefox and Opera and the nav is looking pants! I was viewing in Safari earlier and everything looked great. I know, I know, all browsers are different and I have all to check but I really though working in Safari things would be fine.

I see from my code that there is no Doc Type displaying which will cause some problems, I need to rectify that.

I would love to just cut and paste the page here and now ;-)

Ta

skywalker




msg:3688450
 1:09 pm on Jul 2, 2008 (gmt 0)

Here goes..........

<html>
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="FW MX CSS Layer">
<style type="text/css">

</style>
<link href="stuffstyle.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class=".centered" id=".centered">
<div id="indexr1c1"></div>
<div id="indexr1c17"><img name="index_r1_c17" src="images/index_r1_c17.jpg" width="151" height="47" border="0"></div>
<div id="indexr1c18"></div>
<div id="indexr2c17"><img name="index_r2_c17" src="images/index_r2_c17.jpg" width="151" height="93" border="0"></div>
<div id="indexr3c18"><img name="index_r3_c18" src="images/index_r3_c18.jpg" width="77" height="91" border="0"></div>
<div id="indexr4c1"></div>
<div id="indexr4c2"></div>
<div id="indexr4c4"><img name="index_r4_c4" src="images/index_r4_c4.jpg" width="69" height="78" border="0"></div>
<div id="indexr4c6"><img name="index_r4_c6" src="images/index_r4_c6.jpg" width="54" height="78" border="0"></div>
<div id="indexr4c7"><img name="index_r4_c7" src="images/index_r4_c7.jpg" width="66" height="78" border="0"></div>
<div id="indexr4c9"><img name="index_r4_c9" src="images/index_r4_c9.jpg" width="68" height="78" border="0"></div>
<div id="indexr4c10"><img name="index_r4_c10" src="images/index_r4_c10.jpg" width="52" height="78" border="0"></div>
<div id="indexr4c12"><img name="index_r4_c12" src="images/index_r4_c12.jpg" width="70" height="78" border="0"></div>
<div id="indexr4c13"></div>
<div id="indexr5c2"></div>
<div id="indexr5c3"><img name="index_r5_c3" src="images/index_r5_c3.jpg" width="9" height="16" border="0"></div>
<div id="indexr5c13"></div>
<div id="indexr6c3"><img name="index_r6_c3" src="images/index_r6_c3.jpg" width="9" height="8" border="0"></div>
<div id="indexr6c14"><img name="index_r6_c14" src="images/index_r6_c13.jpg" width="210" height="37" border="0"></div>
<div id="indexr7c3"><img name="index_r7_c3" src="images/index_r7_c3.jpg" width="9" height="76" border="0"></div>
<div id="indexr8c4"><img name="index_r8_c4" src="images/index_r8_c4.jpg" width="2" height="35" border="0"></div>
<div id="indexr8c5"></div>
<div id="indexr8c20"><img name="index_r8_c20" src="images/index_r8_c20.jpg" width="9" height="47" border="0"></div>
<div id="indexr8c21"><img name="index_r8_c21" src="images/index_r8_c21.jpg" width="14" height="56" border="0"></div>
<div id="indexr8c22"></div>
<div id="indexr8c23"><img name="index_r8_c23" src="images/index_r8_c23.jpg" width="35" height="862" border="0"></div>
<div id="indexr9c5"><img name="index_r9_c5" src="images/index_r9_c4.jpg" width="748" height="12" border="0"> </div>
<div id="topmenu"></div>
<div class="wrapper">
<ul id="nav">
<li class="first"><a href="#">Big Stuff</a>
<ul>
<li class="twoline first"><a href="#">Maximum Impact</a> </li>
<li><a href="#">About Us</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a>
<ul>
<li class="twoline first"><a href="#">Minimum Fuss</a> </li>
<li><a href="#">Option</a></li>
<li><a href="#">Option</a></li>
<li><a href="#">Option</a></li>
<li><a href="#">Option</a></li>
<li class="last"><a href="#">Option</a></li>
</ul>
</li>
<li><a href="#">Stuff We Do</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Stuff Others Say</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Tech Stuff</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li class="last"><a href="#">Contact Stuff</a></li>
</ul>
</div>
<div id="indexr10c3"><img name="index_r10_c3" src="images/index_r10_c3.jpg" width="9" height="9" border="0"></div>
<div id="indexr10c4"><img name="index_r10_c4" src="images/index_r10_c4.jpg" width="748" height="9" border="0"></div>
<div id="indexr10c20"><img name="index_r10_c20" src="images/index_r10_c20.jpg" width="9" height="9" border="0"></div>
<div id="indexr11c2"></div>
<div id="indexr11c3"></div>
<div id="indexr11c21"></div>
<div id="indexr12c1"></div>
<div id="indexr12c22"></div>
<div id="indexr13c2"></div>
<div id="indexr13c15"></div>
<div id="indexr13c21"></div>
<div id="indexr14c16"></div>
<div id="indexr16c3"></div>
<div id="indexr16c16"></div>
<div id="indexr18c16"><img name="index_r18_c16" src="images/index_r18_c16.jpg" width="269" height="5" border="0"></div>
<div id="indexr20c3"><img name="index_r20_c3" src="images/index_r20_c3.jpg" width="157" height="12" border="0"></div>
<div id="indexr20c8"></div>
<div id="indexr20c16"></div>
<div id="indexr21c2"><img name="index_r21_c2" src="images/index_r21_c2.jpg" width="170" height="237" border="0"></div>
<div id="indexr21c8"></div>
<div id="indexr21c11"><img name="index_r21_c11" src="images/index_r21_c11.jpg" width="173" height="237" border="0"></div>
<div id="indexr24c2"></div>
<div id="indexr24c3"></div>
<div id="indexr24c21"></div>
<div id="indexr25c3"><img name="index_r25_c3" src="images/index_r25_c3.jpg" width="9" height="10" border="0"></div>
<div id="indexr25c5"></div>
<div id="indexr25c19"><img name="index_r25_c19" src="images/index_r25_c19.jpg" width="10" height="10" border="0"></div>
<div id="indexr26c3"><img name="index_r26_c3" src="images/index_r26_c3.jpg" width="9" height="19" border="0"></div>
<div id="indexr26c5"></div>
<div id="indexr26c19"><img name="index_r26_c19" src="images/index_r26_c19.jpg" width="10" height="19" border="0"></div>
<div id="indexr27c3"><img name="index_r27_c3" src="images/index_r27_c3.jpg" width="9" height="10" border="0"></div>
<div id="indexr27c5"></div>
<div id="indexr27c19"><img name="index_r27_c19" src="images/index_r27_c19.jpg" width="10" height="10" border="0"></div>
<div id="indexr28c3"></div>
<div id="header1"></div>
<div id="header2"></div>
<div id="header3"></div>
<div id="header4"></div>
<div id="header5"></div>
<div id="header6"></div>
<div id="header7"></div>
<div id="header8"></div>
<div id="header9"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
<div id="headera1"></div>
<div id="headera2"></div>
<div id="headera3"></div>
<div id="headera4"></div>
<div id="headera5"></div>
<div id="headera6"></div>
<div id="headera7"></div>
<div id="headera8"></div>
<div id="headera9"></div>
<div id="boxa1"></div>
<div id="boxa2"></div>
<div id="boxa3"></div>
<div id="boxa4"></div>
<div id="boxa5"></div>
<div id="boxa6"></div>
<div id="boxa7"></div>
<div id="boxa8"></div>
<div id="boxa9"></div>
<div id="headerb1"></div>
<div id="headerb2"></div>
<div id="headerb3"></div>
<div id="headerb4"></div>
<div id="headerb5"></div>
<div id="headerb6"></div>
<div id="headerb7"></div>
<div id="headerb8"></div>
<div id="headerb9"></div>
<div id="boxb1"></div>
<div id="boxb2"></div>
<div id="boxb3"></div>
<div id="boxb4"></div>
<div id="boxb5"></div>
<div id="boxb6"></div>
<div id="boxb7"></div>
<div id="boxb8"></div>
<div id="boxb9"></div>
<div id="box3spacer"></div>
</div>
</body>
</html>

EDIT: ONCE AGAIN, I PUT [..code..] & [../code..] TAGS IN BEFORE POSTING AND THEY DO NOT WORK?

changed [code] tags for [quote] tags it works slightly better, [code] only works if there are no blank lines ;)

[edited by: SuzyUK at 10:53 am (utc) on July 6, 2008]
[edit reason] tweaked formatting [/edit]

appi2




msg:3688922
 9:55 pm on Jul 2, 2008 (gmt 0)

Sorry but you can't say don't work and just dump gobs of code on the forum and expect people to fix it for you. Especially when you haven't even bothered to show the CSS (and no that doesn't mean dump loads of CSS as well.)
I'm going to take a pass on this, while you hopefully take time to read learn and understand CSS.

skywalker




msg:3689252
 8:20 am on Jul 3, 2008 (gmt 0)

Whoa Appi2, I am not saying that at all. I am very close to sorting this and I have been putting a lot of time in myself trying to learn, but there are a few problems arising now in other browsers which are getting a bit much to solve as well as other bits myself.

I am a big forum user, everything from AV forums to car forums and I must say I really feel lost in this forum. Perhaps it is the overwhelming complexity of code, what can and cannot be done, go wrong, how stupid or inadequate I may feel up against you guys.... the list is endless.

But the bottom line is, I was looking for some help.

As for the code, in every post I have put in the tags at the start and end of my code to show in the proper manner. For whatever reason it has not displayed this properly, I even added this comment to my last post. Even then the two bracketed code tags vanished from that sentence, so I put them in with .. either side to make them appear, otherwise the sentence would not make sense.

Again, I am very new to the forum and have really tried hard at this. I am very, very grateful for your help getting me this far, but I think the above was harsh.

Yes, this morning I realized I attached no CSS and no I don't just want to dump a load of CSS. But I really, do not know what CSS to show to give you guys a chance to help, really, if I knew what to pick out I would know where I am looking and would really have given it a go.

Just like I did with your nav.

appi2




msg:3690052
 12:42 am on Jul 4, 2008 (gmt 0)

Ok I shall take that back, I missed the 12:50 pm on July 2 post and only read the two below.
I did actually bother to load the code, but as soon as I saw no CSS and a white page with bits of text due to my pet hate, background images/images in examples, well it was time for a little rant.

The background image/image thing, lots of people post code with images, now sometimes we can work out problems without even loading the code examples. But if we do look at the code we can't see the images. So we have to add our own or apply a background colour, to try and help to see whats happening or what they are trying to do. Sometimes I just add a border to everything (*{border:1px solid red}). But if it becomes too much effort, then I'll pass.

Anyhoo, centering. To center page content, you have to apply a width to the container/outer div your trying to center.

eg.
<style type="text/css">
#page {width:800px;margin:0 auto; text-align:center; border:2px solid red;}
</style>
</head>

<body>
<div id="page">
<h1>ulllooo</h1>
</div>

Now if you have floated elements inside that <div id="page">...</div> and the total width of those elements are wider than the width you specify in the #page the the floats are going to wrap. You've also got to be aware of what happens when someone increases font size. You should use em instead of px to help.

Browser differences, When you testing have every browser you can find open and look at the differences. Eventually you can know what to expect.

If you get some weird problem and some part of your design doesn't work. Take that part of the design and load it into its own page and check. You then get to know whether, its CSS specifity or another part of your design thats causing the problem. Break things down and build back up.

Pretty box's around code examples on the forum. Yeah takes a while to work out ;) Cheat use quote...quote or even quote pre ... pre quote with the []s.

And finally, any new problems, its probably best to post in a new thread specific to the problem. The title of this thread no longer has anything to do with what your doing. And won't help anyone searching for info on spry horizontal menu.

skywalker




msg:3690307
 10:17 am on Jul 4, 2008 (gmt 0)

Appi2, thanks for the reply.

Cheers for the pointers, running through those now.

The centering still is not working at all, I have put your code line in my style sheet with a wrapping div and also alternatively in the same page and all I get is the red line at the top right of the page.

I don't know if it is because I have lots of other divs and they are confusing the centering or that I have a closing div on my last newsbox9 and the add the closing div you suggest.

This is soooo frustrating, I have searched Google till my eyes bleed and have enough CSS books to build an armchair!.

Browser differences, yes I have about eight on the Mac and four on a PC running to test. It all looked so great in Safari that my usual experience tells me it would be fine in other Mac browsers, but it was waaaay off. Of course I will never ever set a site live without testing it everywhere on both platforms.

I will try stripping that part out tho and view separately.

Thanks for the quote box solution, I just thought there was a solution to put it in a scroller, so at least it does not take up a huge long page.

Final bit, yep, one thing I learnt about cross posting on other forums, but in a blind panic I tried to stay where the help was coming from. I see your point now about this drifting out of the original title.

Cheers

skywalker




msg:3698978
 4:01 pm on Jul 15, 2008 (gmt 0)

Just an update...

I had this exactly where I wanted it and we had to change a few names in the nav and it has all gone pear shaped. I have tried every which way possible to get rid of the yellow highlights on these two:

<div class="wrapper">
<ul id="nav">

and the final

</div>

Something is not right with the code below and I am now bald as a badger, anyone?

Thanks in advance

---------------------------------
<div id="topmenu"></div>
<div class="wrapper">
<ul id="nav">
<li class="first"><a href="http://www.example.com/bigstuff/bigstuff.php">Big Stuff</a>
<ul>
<li class="twoline first"><a href="http://www.example.com/bigstuff/maximpact.php">Maximum Impact</a></li>
<li><a href="http://www.example.com/bigstuff/aboutus.php">About Us</a></li>
<li><a href="http://www.example.com/bigstuff/news.php">News</a></li>
<li><a href="http://www.example.com/bigstuff/green.php">Green Statement</a></li>
<li><a href="http://www.example.com/bigstuff/offers.php">Offers</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a>
<ul>
<li class="twoline first"><a href="#">Minimum Fuss</a></li>
<li><a href="#">Flyers</a></li>
<li><a href="#">Stickers</a></li>
<li><a href="#">Leaflets</a></li>
<li><a href="#">Mousemats</a></li>
<li class="last"><a href="#">Promo Items</a></li>
</ul>
</li>
<li><a href="#">Stuff We Do</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a></li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a>
<ul>
<li class="twoline first"><a href="#">Portfolio</a></li>
<li class="last"><a href="#">Hardware</a></li>
</ul>
</li>
<li><a href="#">Stuff Others Say</a>
<ul>
<li class="twoline first"><a href="#">Testimonials</a></li>
<li class="last"><a href="#">Stuff Links</a></li>
</ul>
</li>
<li><a href="#">Tech Stuff</a>
<ul>
<li class="twoline first"><a href="#">Machines/Substrates/Inks</a></li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">T&amp;Cs</a></li>
<li class="last"><a href="#">Green Statement</a></li>
</ul>
</li>
<li class="last">Contact Stuff</a>
<ul>
<li class="twoline first"><a href="#">Where We Are</a></li>
<li class="last"><a href="#">Contact Form</a></li>
</ul>
</li>
</div>

[edited by: tedster at 11:27 pm (utc) on July 15, 2008]
[edit reason] use example.com in code [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved