Navbar help please

HTML & CSS
1

Hello, I’m new to web development and already very excited about the new html and css specs. So I’m making a style sheet for my (currently contentless) website that is a tribute to html5 and CSS3. All nice and simple till I got to making a pretty navbar. I’ve made most of it but there is a couple of niggling things that need to be fixed before it is a product im entirely happy with. It seems like an exercise in classes and id’s but i’ve tried numerous things to increse my specificity on the things im trying to change. I can’t get it to work, I need help.

This is the link to my website:http://www.aether-games.co.uk/index.html(I’ll be removing this link after the problem is resolved)

As you can see this style sheet is focussed around the html5 orange and new(ish) CSS3 features. The two things i’d like to see before I consider it finished is the ‘home’ tab of nav-bar to have a bottom left aligned radius, so it stops bleeding over the edge of the nav-bar.

Secondly I would like the bottom tab of the navigation drop down list to have a radius and a border like the main navbar, to tie them in aesthetically. The problem here is I like the top border between the main bar and the dropdown, but I need the radius and bottom border to tie in with my style. If I define the border for top and bottom in the same place I get double border between the list elements, and it looks stupid. So I need to make each of the bottom elements a unique id (well thats the idea I get), that defines them to be different from the ones above.

here is a link to the CSS http://www.aether-games.co.uk/data/style-html5.css

This is my first ever foray into HTML and CSS so please be nice. Both pages were validated to html5 and scc3 standards. If you think I am doing anything wrong or redundantly please say so! I welcome any constructive feedback.

Thanks in advance to any that choose to help.

Aethir.

I dint think this page renders as expected in IEm it’s tested just fine in my FF and GooChrom browsers.

2

…So I’m making a style sheet for my (currently contentless) website that is a tribute to html5 and CSS3…

just an fyi:

HTML5 and CSS3 are still in development and won’t be officially recommended by the W3C most probably for at least a few more years. Therefore at least parts of the final HTML5 and CSS3 specs could very well be different to what they are currently.

3

I’m sure I’m not the only person testing HTML5 and CSS3. I’m not making a huge corporate companies website that relies on market share and accessability. I’m just a newbie developer that’s having some fun, and learning HTML5 and CSS3 are a valid use of my time. It’s what I’ll be using for most of my life, and all the top browsers support the features that the W3C are trickling out in mini specifications. While I am fully aware of the fact that the languages are likely to be different in a few years time, the underlying conventions will still be the same and I find it very hard to believe that features that the W3C and browser developers have worked so hard on to bring to the developing community, and the users of the internet will just be removed, renamed or syntax changed at most, and most likely this iteration of my website probably wont even exist if and when it happens.

But to humour your concerns, my CSS3 is actually 2.1 valid apart from the ‘border-radius’ statements, if someone with an old browser visits my site, the only difference they will see is a square navbar, not a round one. And this is something I have consciously chosen not to care about, if people can’t be bothered to update their browsers, and developers can’t be bothered to release new versions of their browsers to keep up then I’ll just keep on not caring, and continue to learn the languages of the internets future.

The sad thing is, if you had read my code you would have seen that I was actually having problems with features that exist in 2.1; classes, id’s, and specificity. If it is against your beliefs to use CSS3 thats fine, but you could have at least helped me with my actual problem. I guess it’s just easier to point out the obvious and be negative than help a newbie that’s just trying to learn.

As for the HTML5, same deal, browsers support it, and the W3C trickling out specs isn’t an accident. If I wanted to change the HTML to an old specification, HTML 4.1 doesn’t like the self closing tags and XHTML didn’t seem to like where I defined my charset, simple fixes that I’m not likely to do, but at least I know what’s wrong, that’s the difference between being ignorant and being intuitive.

I’m unemployed, but i’ve spent the last week and a half doing 8-4 days (and more) learning web dev, I’m really trying to better myself and learn new skills. I’ve read references, wikis, websites, watched video tutorials, and copy/pasta’d code to change and make my own. But there is only so much I can learn on a general basis. I still dont understand why I define my bottom navbar elements as an id, tell them to have a radius, save my files and then have it do nothing, according to what I’ve learnt, id’s have a high specifity and it should work.

As for constructive criticism, I more meant things like; “Defining that <ol> as a class is a bad idea, you should do…”, and “Your CSS code is messy and redundant, if you…”, not, “Your doing it wrong, and I think you’re ignorant and stupid enough to not know.”

Apologies for the long post, and the very tired post from last night. I just want to make a beautiful navbar, and i’m so close.

Please can I get some help from someone?

(TL : DR)Massive off topic tirade about why I’m using HTML5 and CSS3, showing my displeasure about the reply, and asking people for on topic help and constructive criticism.

4

I was responding to your above comment and I posted it as just an fyi, and not as a criticism, in case you weren’t aware of the status of hml5 and css3 and its implications.

I haven’t looked at your code because I don’t normally click on posted links for obvious security reasons. My Trend Micro has fired too many warnings on posted links over the years and so I only click posted links if I trust the person posting it.

Good luck on your journey on the html5/css3 learning curve.

5

Agreed, there was obviously a misunderstanding on what we deemed was wrong or redundant. I assumed that as most browsers support both HTML5 and CSS3, and that they have huge inherent advantages in their use that a lot of web developers would be using those features. I’m sorry for coming off as so obviously annoyed but I’ve seen enough of forums to know that a post like yours can kill a thread. It follows this scheme.

Post : Hi, I need help.

Reply: You’re doing it wrong go back to the start.

Everyone else: He’s doing it all wrong no point in posting.

As I’ve spent hours on this I was rather worried when I woke up this morning to find no replies I could make immediate use of.

As for my code, if you believe there is a better way of me showing it to people than posting links please say so. I was under the impression that attatchments were more frowned upon than links, and felt that posting my entire code block in a forum post would be a bit over the top.

6

[ot]One main downside with attachments; they usually get held in a moderation queue ‘pending approval’, which can result in a long wait… by which time many of the questions could have been resolved or at least had some positive replies.

With the code blocks that are relatively short like in this example that’s fine using code blocks. The advantage of the link is the reader can see the problem without copy-and-paste. Though it all depends upon the nature of the question and the page type.[/ot]

7

ok, no problem - no harm done :slight_smile:

There is nothing wrong with using html5/css3 as your base for learning to build web pages as long as you are aware of its limitations.

Unfortunately I can’t help you much with your issues though, even if I did click your links, since I have hardly looked at html5/css3 so far. Browser support for both currently varies greatly between the major browsers and not all current html5/css3 specs have been implemented by all the browser manufacturers. Consequently I don’t use html5/css3 yet, especially for paid work.

8

Hi,

It’s not a question of specificity but the fact that the inner background does not get clipped by border-radius. Only the background on the element with border-radius is clipped. You would need to apply another border-radius to the first list item.

e.g.


.nav-bar li a {
padding:0 10px;
line-height:56px;
float:left;
}
.nav-bar li li a{float:none;display:block}

.nav-bar li.first{
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}

<li class=“first”> Home etc…

When you have a fixed height container you can’t guess that x amount of padding + font-size = height of container. Set the padding to zero and set the line-height equal to the height of the element and the text will be centred within that element.

9

Well I’ll just post the code in question then, huge post incoming.

Here is the HTMl in question:

<body>
	<div>
		<ol id=nav-bar class=nav-bar>
        		<li><a href="/">Home</a></li>
        		<li><a href="/products">Products</a></li>
        		<li><a href="/services">Services</a></li>
        		<li><a href="/about">About</a>
				<ul>
            				<li><a href="/admin.html">Admin</a></li>
					<li><a href="/admin.html">God</a></li>
					<li id=nav-bar-bottom><a href="/admin.html">Batman</a></li>
            			</ul>
			</li>
        		<li><a href="/contact">Contact</a>
          			<ul>
            				<li><a href="/admin.html">Admin</a></li>
					<li><a href="/admin.html">God</a></li>
					<li id=nav-bar-bottom><a href="/admin.html">Batman</a></li>
            			</ul>
			</li>
        	</ol>
	</div><div>
		<ol id=nav-bar class=nav-bar>
        		<li id=far-left-block><a href="/">Home</a></li>
        		<li><a href="/products">Products</a></li>
        		<li><a href="/services">Services</a></li>
        		<li><a href="/about">About</a>
				<ul>
            				<li><a href="/admin.html">Admin</a></li>
					<li><a href="/admin.html">God</a></li>
					<li id=nav-bar-bottom><a href="/admin.html">Batman</a></li>
            			</ul>
			</li>
        		<li><a href="/contact">Contact</a>
          			<ul>
            				<li><a href="/admin.html">Admin</a></li>
					<li><a href="/admin.html">God</a></li>
					<li id=nav-bar-bottom><a href="/admin.html">Batman</a></li>
            			</ul>
			</li>
        	</ol>
	</div>
</body>

As we can see it’s a simple ol/ul list described semantically as a nav-bar, the <div> is an artifact from the original example I copied and heavily modified. I moved the class definition from the <div> to the first <ol> to address a problem with the navbar having padding that I didnt want, nor could I remove. I still feel like it really should be defined in the <div> but I can’t get the blocks from the CSS to be where I want if it is.

Here is the pretty huge block of CSS code thats controlling the layout of this navbar:

.nav-bar
{
	list-style:none;
	padding:0;
	margin:0;
	height:56px;
	border:solid;
	border-width:4px;
	border-color:#E34C26;
	border-radius:0px 0px 20px 20px;
	background:#F06529;	
}
.nav-bar ol
{
	list-style:none;	
}
.nav-bar ul
{
	list-style:none;	
}
.nav-bar li
{
	float:left;
}
.nav-bar li a
{
	display:block;
	background-color:#F06529;
	margin:0px 0px 0px 0px;
	padding:18px 10px 18px 10px;
}
.nav-bar li a:hover
{
	background-color:#E34C26;
	color:#FFFFFF;
	
}
.nav-bar li ul
{
	display: none;
	position: absolute;
	padding: 0;
}
.nav-bar li:hover ul
{
	display: block; 
}
.nav-bar li li
{
	float: none;
	border-width:4px 4px 0px 4px; 
	border-style:solid; 
	border-color:#E34C26;	
}
#nav-bar-bottom
{
	border-width:4px 4px 4px 4px; 
	border-style:solid; 
	border-color:#E34C26;
	border-radius:0px 0px 20px 20px;	
}

/*light grey #DADADA / dark grey #9A9A9A / dark orange E34C26 / light orange  F06529*/

