I have a vertical menu in which each item is centered.
This is done with ul/li.
I would like to have a repeatable background image for each item, which is all aligned on the left, but aligned with inside text width on the right.
Here is an illustration of what I want to do :
illustration as an image
Of course, it is possible to add DIVs to the HTML structure.
Thanks
This doesn't seem to be possible alone with CSS. So I went ahead and created this with jQuery.
HTML is
<ul>
<li><span class="center">Text</span></li>
<li><span class="center">Text big</span></li>
<li><span class="center">Text small</span></li>
</ul>
All I do in script is this.
$('li .center').each(function() {
var width = $(this).width();
$(this).css({"paddingLeft": (200 - width)/2 + 'px'});
});
I have added a fiddle for reference.
I hope you won't have trouble adding a background image instead of #666 for .center
It's possible with span and a pseudo-element
Codepen Demo
HTML
<div class="wrapper"> /* not required */
<ul>
<li class="center"><span>Some Long Text</span></li>
<li class="center"><span>Some Text</span></li>
<li class="center"><span>Text</span></li>
</ul>
</div>
CSS
ul {
padding: 0;
margin: 0;
}
/* THE GOOD STUFF */
li{
overflow:hidden; /* hides all extra pixels */
font-size:2em;
padding: 0;
margin-bottom:.5em;
}
.center {
text-align:center;
}
li > span {
diaplay:inline-block;
background:red;
position:relative;
padding-right:0.5em;
}
li.center > span:before {
content: "";
position: absolute;
right:100%;
top: 0;
height:100%;
width:2000px; /* some really large number*/
background:red;
margin-right:0; /* or remove and add padding-right to span */
}
Related
I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
I trying to come up with a simple css layout which should look like this:
This is my html code for the header and nav bar:
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Help
<li>Contact Us
<li>Customers
</div>
And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned.
When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items.
Could someone please help me with the header positioning?
#header ul { float: left; }
or
#header ul { position: absolute; right: 0; }
In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).
To target the list items in the header, you can simply use a parent selector, like this: #header li.
Here's what you need:
#header {
border: 1px solid #ccc;
overflow: hidden; /* clearfix */
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
}
See DEMO.
I just found a nice script you can see it over here
http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/
I saw the drop down has a little ^ on top. On the css I could find this:
#colorNav li ul li:first-child:before{
content:none;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
Only I can't understand how this is working; does it have
something to do with the border?
This CSS operates on the following markup (reduced for simplicity):
<nav id="colorNav">
<ul>
<li class="green">
<ul>
<li>Back to the tutorial</li>
<li>Get help</li>
</ul>
</li>
<li class="red">
<ul>
<li>Payment</li>
<li>Notifications</li>
</ul>
</li>
</ul>
</nav>
The selector targets the :before pseudo-element on the inner-most li elements that are also the first elements within their parent:
#colorNav li ul li:first-child:before
Missing from your code here, but present in the original tutorial, was the following comment:
/* the pointer tip */
This particular set of rules is for creating the small triangle that appears at the top of the dropdown menus, pointing up to their associated block (pictured below, emphasized with a red circle):
The styles then follow for creating this triangular shape:
content: none; /* Pseudo-element has no content */
position: absolute; /* It's positioned absolutely */
width: 1px; /* It has a width of 1 pixel */
height: 1px; /* And a height of 1 pixel too */
border: 5px solid transparent; /* Applies initial border style */
border-bottom-color: #313131; /* Overrides bottom border color */
left: 50%; /* Moves it half-way from the left */
top: -10px; /* And 10px up above the element */
margin-left: -5px; /* Margin, half of width, to center */
The end-result, is a triangle created purely with borders in CSS.
It creates a fake area front of the #colorNav li ul li:first-child with content:''; and manages that area with other css styles.
#colorNav li ul li:first-child:before { ... }
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
content:'';
The content property is used with the :before and :after pseudo-elements, to insert generated content.
Hope this will help you?
I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called "store" has a list of content that becomes visible via this jquery hover effect.
I can't get the "store" button to align with the rest of them. Two days now I'm trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I'm at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.
Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:
http://www.ideagasms.net/ideagasms-with-dropdown-menu.html
When viewing source, you'll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. :)
This code should work:
I've added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.
Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.
You might also have to create some new styles and add them to the elements again. As I've probably messed a few bits up. I'd suggest adding proper classes and id's so you don't run into styling problems in the future.
<div id="nav">
<ul>
<li>
<a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
<ul class="file_menu">
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>Insert</li>
<li>Modify</li>
<li>Control</li>
<li>Debug</li>
<li>Window</li>
<li>Help</li>
</ul>
</li>
<li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a> </li>
<li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
<li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
<li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
<li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
<li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
<li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
<li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>
<style type="text/css">
#buttonnav {
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9;
}
#nav {
margin: auto;
width: 740px;
background: orange;
}
ul {
margin: auto;
}
ul li {
display: inline;
float: left;
}
.menu_class {
border:1px solid #1c1c1c;
}
ul.file_menu {
cursor:pointer;
display:none;
width:260px;
border: 1px solid #1c1c1c;
margin:0;
padding:0;
list-style:none;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
That menu looks atrocious and to be honest, doesn't allow for much flexibility as you noticed.
If I were you I would rebuild it in t way where a proper html structure is used with a (nested) li structure so you could just whip in that extra item and the submenu...
This is the ugly fix
#buttonnav {
display: inline-block;
/* remove the float & widht */
}
.hoverli ul.file-menu {
position:absolute;
}
This is a case where you should probably go back to the basics and re-learn how to make a proper menu. If this is in some content management system then override the classes & templates to make it so you can easily add things...
Stuff I am missing for the sub menu also is position: absolute; (and you probably want the sub-menus parent to be relative).
You need to fix two things to properly present the button and have the sub-menu functioning:
See this working Fiddle Example!
1)
Set the css for the button like:
#buttonnav {
display: inline-block;
height: 25px;
position: relative;
z-index: 9;
}
Note: display:inline-block; gets in and float, margin and width gets out.
2)
Adjust the css for the sub-menu to allow it to appear without breaking the layout:
CSS
.hoverli {
position: relative;
z-index: 1;
}
.hoverli ul {
position:absolute;
}
I have the following image in a li:
<ul class="columns">
<li><img src="images/layouts/test.png" alt="" /> </li>
</ul>
My css looks like this:
ul.columns li img {
position: relative;
}
ul.columns li:hover img{
z-index: 999;
}
What does it do:
When I hover my mouse over the image (test.png), the image get's a new z-index. This is needed to keep the image visible (a div is displayed on hover and the image should stay on top of it). This all works great.
Now I want to have a image in the top right corner (displaying an X, so lets call it x.png) over the normal image. How to do this? Making the test.png a background image is not an option. Played around with some classes and z-index but the second image always appears besides the test.png image. I think I do something wrong with the CSS, but I don't know how to z-index the second image in a li
I have this atm:
<ul class="columns">
<li><img src="images/layouts/test.png" alt="" /> <img class="x" src="images/x.png" alt="" /> </li>
</ul>
Thanks
try something like
ul.columns li img,
ul.columns li {
position: relative; /* so the close image is relatively
positioned inside <li> */
z-index : 1;
}
ul.columns li img + img {
position: absolute;
top : 0;
right : 0;
display : none;
}
ul.columns li:hover img { z-index: 999; }
ul.columns li:hover img + img { z-index : 1000; display: block; }
Maybe you're trying to do something like this http://jsfiddle.net/GvWaZ/1/
You should use position:relative in your link, so when you use right:0 style, the image goes to the right of the anchor.
.columns a {
position:relative;
}
.colums a .x {
right: 0;
top: 0;
z-index: -1;
}
Also, refer to the close second image by its class x, like in this css style:
.columns a:hover .x {
z-index: 999;
/* class="x" specific hover styles */
}