Please help with second tier horizontal, inline wrapping

**tizak** · Aug 16, 2012 02:40

I am redesigning one of my sites, I have spent alot of time trying to get the second tier (li ul li) to space horizontally properly like the first tier. I cannot see what I am doing wrong. on another question, is the width of my working space too wide, (1000 px). Thanks for any feedback. The code follows...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>New Site</title>

<style type="text/css">

html,body {

	padding:0;
	
	margin:0;

}

.wrapper {
	
	position:relative;

	margin-left: auto;
	
	margin-right: auto;
	
	width:1000px;
	
	height: 100%;	
	
}

.logo {

	position:absolute;

	top:0;

	left:0;
}

.nav {
	
	width:100%; 

	height:30px; 

	background-color:#0A3881;

	position:fixed;
	
	margin-left: auto;
	
	margin-right: auto;

	left:0px;

	top:0px;
	
	}

.nav1 {

	position: relative;
	
	color: white;
	
	margin: 0px auto;
	
	width: 1000px;
	
	line-height: 2em;
	
}

.nav1 ul {

	margin: 0;
	
	padding: 0;
	
	list-style: none;
		
}

.nav1 ul li{

	padding-left: 10px;
	
	padding-right: 10px;
	
	display: inline;
	
	font-family: Arial, Helvetica, sans-serif;
	
	font-size: 14px;
	
	border-right:2px orange solid;
}

.nav1 li ul {

	position:absolute;
	
	top:45px;
	
	left:225px;
	
	display: inline;
	
	padding-right:15px;
}

.nav1 li ul li {

	position:relative;
	
	width:100px;
	
	height:150px;
	
	background-color:green;
	
}

.about {
	float: right;
}

.about ul {

	margin: 0;
	
	padding: 0;
	
	float:right;	

}

.about ul li {

	display: inline;
	
	list-style: none;
	
	font-family:Arial, Helvetica, sans-serif;
	
	font-size:14px;
	
	padding-left:15px;
	
}

.nav2 li ul {

}

</style>
</head>

<body style="padding:0px;">
<div class="nav"><div class="nav1">
<ul>
<li>
Button 1<ul>
<li>
Tier 2 - 1
</li>
</ul>
</li>
<li>
Button 2
<ul>
<li>
Tier 2 - 2
</li>
</ul>
<li>
Button 3
<ul>
<li>
Tier 2 - 3
</li>
</ul>
<li>
Button 4
<ul>
<li>
Tier 2 - 4
</li>
</ul>
<li>
Button 5
<ul>
<li>
Tier 2 - 5
</li>
</ul>
<li>
Button 6
<ul>
<li>
Tier 2 - 6
</li>
</ul>
<li>
Button 7
<ul>
<li>
Tier 2 - 7
</li>
</ul>
<li>
Button 8
<ul>
<li>
Tier 2 - 8
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<div class="logo">
	<img alt="" height="168" src="images/SomeLogo.png" width="218" /></div>
<div class="about">
<ul>
<li>
Contact Us
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="nav2">

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

</html>

**ralph.m** · Aug 16, 2012 16:06

It's a little hard to understand what you are trying to do here. Could you post a screen shot of what you are expecting to see? I'm not understanding the point of the nested lists.

**tizak** · Aug 16, 2012 17:31

Hi Ralph, sorry for not being clear, what I want to do is create a horizontal, hyperlinked menu, as you can see, the first level links flow horizontally correctly, what I want to do for the nested second level menu is for them to also flow correctly horizontally. as you can see with my markup, the nested links layer on top of each other, they do not flow to the right as expected. Also, what I want to do is use background graphics that describe categories and type of hyper-linked information. What is also an issue, although I have explicitly defined the width and height of the area of each nested li, the actual space taken up is only for the included text. There will probably be no padding for the second tier, the included image are only placeholders and not the actual graphics.

nsdemo.jpg

Originally Posted by ralph.m

It's a little hard to understand what you are trying to do here. Could you post a screen shot of what you are expecting to see? I'm not understanding the point of the nested lists.

**ralph.m** · Aug 16, 2012 18:23

The way you've got it set up at the moment, it seems you want that strip of images displayed on every page. If that's the case, you wouldn't want the code for them nested in each of your top level list items. Obviously, I'm still not clear what's required here.

**tizak** · Aug 16, 2012 20:20