.nav-bar a:link    {
  /* Applies to unvisited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #FFFFFF;
  
  } 
.nav-bar a:visited {
  /* Applies to visited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #FFFFFF;
  
  } 
.nav-bar a:hover   {
  /* Applies to links under the pointer in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  color:            #FFFFFF;
  
  } 
.nav-bar a:active  {
  /* Applies to activated links in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  color:#FFFFFF;
  
  }

If you can see that im defining things more than once it’s a consequence of me not undertanding exactly how elements are obtaining their definitions. Biggest example is ‘list-style:none;’ being defined three times at the top. The one inside ‘.nav-bar ol’ isn’t needed, but is there as a placeholder for the class, in case I want it for something else later, and partly to prove my point. If you remove ‘list-style:none;’ from ‘.nav-bar’ the <ol> takes its numbers back even though I told it not to in ‘.nav-bar ol’ (?). This code is messy and doesnt fit any particular layout, mostly because it’s copy/pasta im trying to modify.

It’s certainly close to what I want it to be, but I’m under no false idea that i’m doing it particuarly well, I feel like I’m butchering the language. Apart from redefining classes and id’s which im pretty sure I’m doing wrong it’s these lines im particularly interested in:

This is the one I want to have a bottom-left aligned 20px radius. I’ve not been able to achieve this despite multiple tries of assigning classes, id and classes&ids to it.
<li><a href=“/”>Home</a></li>

And these two need to be defined as the ‘bottom elements’ in the dropdown of the navbar so I can give them a bottom border and a bottom-left/right 20px radius. I once managed to give these a border radius but couldnt get a 4px border onto them. I deleted that iteration of the CSS since and rewrote the whole thing.
<li><a href=“/admin.html”>Batman</a></li>
<li><a href=“/admin.html”>Batman</a></li>

I just updated the code to show some pretty bad (obv, as they didnt work) attempts at getting those to do what it is I want.

10

Thats what I’ve been attempting to do Paul O’B but I could never get anything I was attempting to say to the rendering to be heard, that was the problem with specificity.

.nav-bar li.first

You have no idea how happy that makes me, if that really works then that seems like its one problem out of the way, thanks a lot I’m of to try it now. :slight_smile:

11 
<li id=nav-bar-bottom><a href="/admin.html">Batman</a></li>

#nav-bar-bottom
{
	border-width:4px 4px 4px 4px; 
	border-style:solid; 
	border-color:#E34C26;
	border-radius:0px 0px 20px 20px;	
}

Finally got my bottom navbar element to be the shape and have the border I wanted.

But there is still a problem, and it’s a stupid one. All this time ive been trying to cut the bottom left corner of a…

display: block;

…which, thinking about it seems pretty stupid, the block is implicitly defined as a rectangle. Not a rectangle that you can cut the corner off of when it doesnt fit what you want…

How do I got about fixing this? Use something other than a block for all these elements? Can I define the top-left one ands the far-bottom ones as a different shape?

Urgh, majorly sorry for the triple post, but they were meant to be single replies.

12

You lost me a bit there :slight_smile:

The only shape in CSS (so far) is a rectangle anyway apart for border-radius which is still basically a rectangle.

You already have the solution by applying the border-radius to the inner element as I mentioned earlier.

Here it all is in working order back to Ie7 (apart from the round corners in ie8- and and the vendor extensions for border-radius for older browsers).


&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
.nav-bar, .nav-bar ul {
	list-style:none;
	padding:0;
	margin:0;
}
.nav-bar { margin:0 0 10px }
.nav-bar {
	height:56px;
	border:4px solid #E34C26;
	border-radius:0px 0px 20px 20px;
	background:#F06529;
	position:relative;
	z-index:2;
}
.nav2 { z-index:1; }
.nav-bar li { float:left;position:relative; }
.nav-bar li a {
	float:left;
	background-color:#F06529;
	padding:0 14px;
	line-height:56px;
	height:56px;
}
.nav-bar li:hover &gt; a {
	background-color:#E34C26;
	color:#FFFFFF;
}
.nav-bar li ul {
	position: absolute;
	left:0;
	top:55px;
	margin-left:-999em;
	width:100%;
}
.nav-bar li:hover ul { margin:0 }
.nav-bar li li,.nav-bar li li a {float:none;display:block;}
.nav-bar li li a {
	border:4px solid #E34C26;
	height:48px;
	padding:0 10px;
	line-height:48px;
}
.nav-bar li.first a { border-radius:0px 0px 0 20px;}
.nav-bar li.last a { border-radius:0px 0px 16px 16px; }
/*light grey #DADADA / dark grey #9A9A9A / dark orange E34C26 / light orange  F06529*/

.nav-bar a, .nav-bar a:visited {
	text-decoration:  none;
	font-weight:      bold;
	color:            #FFFFFF;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div&gt;
		&lt;ol class="nav-bar"&gt;
				&lt;li class="first"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/products"&gt;Products&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;
						&lt;ul&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;Admin&lt;/a&gt;&lt;/li&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;God&lt;/a&gt;&lt;/li&gt;
								&lt;li class="last"&gt;&lt;a href="/admin.html"&gt;Batman&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;
						&lt;ul&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;Admin&lt;/a&gt;&lt;/li&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;God&lt;/a&gt;&lt;/li&gt;
								&lt;li class="last"&gt;&lt;a href="/admin.html"&gt;Batman&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
				&lt;/li&gt;
		&lt;/ol&gt;
&lt;/div&gt;
&lt;div&gt;
		&lt;ol class="nav-bar nav2"&gt;
				&lt;li class="first"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/products"&gt;Products&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;
						&lt;ul&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;Admin&lt;/a&gt;&lt;/li&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;God&lt;/a&gt;&lt;/li&gt;
								&lt;li class="last"&gt;&lt;a href="/admin.html"&gt;Batman&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;
						&lt;ul&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;Admin&lt;/a&gt;&lt;/li&gt;
								&lt;li&gt;&lt;a href="/admin.html"&gt;God&lt;/a&gt;&lt;/li&gt;
								&lt;li class="last"&gt;&lt;a href="/admin.html"&gt;Batman&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
				&lt;/li&gt;
		&lt;/ol&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
13

Thankyou Paul OB, and sorry for taking so long to get back to this.

Thanks for helping me to understand classes and id’s it means a lot to have such an obviously skilled coder take some time out to help me, even re-writing parts of my code. I took you input and decided to run with it, there were still some niggling issues I had with even your iteration of my code, but that was my fault, namely the gaps around the radius, caused by the button actually being smaller than the background behind it. I got some good ideas on how to fix that and then I can consider this miniproject finished and this thread resolved.

But ofc there is something else, I ws reading up on pseudo-classes and came up with replacing this:

<li class="last"><a href="/contact/theceo">The CEO</a></li>

.nav-bar li.last a { border-radius:0px 0px 16px 16px; }

with this:

ul.nav-bar-expand li:last-child a { border-radius:0px 0px 20px 20px; border-width:4px; }

Doesnt require any special HTML, awesome. Differences apart from how the class is defined has been caused by a massive rewrite using your code and my old code as a reference, it works wonderfully. It hasn’t saved a lot of space but it’s nice to have less de-facto class definitions in the HTML when you can use those lovely pseudo classes that already exist.

The problem I had was this:

ol.nav-bar-main li:first-child a { border-radius:0px 0px 0 18px;}

Nav-bar-main is the first list that holds the secondary (nav-bar-expand) list. Now even though i’m basically saying here is; Put a bottom left radius on the first link in the nav-bar-main ordered list element, it’s still affecting the first element of the ul embeddedd into it.

Now I get the idea of parent-child inheritance, everything defined further up the tree is kept unless countermanded, but I specifally said I only want the first <ol> element having a radius, which is why I have an <ol<ul>> list and not a <ol<ol>> list in the first place. Can I keep running with the pseudo-class idea on this? Is there something i’m missing? Or should I just give up and use the implicitly defined class within a class system to deal with this?

14

Yes last-child is very useful but not supported in ie8 and under unfortunately.

The problem I had was this:

ol.nav-bar-main li:first-child a { border-radius:0px 0px 0 18px;}

Nav-bar-main is the first list that holds the secondary (nav-bar-expand) list. Now even though i’m basically saying here is; Put a bottom left radius on the first link in the nav-bar-main ordered list element, it’s still affecting the first element of the ul embeddedd into it.

Now I get the idea of parent-child inheritance, everything defined further up the tree is kept unless countermanded, but I specifally said I only want the first <ol> element having a radius, which is why I have an <ol<ul>> list and not a <ol<ol>> list in the first place. Can I keep running with the pseudo-class idea on this? Is there something i’m missing? Or should I just give up and use the implicitly defined class within a class system to deal with this?

The nested list is also a first-child of the nested ul which is why it also gets the style applied. The :first-child pseudo class will hit any list items that are the first child because you are using the descendant selector.

If you used the fist-child combinator then you can restrict it to the first level only.


ol.nav-bar-main > li:first-child a { border-radius:0px 0px 0 18px;}
15

Thanks again for the input, I guess i’ll put this project in the ‘Don’t try to use for a few years archive’, and rewrite all i’ve made to be backwards compatible. It’s been a great learning experience for someone so green though and I’m grateful for all the input on this thread.

Thread resolved, lessons learned, thanks all.