I'm sure this is an easy one but I just can't figure it out. I have this HTML
(http://jsfiddle.net/qzr3X/)
<div id="wrapper">
<ul id="tabs">
<li>Dashboard</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div id="content"></div>
and CSS:
* {
margin: 0;
padding: 0;
}
ul#tabs {
list-style-type: none;
overflow: hidden;
}
ul#tabs li {
float: left;
}
ul#tabs li a {
z-index: 99;
display: block;
margin: 0 0.416em -6px 0;
padding: 1.66em 0.833em;
border: 1px solid lightgray;
background: lightgray;
border-bottom: none;
}
div#content {
background: lightgray;
height: 100px;
border: 1px solid black;
}
and I want to make it look like a navigation menu. However, as it's usual, I want to have the border of the content area covering all but the active tab (in this case, that would be "Dashboard"):
I already tried to increase z-index but it doesn't work. What am I missing?
Regards
I'm not 100% certain what it is your'e after.
From what I gather you want the border to appear around inactive tabs and have no border separating the active tab from the content. Is that correct?
This is basically don't by tricking the active tab into covering the content border with a border color which matches the content.
You can see a demo here
But you'll need to note the class which is added to the "dashboard" tab. It's that active class which covers the border at the bottom of the tab it's applied to.
I have added some jquery to dynamically alter the borders when you click tabs.
Related
I'm making navigation tabs and when a tab is active or "current" I want a border to appear at the bottom of that tab, but the border is including the icon only and not the text...
my HTML
<li class="current"><a href="#tab-3"><img src="assets/related.svg"
height="20px" width="20px">Related</a></li>
my CSS
.tabs-menu li.current {
position: relative;
font-weight: bold;
border-bottom: 3px solid red;
}
this is what I'm getting
and here's a fiddle
https://jsfiddle.net/qxL6w0yf/
I need it to look like this
Note: in the fiddle the tabs aren't working for some reason, but that's irrelevant, I think. Thanks.
you are limiting the height for ul and li to 30px,remove them.
Change like :
.tabs-menu li {
height: 30px;<---------------------Remove Or 50px
//More codes......
}
.tabs-menu {
height: 30px;<---------------------Remove Or 50px
//More codes......
}
Fiddle
All you need to do is add an a at the end. Otherwise, it's ignoring the nested a tag.
.tabs-menu li.current a {
This produces the results you're looking for when I added it to your code sample.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
Having the following code: http://codepen.io/anon/pen/wCcfA
HTML:
<ul id="menu-main-menu">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
</ul>
CSS:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width:250px;
}
#menu-main-menu li{
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
}
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?
I don’t think vertical-align can be applied here.
But there is an approach that should work: Using transform to first flip the whole menu around on the Y axis – and then again on the list items to flip them “back” to readable:
#menu-main-menu {
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
#menu-main-menu li{
/* … */
-webkit-transform:scaleY(-1);
transform:scaleY(-1);
}
http://codepen.io/anon/pen/Abrxl
Of course flipping the menu around changes the order of items – to correct that, their order in the HTML would have to be changed too: http://codepen.io/anon/pen/yxDsi Whether that’s a compromise your’re willing to make, is for you to decide.
I added the -webkit- prefixed version and the unprefixed one here, and also the -moz- versions of the column properties, yet in Firefox there seem to be some extra margins or something like that going on. That seems to come from applying the columns properties already though, and doesn’t seem to be a result of applying the transformation. Maybe you’ll find a solution to make that look smoother by yourself.
One solution is to use margin-top every 4n li elements like:
#menu-main-menu {
padding: 0;
height: 77px;
-webkit-column-count: 2;
-webkit-column-gap: 42px;
border: 1px solid blue;
width: 250px;
}
#menu-main-menu li {
display: block;
list-style: none;
height: 24px;
border: 1px solid red;
position: relative;
}
#menu-main-menu li:nth-child(4n) {
margin-top: 24px; /*add margin top*/
}
<ul id="menu-main-menu">
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Portfolio</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Contact</a>
</li>
</ul>
I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?
The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.
I have set up a simple example of what you want. Check it on the fiddle here
The HTML:
<ul>
<li>Home</li>
</ul>
The CSS:
ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }
li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
Add this to your CSS:
a:hover.jump {
color: [Insert whatever];
position: relative;
bottom: 2px;
}
And then add a class to your link
<ul>
<li>My Link Text</li>
</ul>
You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples