I need to add text before a horizontal navigation menu at the first, second and third levels of links.
The levels are achieved using nested lists.
If I want place text before a level of links, is it considered bad practice to add the said text as a list item?
Example:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float:left;
display:block;
margin-left:20px;
}
<ul>
<li>Some arbitrary text:</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I would say it goes against best practice, I would suggest doing
<span>Some Text:</span><ul>..</ul>
This keeps your html clean and more flexible.
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
Thank you for reading my question.
I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):
I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header logo"><img src="the image"></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to look something like this:
empty space THE IMAGE
MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4
empty space THE IMAGE
I'm not sure whether I understood the question. But to my answer would be:
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
And style it like so:
ul li{
margin-right:20px;
line-height:200px;
float:left;
}
ul li img{
height:200px;
width:auto;
}
ul li a {
text-decoration:none;
border-bottom:2px solid red;
}
You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom.
Here you can see jsFiddle
Is it possible to make a vertical <ul> that displays the text on the left side of the list?
The only example I can think of would be something like the Facebook timeline where you would have list items on the right side like normal and then list items on the left that have the list items. How would I do a list like the list items on the left? (I understand that this isn't how the timeline is coded, but it's just the only visual example I could think of).
Yes...use CSS:
<style>
ul {direction: rtl;}
</style>
If you'd like to alternate left and right, you can put it into a class:
<style>
.bulletonleft { direction:ltr; }
.bulletonright { direction:rtl; }
</style>
<ul>
<li class="bulletonleft">Element 1</li>
<li class="bulletonright">Element 2</li>
<li class="bulletonleft">Element 3</li>
<li class="bulletonright">Element 4</li>
<li class="bulletonleft">Element 5</li>
<li class="bulletonright">Element 6</li>
</ul>
I would like to have the list items display horizontally and I want to have a line break (like <br />) within the item. What is the easiest way to do it?
I'd say that what you really want is an inline block:
li{
display: inline-block;
}
I'm not entirely sure what you mean, please feel free to include some of your code, but what I'm guessing is that you want horizontal <li> items on two lines, and the easiest way is probably to just create a new list;
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<!-- ending and starting a new list rather than using <br> -->
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
css:
li { display: inline; }
Use float: left instead display: inline.
<style type="text/css">
<!--
ul.inline li{
float: left;
list-style: none;
}
//-->
</style>
...
<ul class="inline">
<li>A text</li>
<li>A text <br />More text</li>
<li>A text</li>
<li>A text</li>
<li>A text</li>
<li>A text</li>
</ul>
You may want to use a fixed width for those li's.
Result (Firefox 5):
Trying to do something similar to MenuItem in ASP, but in HTML instead - how can I do this without tables?
You can use a structure like:
<ul id="menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
And then using CSS you can float the li tags left:
<style>
#menu li { float: left;}
</style>
View this link for a simple example: http://jsfiddle.net/4Sag4/