HI Ralph, depending on top level button selected specific article links will be displayed, the links will be static, this is not a strip of images, they are hot links to inside pages, each image would be a different page, the major problem for me presently is that I cannot get the nested, 2nd tier links to horizontally span the page. I hope I am being clear.

**ralph.m** · Aug 16, 2012 20:28

Originally Posted by tizak

depending on top level button selected specific article links will be displayed ... the major problem for me presently is that I cannot get the nested, 2nd tier links to horizontally span the page.

I think you are going about this the wrong way. Those second level links should be independent of the top level links. I would recommend you delete those nested lists and instead create a secondary list of links for each different section of the site. So, for example, when the user clicks oa top level link and lands on the target page, you serve up a relevant list of sub links for that section of the site.

**tizak** · Aug 16, 2012 20:31

Ralph, thanks for the quick reply, I am still learning css and there is more than one way to slice and dice. I will take your advice over the next couple of days, when I have time to try to impliment your suggestions.

Again, thanks.

Dave

**ralph.m** · Aug 16, 2012 21:46

Cool, let us know how you get on. Normally nested ULs like that are for when you want a navigational drop down. But for what I think you are doing here, this nesting is definitely not what you want.

**dresden_phoenix** · Aug 16, 2012 23:54

That is a very ambitious layout, even for a non beginnner. It's also kinda limits itself content flow wise. would you need the bottom tier to line up tith the bottom edge of your logo, for example... (since your logo is a fixed px size.. since it's and image, this will place px limits on the height of your second tier... this is one issue among many.

But that's more a topic of thinking about the limitations of the media , rather than pure CSS.

