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/
Related
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.
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
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
ul.ipro_menu a.active-parent {
color: #FF0000;
}
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.
I've got some HTML:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
This is styled as a horizontal menu. The number of links in my list are such that the nav needs to drop down to two lines. But I don't want it to drop at a place mid-li. Which is to say that because my links are multi-word, it tends to drop in the middle of an item. Any way to do this that forces the next line to always be at a place in-between the <li> elements?
just add the css white-space:nowrap; to the li's
Persumably you could try replacing the spaces in your li-items with non-breaking-spaces, like so:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
nav li {display:block; float:left; white-space:pre;}
See the interface here:
http://jsfiddle.net/3h9Kw/
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>