SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help with second tier horizontal, inline wrapping

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tizak View Post
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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>

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tizak View Post
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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!!

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well put, thanks for replying, I have learned much in our interaction, I definitely know there is much I still do not know.

  20. #20
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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!

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •