I am trying to create menu.
<div class="container">
<ul>
<li class="xd_nav_link_1"><span>link</span></li>
<li class="xd_nav_link_2"><span>link</span></li>
<li class="xd_nav_link_3"><span>link</span></li>
<li class="xd_nav_link_4"><span>link</span></li>
</ul>
I can not focus in height is a link span.
I also like that it is centered in a: hover
Demo here
Thank
In this case, you just need to add a line-height equal to the height of the link.
JSFiddle - Updated
a {
line-height:100px;
}
Revised
a {
line-height:100px;
vertical-align:top;
}
a:hover {
line-height:50px;
}
Related
I have this vertical that i am trying to customize
<ul class="tracking_nav nav nav-tabs nav-stacked">
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
<span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span><span class="linkso">TrackingPlaybackCommands</span></li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
This is the css
moving_status{
float:right;
color:#76EE00;
font-weight:bold;
}
.linkso{margin-left:13px;}
.topinfo{
display:inline-block;
margin-bottom:5px;
}
.linkso > a{
margin-right:4px;
}
This is the fiddle https://jsfiddle.net/codebreaker87/eoo87zkk/
I have tried .tracking_list_type > li:hover{background-color:none !important;} but i cant seem to target the li element.How can i fix this?.
You need to target hover backgrounds with :hover. For your case, you need the following:
.nav-tabs>li>a:hover
However I would recommend
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover
I have two separate divs, why is the background color the same lime color for both? I want the first div white.
Here's the HTML:
<div id="head1">
<ul>
<li><a class="menu" href="#">Link one</a></li>
<li><a class="menu" href="#">Link two</a></li>
<li><a class="menu" href="#">Link three</a></li>
<li><a class="menu" href="#">Link four</a></li>
</ul>
</div>
<div id="title1">
<h1>some title</h1>
</div>
Heres the CSS:
#head1 {
}
#title1 {
height:100px;
background-color:lime;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border-bottom:2px aqua dashed;
}
li {
display:inline;
}
a.menu {
float:left;
width:6em;
text-decoration:none;
color:#666666;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.menu:hover {
background-color:#ff3300;
}
h1 {
font-family: Gautami;
font-size:300%;
color: #FFFFFF;
}
When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element
#head1 {
overflow:auto;
}
jsFiddle example
It's actually white. You just can't see it.
Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.
Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/
As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.
Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/
The fix for this is to use either a clearfix or simply overflow:auto.
overflow example: http://jsfiddle.net/w858z/1/
clearfix example: http://jsfiddle.net/w858z/2/
Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?
You just need to clear the second div clear: both;
I made a jsfiddle :
http://jsfiddle.net/5gwZ6/
I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.
The CSS for my background color is as follows:
body{
background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}
I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.
My navigation HTML is as follows:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
My CSS, of course, styles this header.php.
This is my website.
Thanks in advance!
Change the CSS to this:
nav {
background-color: #fff;
margin: 0px -12.5%;
}
Gives the following result:
If you're not happy with this solution, you are going to need to modify the HTML.
Put an id on the nav tag and style the menu over css.
Html:
<nav id='nav'>
// menu
</nav>
Css:
#nav {
background-color: 'white';
}
I'm pretty sure you just need to set the nav background as white..
in your css:
nav { background-color:#fff; }
Extending the full width:
can also be done with HTML resdesign
HTML
<body>
<nav>
<!-- nav code -->
</nav>
<div id="container">
<!-- all of the rest of your code -->
</div>
</body>
CSS
body { }
nav { background-color:#fff; }
#container {
background-color:#D0D0D0;
margin:0px 10%;
}
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
Hi I'm looking to set up a centered footer that uses list items with unorganized lists inside of each list item. If I try using float:left I get them to be inline with each other but it is no longer centered. The code i currently have looks like this:
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
display:inline;
}
html:
<div id="box1">
<ul id="mainList">
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</div>
It's beacuse content is centered by text-align within container, that is 100% width of container as default, but less if it's floating.
Anyways i don't understand what you want to achieve? You want to center list item but float it in the same time? Could you precise yourself more?
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
}
#mainList li, .mainLI p {
display:inline;
}
Example
Your problem with centering lies in the fact that the parent element in which you are centering children must be a block element. See MDN