What's the best way to mark up a navigation menu with captions for each element? (I think the term 'speaking' is attributable to Smashing Magazine, see http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/)
A definition list seems most appropriate, something like:
<dl id="menu">
<dt>About</dt>
<dd>Our work, mission, history and people</dd>
<dt>Events</dt>
<dd>We put on workshops, talks and debates</dd>
<dt>Media</dt>
<dd>See videos from our archive of past events</dd>
<dt>Contact</dt>
<dd>Get in touch with us for further information</dd>
</dl>
But I can't think how to style it to look like this: http://i.stack.imgur.com/Etd4K.png
without extra DIVs around each menu item which I don't think is valid HTML.
Thanks in advance.
demo: http://jsfiddle.net/Afh9N/
The CSS isn't pretty...
dt, dd {
width:120px;
padding:0 10px;
border-left:2px solid #333;
float:left;
}
dt {
margin-left:-120px;
font-weight:bold;
}
dt:first-child {
margin:0;
}
dd {
position:relative;
top:20px;
font-family:verdana;
font-size:9px;
left:-142px;
}
I don't think a definition list is best way to go about this.
I would style a ul and use spans for the "speaking part". Something like this:
<ul id="menu">
<li>About <span>Our work, mission, history and people</span></li>
<li>Events <span>We put on workshops, talks and debates</span></li>
</ul>
CSS
li{display:block; float:left; background:blue; border:1px; color:white;
font-family:arial; font-size:1.25em; width:150px; padding:1em;}
span{display:block; font-size:.7em;}
http://jsfiddle.net/Yzx8K/1/
Try something like this:
<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>
Then you can style the list elements into the menu however you like. The header in each list element provides both a style target and a semantic way to show the importance of the main "Menu Item" text.
Related
I've been having trouble aligning the terms of service and privacy
policy message under the signup button of my page.
http://jsfiddle.net/jyfvLrb3/
HTML:
<div class="signupterms"> <p>By clicking the sign up button you agree that you read the site's</p> <span>Terms of service</span>Privacy Policy<p>and</p>Cookie use
</div>
CSS:
.signupterms {text-align:left; float:left; display:inline-block;}
.signupterms a {float:left; text-decoration:none; color:#000; }
.signupterms p {float:left; margin-left:4px;}
I've tried floating all the elements left, display:inline-block, but nothing seems to align the words perfectly, especially when resizing the browser window. It's probably something very obvious to fix, but I'm sure you guys can point me in the right direction and help me fix this problem. Thanks!
Your <p> tags have margins which is making the text appear out of line with the anchor tags.
To be honest, I'd just put the links inside the the <p> tag like below and then you don't need to worry about removing the margin from the <p> tags.
.signupterms {text-align:left; float:left; display:inline-block;}
.signupterms a {text-decoration:none; color:#000; }
<div class="signupterms">
<p>
By clicking the sign up button you agree that you read the site's Terms of service Privacy Policy and Cookie use
</p>
</div>
how about using <span> ?
http://jsfiddle.net/jyfvLrb3/1/
<p> is a block element with some predefined styles, therefore its much better to use some inline without any properties, like <span>
p tag have a default margin. Remove it by adding margin:0; to p.
.signupterms p {float:left; margin-left:4px; margin:0;}
the <p> tag has display block by default and a margin...
just use one for the first statement and then spans to seperate links like so:
.signupterms {
text-align:left;
display:inline-block;
}
.signupterms a {
text-decoration:none;
color:#000;
}
.signupterms span {
margin-left:4px;
display:inline-block;
}
<div class="signupterms">
<p>By clicking the sign up button you agree that you read the site's</p> <span>Terms of service</span>,<span>Privacy Policy</span> and <span>Cookie use</span>
</div>
fiddle
am trying to make list ("ul"), where later then i add values with jquery, with .prepend() function. I would like to make all these new values, to be hidden, like out of div and later i will show them but then i add them, they must be hidden. Are there any way to do something like that?
I made a picture to show my problem, so what i wanted to do, id like i add 5 and 6 li element with JQuery and they must be in that "hidden area", and list in "visible area" wont change. So far i made that list, but then i add new element it goes in visible area, and li elements order on visible area goes like:"6, 5, 1, 2".
EDIT.
I tired to solve my problem with #mboldt suggestion, but it didnt worked for me or i did something incorrectly. My code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.item-list-inner {
float:left;
width: 600px;
overflow: hidden;
border:2px solid black;
}
.item-list-ul {
position:relative;
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px;
height:100px;
}
.item-list-ul li {
display: inline-block;
*display: inline; /*IE7*/
*zoom: 1; /*IE7*/
float: left;
}
.item{
width:80px;
height:80px;
border:1px solid red;
margin:7px;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="item-list-inner">
<ul class="item-list-ul">
<li>
<div class="item">1</div>
</li>
<li>
<div class="item">2</div>
</li>
<li>
<div class="item">3</div>
</li>
<li>
<div class="item">4</div>
</li>
<li>
<div class="item">5</div>
</li>
<li>
<div class="item">6</div>
</li>
</ul>
</div>
</div>
</body>
</html>
But when i tried to prepend new element with jquery:
$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")
New li element goes in from of list, instead in that "hidden" place:
First row is the result i want to get, like new element goes in that invisible (hidden area) and wont be shown until i rotate list.
Second row is the result i got now with my code. As you see then i prepend new li element it goes in front of list but in visible area, and moves other li elements.
You can add them class ".addClass( 'hidden' )" and in css file ".hidden{display:none;}
Later you just need to ".removeClass( 'hidden' )" to show them.
If you create the list item before you add it to the list you can sipmly hide it via the jQuery method like this
var item = $("<li>hidden item</li>");
$(item).hide();
$("#list").prepend(item);
Check out this jsfiddle, it only shows 3 list items but if you look at the source code with firebug you'll see another hidden list item was added.
However if you are trying to implement something like a slider, the the overflow-property might be the thing you are looking for (hard to tell with the information given).
EDIT
Now that you updated your question and I think I now know what you are trying to do I created a new jsfiddle with another solution. Check it out and see if that is what you are trying to do and if the code helps you.
In the jsfiddle there are two buttons, one to scrolle the list to the right and one to prepend an item to the "invisible area" on the left of the list.
Note: This is not really clean, i.e. when scrolling there are still borders showing, which should actually be hidden but I think this is good enough to show the idea.
Pretty simple, but I can't figure it out.
I have a word followed by an <ul>. I made the unordered list have inline styling, but I want it to be on the same line as the word before it.
JSfiddle: http://jsfiddle.net/fm74R/4/
Use this template to make it look like: "Tags: funny unique Add a tag to the post"
Thanks!
Working Fiddle
ul{
display:inline-block;
padding:0;
}
Best way to do this is give everything an inline form of display.
HTML:
Tags:
<ul style="list-style: none;">
<li>funny</li>
<li>unique</li>
<li>
Add a tag to the post
</li>
</ul>
CSS:
li {margin:0; padding:0;display:inline;}
ul {margin:0; padding:0; display:inline;}
http://jsfiddle.net/fm74R/10/
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
I've got a horizontal list with long items that I want to wrap. The list wraps fine if one list item is really long or if all the list items are really short.
However, if two list items are both long, they will not split across the available space. This image shows the problem:
Here's the markup I'm using:
<html>
<style>
ul {text-align:left; width:400px}
li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;}
li a {display:inline; white-space:normal;}
</style>
<body>
<ul>
<li>>alf; fa sadlf; </li>
<li>>a sdf; fa sd; asd;lfgj </li>
<li>>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj </li>
<li>>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</li>
</ul>
</body>
</html>
You can do this by getting rid of some of your code. If I understand correctly, all you'll need is the following:
ul { width:400px; }
li {
list-style-type:none;
display:inline;
padding-left:20px
}
Here's an example: http://jsfiddle.net/M9zqE/
It's fixed by not floating items (thus not removing them from the flow)
See http://jsfiddle.net/pRCFR/