See if you can follow hat I did here.. it might help:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		li a {text-decoration: none}
		li:hover >a {text-decoration: underline}
		 body, html, ul, h1{margin: 0; padding:0}
		.center{width:800px; margin:0 auto;}
		.logo{  width:200px; float: left}
		.logo img{margin-top:20px; height:200px; width:100%; vertical-align: top}
		.nav{  position:relative; }
		.about{float:right;}
		.nav>li>a  {color:#fff; }
		.nav li , .about  li{ float: left; list-style: none;  display:block;padding:  10px 0;}
		.nav>li+li>a {  display:block; border-left:1px solid yellow; padding:0 10px}
		.nav>li  a , .about  li  a{  padding:0 10px}
		.nav li ul {position: absolute; left: -9999em}
		.nav  .example_on  ul  {position: absolute; left:  220px; right:0; top:100%; margin-top:80px}
		.nav  .example_on  li  { width:25%; margin:0; padding:0}
		.nav  .example_on  li a { border-left:1px solid yellow; background: pink; height:175px; display:block; }
		.top_nav {background: blue;  float:left; width:100%}
		.about{height: 50px; }
		</style>
	</head>
	<body>
	<div class='top_nav'>
<ul class="nav center">
	<li class="example_on" ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
	<li ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
	<li ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
	<li ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
	<li ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
	<li ><a href="#">Item1</a>
		<ul class="subnav">
			<li><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li><a href="#">Item3</a></li>
			<li><a href="#">Item4</a></li>
		</ul>
	</li>
</ul>
</div>
<div class='center'> 
	<ul class="about">
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
	<div class='logo'><img src="http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg" height= 200 alt="Name of Company" ></div>
</div>
	</body>
</html>

**tizak** · Aug 17, 2012 05:55

Hi Ray, first, thanks for taking the time to present my vision in a more coherent fashion. I do agree, the present, conceptual design may be too content limiting, and I will be working with it when I get back from work. From my side,, a box is a box is a box. I am trying to think outside that box, and create a vision, it may or may not work, but I also get the opportunity of increase my css skills at the same time so win win, there are many clean, brilliant menu designs out there with reason, that I appreciate and, of course, could use, (a result of the accumulated wisdom of many contributors). Still, I would like to explore the design.

**dresden_phoenix** · Aug 17, 2012 14:53

Tizak,
when i was in Art School I learned that it was best not to try to use graphite in the same manner as you would ,say, use acrylic paints. Each media has its own specific behaviours and limitation that define what can or cannot be done , or done well, with it. This is true also for web design and even MORE vital.

In web design CONTENT and CONTEXT is key. There may be many ways, maybe even EASY ways, to make a page LOOK the way you want, but the thing is a GOOD WEB DEVELOPER AIMS to keep the SEMATIC STRUCTURE of the content intact. S/he also takes into consideration multiple platforms and user preferences, screen size, screen readers, etc.

For example, I cut corners in my suggestion,to keep my example short and to the point . IE6 (circ 2001-2006) doesn't understand ">" or "+", the work around for this ( to add classes to identify child elements and adjacent ) isnt too bad, but it isn't as clean as an idealistic developer would like. Ideally, your "logo" would not be an image, it would be text REPLACED by an image and ,arguably, on he homepage it would be an H1 and not a DIV. As such it would be best ( tho not a cardinal sin) if the "logo" was the first element inside the body tag.

Where am going with this? Code well structured, semantically correct HTML FIRST, then as CSS allows, style your code to look the desired way. Te example I suggested was best compromise between structure and layout.

**tizak** · Aug 17, 2012 15:32

Thanks for the valuable reply, I have taken your suggestions to heart, understanding what you are pointing to, I will will continue to contemplate the site layout and structure, with this being my first run through that is more a thought experiment than a completed concept. My approach, right or wrong is that I tend to work with the design organically, and I tend to live with the design for awhile, I will certainly be living with this makeover.

Dave

**tizak** · Aug 18, 2012 03:47

Ideally, your "logo" would not be an image, it would be text REPLACED by an image

This quote did get me thinking, my logo is an illustrator file, if I convert to svg with an embedded font would this be a viable replacement for the quoted comment?

**ralph.m** · Aug 18, 2012 06:10

Originally Posted by tizak

if I convert to svg with an embedded font would this be a viable replacement ...?

Perhaps one day (I'm not sure, but rather doubtful), but not currently, as SVG is not well supported. But 'Illustrator" files are not supported on the web.

**tizak** · Aug 18, 2012 16:22

Hi Ralph, thanks for your reply, of course, those Luddites at Micro$oft are what is holding back the 21st century, checking out wikipedia, svg was a viable format as far back as 2004! With it's implementation still incomplete across most browser platforms but I am more hopeful than you, and I suppose the shim for embedding an svg file would be to replace it with a rasterized image. Having said that, even IE9 has limited support so there is hope...

Quoted from Wikipedia...

Native support

Konqueror was the first browser to support SVG in release version 3.2 in February 2004.[54] As of 2011, all major desktop browsers, and many minor ones, have some level of SVG support. Other browsers' implementations are not yet complete; see comparison of layout engines for further details.

Some earlier versions of Firefox (e.g., versions between 1.5 and 4.0[55]) and some other outdated web browsers that can display SVG graphics needed them embedded in <object> or <iframe> elements to display them integrated as parts of an HTML webpage instead of using the standard way of integrating images with <img>.[56] However, SVG images may be included in XHTML pages using XML namespaces.[57]

Tim Berners-Lee, the inventor of the World Wide Web, had been critical of Internet Explorer for its failure to support SVG.[58]

Opera (since 8.0) has support for the SVG 1.1 Tiny specification while Opera 9 includes SVG 1.1 Basic support and some of SVG 1.1 Full. Opera 9.5 has partial SVG Tiny 1.2 support. It also supports SVGZ (compressed SVG).
Browsers based on the Gecko layout engine (such as Firefox, Flock, Camino, and SeaMonkey) all have had incomplete support for the SVG 1.1 Full specification since 2005. The Mozilla site has an overview of the modules which are supported in Firefox[59] and of the modules which are in progress in the development.[60] Gecko 1.9, included in Firefox 3.0, adds support for more of the SVG specification (including filters).[61]
Browsers based on WebKit (such as Apple's Safari, Google Chrome, and The Omni Group's OmniWeb) have had incomplete support for the SVG 1.1 Full specification since 2006.[62]
Amaya has partial SVG support.
Native support became partially available in Internet Explorer 9 (the current version of IE, as of March 2011).[53]

There are several advantages to native and full support: plugins are not needed, SVG can be freely mixed with other content in a single document, and rendering and scripting become considerably more reliable.[citation needed]
Compatibility

Internet Explorer, up to and including IE8, was the only major browser not to provide native SVG support. IE8 and older require a plug-in to render SVG content. There are a number of plug-ins available to assist...

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Think I will give svg a go... on that point, which would be the safest way to embed a svg file and do you need conditional statements?

Dave

**dresden_phoenix** · Aug 18, 2012 17:12

SVG are neat. Aside from the browser support issue, depending on your logo, I fail to see the benefit in this implementation. That is if your LOGO GIF only has a few colors, and is not that big of a grid, but it represents and images with may curves or changes in direction ( complex formula) then the SVG may even have a bigger file size than the GIF!

BUT AGAIN , we are missing toe TEXTUAL purpose of the web. So it's not the file type that is wrong he is just that it would be better to have TEXT that is then covered up by an image. This ways if users have CSS and/or images off they can still see the name of your company. Seee?

what I meant by image replace was :

.logo {height: heightOfYourLogoPX; width:widthOfYourLogoPX; overflow:hidden;}
.logo:before { content:url(path/to/you/logoImage.gif); display:block;}

Anyway, since you are inserting content you can still use SVG for browser that support it., if you are still set on that idea.

**tizak** · Aug 18, 2012 18:19

So I was confused, I was under the impression that the embedded font could be contextually understood by the search engines. I do agree, the svg file is bigger than a comparable raster image, but on the upside, the svg should render sharper with some extra omp as it is vector, I am already using webfonts on another site to pleasing results, I suppose I can keep the logo contextual by using a bitmap background and layering the font on top of the image, while also remaining contextural by being machine readable.

**dresden_phoenix** · Aug 18, 2012 18:25

no prob. but that goes back to a misinterpretation of the difference between content and style.

TEXT ( the characters :t,e,x,t; in that sequence)= context.
The font, embedded or otherwise.. is a style.
BTW, this concept holds true even outside the realm web design. The lyrics of a song are the content.. the bands, musical key, etcs.. is merely the style.

SVG should render sharper with some extra omp as it is vector,

Not true. PLUS , it could potentially render DIFFERENTLY by the different rendering engines which make up browsers by different vendors!!

**tizak** · Aug 18, 2012 18:28

Well put, thanks for replying, I have learned much in our interaction, I definitely know there is much I still do not know.

**dresden_phoenix** · Aug 18, 2012 18:33

I also forgot:

I suppose I can keep the logo contextual by using this approach by layering the font on top of the image while also remaining contextural by being machine readable.

Well if you don't mind:
1) loading an entire font family (or more) and in several formats ONLY for styling your logo
2) If your logo is ALL TEXT
3) If you dont mind that (and in this case IE is the good guy) older browsers do not support web fonts
4) And if your logo doesnt have funky kerning, offsets, ligatures, special characters, etc...
5) Doing all this for potentially minimal impact (really.. i mean some browsers still dont anti-alias web fonts right)

it's like kung fu, dont fight the limitations of the media.. twist them to your advantage .. create a layout that DOESNT RELY on Web fnts or svg... but that if its there its a bonus ( this concept is called "progressive enhancement") A lot of beginer think that the key to good design is knowing commands and tags... when in fact is how to use what you know effectively that makes the difference between good and great!

**tizak** · Aug 18, 2012 18:43

A quick question, on the other site where I use webfonts, the font is hosted on my site, so there is no extra "fetch" to a third party font repository. For the end user and from the browser side the site loads very fast, doing a Google Webmaster "Speed Test" the site scores 99% out of a 100%, and I do feel the font styling adds to the end user experience, as opposed to the generic, system fonts available to the end user, most of my IE webtraffic is either IE8 or 9, so I would dispute your point regarding loading an additional font family. All and all though I feel like "grasshopper" to your mastery.

**dresden_phoenix** · Aug 18, 2012 18:56

Everything balances out.

On one hand... google probably has a faster bandwidth but MORE IMPORTANTLY there is caheing. if the user has visited another site with the same font source link... then the bandwith is also saved( while, even if your font was exactly the same , it would be downloaded again if it didnt come from the same URL) so the benefit from google is its popularity; if not as many folks d/l'ed from google, then it might not be as likely that your font was cached.

The upside.. is that you can get any font you wish to get or BUY , as long as its license allows and that should google decide not to host that font anymore you are still good.

All and all though I feel like "grasshopper" to your mastery.

Nah. I have a long way to go , myself.. I just have run into a bunch of bright folk (on here ) on the road.

User Tag List

Thread: Please help with second tier horizontal, inline wrapping

Thread Tools

Display

Please help with second tier horizontal, inline wrapping

Bookmarks

Bookmarks

Posting Permissions