I'm in the process in coding a web design and i've spent the grandeur of my time thinking how will i be coding this navigation bar, where the <li> have dynamic widths where the background image adjusts to the width of the element.
My idea was to use <span> and slice the background image into three parts.
<li>
<span class="libefore"></span>
MOVIES
<span class="liafter"></span>
</li>
What's the best way of coding this?
Normally this is achieved with a technique called 'sliding doors' have a read over this:
http://www.alistapart.com/articles/slidingdoors/
If you are willing to go with CSS 2.1 :before and :after selectors (See here for supported browsers: http://www.quirksmode.org/css/contents.html), you could try something like this:
HTML:
<li>
Movies
</li>
CSS:
li:before {
background-color: #F00;
content: '\00A0\00A0';
}
li a {
background-color: #0F0;
text-transform: uppercase;
}
li:after {
background-color: #00F;
content: '\00A0\00A0';
}
This keeps your HTML clean without introducing any presentational elements. (ie. No span elements that have no content or hierarchical purpose) Also, it's not a bad practice to use text-transform to take care of any uppercase transformations, just in case you want to change the style one day without having to modify the content.
Here is a fiddle which should give a bit of a starting point to tweak from: http://jsfiddle.net/6Keaa/
Hope this sets you in the right direction...
Related
I want to create a navigation bar like this:
How would I structure such a thing? Obviously there should be one external div with a blue background. But what about the child elements? How should they be structured? Thanks.
There is no generalized answer on how to structure a page properly. There are general standards for using technologies, but over all getting your page to present properly is more important then how many or which type of elements you use.
For example if you want your page to auto re-size then you might want to use Divs or Tables. If you want your text to wrap without crossing the entire page, you might want to use a table, or spans...
I can show you some references to floating for CSS... But even in this type of example you could create divs within divs, that are styles appropriately to "taste"; or you could use spans within spans.
http://www.w3schools.com/css/css_float.asp
The major caveat to this explination is that corporate environments will normally have a style guide generated by advertising or marketing that will dictate how the eccomerse or client present sites, and data is represented. This will normally force you to use as an ex: Divs vs Spans.
Each element has a different default display property so I think in this case it depends of the element.
The display property of the span is Inline
– The inline elements line up horizontally as like
Inline Inline Inline
The display property of the div is block
https://iamarunkumar.wordpress.com/2010/02/10/what-is-the-default-display-property-for-span-and-div/
To create a navigation bar, you'll need something like so
* {
margin: 0;
padding: 0;
}
nav {
background-color: blue;
color: white;
font-family: Arial;
padding: 30px 40px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
width: 49%;
text-align: right;
}
li.title {
text-align: left;
}
<nav>
<ul>
<li class="title">Welcome to Our World</li>
<li>We Work Best</li>
</ul>
</nav>
This would generally be considered the most common way to structure a nav bar.
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
So I have a navigation menu that is generated by my CMS:
The menu's HTML is straightforward (edited for clarity):
<ul>
<li>Journal</li>
<li>Art</li>
<li>Work</li>
</ul>
I want the items to show up as hand-written text, in keeping with the general theme of the site, using separate PNG files for each menu item.
To do that, I used the CSS content property like so:
#headerNav .nav li a[href="/_site/en/journal/"]
{ content: url(/path/to/image.png); }
And it worked great! The HTML text of each item was replaced by the correct image:
However, alas, then I learned not every browser supports the content property on selectors other than :before and :after! Chrome and Safari do it, but Firefox doesn. However when I use :before, the HTML node isn't replaced, but the image is added:
How do I work around this?
What didn't work:
Making the <a> element display: none removed the :before part as well.
Making the <a> element position: absolute and moving it elsewhere won't work either.
Making the <a> element width: 0px screws up the layout because the images added through content aren't in the document flow.
What I don't want to do:
Of course I can output the images by hand but I want to work with the HTML the CMS is giving me, which is <li>s with text in them.
Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.
Turning the handwriting into a font is not an option.
Using JavaScript to replace the items on the fly is not an option. This needs to work using pure HTML and CSS.
Since you are doing this into a navigation bar you should have a fixed height making the next method possible to work:
First insert the image as content on the :before element and make it display:block to push the actual text of the a tag below.
li a:before {
content:url(http://design.jchar.com/font/h_1.gif);
display:block;
}
Then hide that text with a fixed height on your a tag:
li a{
height:50px;
overflow:hidden;
}
The Working Demo
Answer was answered before OP added the line
Any solution involving background-image would require me to specify
each item's width and height in the style sheet, which I would like to
avoid for the purposes of this question.
So if anyone interested in background-image solution can refer this, else can simply skip.
Am not sure how optimum solution I am suggesting is, but surely you can use background-image for each a element, using nth- pseudo, and set the fonts color to transparent, or use text-indent property with overflow: hidden;
So it will be something like
nav ul li {
display: inline-block;
}
nav ul li:nth-of-type(1) a {
background-image: url(#);
display: block;
width: /* Whatever */ ;
color: transparent;
text-indent: -9999px; /* Optional */
overflow: hidden;
font-size: 0; /* Optional, some people are really sarcastic for this */
/* Below properties will be applicable if you are going for sprite methods */
background-position: /* Depends */ ;
background-size: /* If required */ ;
}
The reason why I would suggest you is :-
Advantages :
Cross browser compatible
Can you sprite methods to cut down http requests to request image for each tab
Also, you are not losing the text which is between the a tags, which is really good as far as screen readers are concerned.
Disadvantages :
Set custom width for each
Note: If you are going for a sprite solution, than background-position is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.
Credits - For support table
I would put PNG images into img tag and then set alt attribute.
<ul>
<li><img src="journal.png" alt="Journal"/></li>
<li><img src="art.png" alt="Art"/></li>
<li><img src="work.png" alt="Work"/></li>
</ul>
The navigation I'm referring to looks something like this:
home | about | contact
So what's the best and most flexible HTML/CSS to use for this type of navigation? The best thing I can come up with is to wrap the delimiters in a span so that I can control the spacing around them. For example:
home<span>|</span>about
Is that the best approach?
This all comes down to your target browsers, and if validating as strict HTML4.01 is important to you (ie: a boss/committee thinks it's a "big deal") or not.
Personally, for purposes of nav-menus, I go the route of wrapping everything in an unordered list.
If 4.01-compliance is important, I'll wrap that in a div.nav
If html5 is cool (which it is, with an oldIE JS-shim, as long as there are no committees involved), I'll wrap everything in a <nav id="main-nav"> or similar.
<ul><li>home</li><li>about</li></ul>
Then in CSS:
#main-nav li { display : inline-block; list-style : none; }
From there, you can set your padding on each <li> element to whatever you want.
You can use the :after pseudo-selector to inject "|" or any custom image you want, after each one (and you can use the :last-child:after to make sure that there's no image after the last one, if that's what you want).
You can even play around with the a, turning it into a block-element, and playing with padding to make the entire li block clickable, and not just the text.
See the oldIE-compatibility hack here: how to make clickable links bigger, if necessary.
You could simply add a left border to every element, except the first one:
HTML:
<ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>
With the CSS:
#nav-list li {
display: inline-block;
border-left: 1px solid black;
padding: 4px;
}
#nav-list li:first-child {
border-left: 0;
}
See the above code in action on jsfiddle!
This is rather cross-browser compatible (IE7+) but it can be easily polyfilled with something like Selectivizr for IE6. Thanks to Rob W for suggesting to use border-left and first-child to reach more browsers!
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.