HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle
Related
I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
Am New to Asp.net and CSS.
I Need to Show Horizontal Menu only image like this
image 1 image 2 image 3 image 4
So I tried like this
CSS
#UlIcon
{
height: 100%;
list-style:list-style-image;
text-align:center;
padding-left: 5px;
}
#UlIcon li { display:inline; width : 100px; height:100%;}
#LiNew
{
list-style-image:url(/IMG/New.png);
}
#LiSave
{
list-style-image:url(/IMG/Save.png);
}
#LiDelete
{
list-style-image:url(/IMG/Delete.png);
}
#LiLog
{
list-style-image:url(/IMG/New.png);
}
#Padding-right {padding-right:15px;}
ASP.NET CODE
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew"></li>
<li id="LiSave"></li>
<li id="LiDelete"></li>
<li id="LiLog"></li>
</ul>
</div>
But it shows empty. If I Remove display: inline in li css, the image shows vertically in center of the div. What am doing wrong here?
How do I get the solution?
Am using Visual Studio 2008 and CSS2.1
the css list-style-image will place an image next to each point or listed text. it act as an image bullet
I am of the opinion you would like to have this
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="link1">
</li>
<li id="LiSave">
<img src="link2">
</li>
<li id="LiDelete">
<img src="link3">
</li>
<li id="LiLog">
<img src="link4">
</li>
</ul>
</div>
then you can use css to display all list elements inline-block
example display:inline-block
here is a snippet
img {
display:inline-block;
width:50px;
height:50px;
}
li {
display:inline-block;
}
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
<li id="LiSave">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqyRrA_-5TM0vpRU8BcTPFpGubyzgHGtvE9FQzpnVMPnKnoZwkmQ">
</li>
<li id="LiDelete">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShZ_bYswgHlQLrUn8egsNTTZn5nCmSz1NcFmvtUzujpZhrBflUiQ">
</li>
<li id="LiLog">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
</ul>
</div>
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
i creat a dropdown list when mouse hover at #clim the height of #dropdown change from 0 to 150px . but the code not work .
html code
<div id="menu">
<ul>
<li id="index">Accueil</li>
<li id="clim">Climatisation</li>
<li id="ventil">Ventilation</li>
<li id="electro">Electromenager</li>
</ul>
</div>
</div>
<div id="dropdown" >
<ul>
<li id="index">Climatisation</li>
<li id="clim">Ventilation</li>
</ul>
</div>
CSS code
#dropdown{
margin-left:693px;
width:165px;
height:0px;
position:absolute;
background:#158DFB;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
i have a problem in this part . not working
#clim:hover #dropdown{
height:150px;
}
first of all, your code has extra finishing tags and 2 elements with the same id (#clim), that doesn't make the question very clear.
to make this work with css and no javascript you have to include the hidden element (the dropdown) inside the outer element that you will hover and trigger the dropdown to be shown.
try this instead and then add the remaining css rules you need:
<div id="menu">
<ul>
<li id="one">Accueil</li>
<li id="two">
Climatisation
<ul id="dropdown">
<li id="subone">sub Link</li>
<li id="subtwo">Another sub link</li>
</ul>
</li>
<li id="three">Ventilation</li>
<li id="four">Electromenager</li>
</ul>
</div>
#dropdown{
height: 0;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
#menu:hover #dropdown{
height:150px;
}
when mouse hover at #clim the height of #dropdown change
You cannot do that with pure CSS, because there is no parent selector.