I have two DIVs one contain new release and must, another one contain whole data.
both div have a red border. I remove bottom border of first div.
I want to remove the border where I marked with red rectangle:
Have your active tab have position:relative and z-index higher then the content box. Then add border-bottom: 1px solid white and give it margin-bottom: -1px.
From a current project: http://jsfiddle.net/aVZLH/1/
Maybe you have some additional work for IE. But rudimentary it should show you a way to solve your problem... Without additioanl markup in your document.
<ul>
<li class="current">Tab #1</li>
<li>Tab #2</li>
</ul>
<div class="content">
<p>MY AWESOME CONTENT</p>
</div>
/*CSS*/
ul {
overflow: hidden;
position: relative;
top: 1px;
z-index: 2;
}
li {
color:#fff;
background:red;
float:left;
border:1px solid red;
padding:5px 10px;
position:relative;
top:1px;
}
.current {
background: #FFFFFF;
border-bottom: 0;
color: red;
}
.content {
padding:20px;
border:1px solid red;
position:relative;
z-index:1;
}
You can create another div to occupy the space to the right of the "Must" tab. Set this div's bottom border to "1px solid red". Then, remove the border-top from the news box, and the border-bottom from the tabs themselves.
Related
I'm trying to achieve the following :
I have image and I need border 1px black and 1px white on the img to achieve some effects . And on hover 3px border that on click become active class and change the hover to fixed border of 3px.
What is the best way to that ?
I tried to do that with padding 3px on the a link
And gave the following :
a {
float:left;
background-color:white;
padding:3px;
}
and
img {
max-width:100%;
float:left;
}
The problem is that the border is not equal and little bit move the img.
Also When I hover all the UI I need opacity 0.5 and it's make problem with the a
So I looking for the best solution for 3 borders with hover and active/non active without affecting the img
my code is :
<ul>
<li>
<div>
<a class="active">
<img>
</a>
</div>
</li>
<li>
<div>
<a>
<img>
</a>
</div>
</li>
</ul>
Not sure if this is what you had in mind, but I hope that the output below can help you get started.
The main trick here is to put your <img> inside 3 divs:
the innermost div is your white border
the middle div is your black border
the outermost div is a transparent 1px border
The last one is required so that the image doesn't move--since the border is already there and will not have to be generated when you hover.
So when you hover: the outer div becomes white, the middle div (previously black) becomes white, and the last div is, well, still white. Voila! You have your "3px solid white" border on hover.
in order to toggle an active class that will stick, then you will need javascript. In this case, I just went ahead and used JQuery.
last note: since I eliminated your <a> tag, I just put a cursor:pointer rule on your outermost div so that it will still look like you are hovering on a link. You can just place whatever is your link action in your javascript onclick rule.
Hope this helps!
$('.outer').on('click',function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
body {
background:gray;
}
li {
margin-top:15px;
}
li * {
transition:all ease 0.3s;
}
li:hover {
cursor:pointer;
}
.outer {
border:1px solid transparent;
}
.outer:hover,.outer:hover > .black-border {
border:1px solid white;
}
.outer:hover img {
opacity:0.5;
}
.active {
border:1px solid white;
}
.active > .black-border {
border:1px solid white;
}
img {
max-width:100%;
padding:0;
margin:0;
vertical-align:top;
background-size:cover;
}
.black-border {
border:1px solid black;
}
.white-border {
border:1px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div>
<div class="outer">
<div class="black-border">
<div class="white-border">
<img src="https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg">
</div>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="outer">
<div class="black-border">
<div class="white-border">
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg">
</div>
</div>
</div>
</div>
</li>
</ul>
I'm sort of new to HTML and currently, I am creating a custom home page for myself containing links to site I often visit.
When I hover over a picture it expands to show more specific links (i.e. subreddits).
However, the problem is that the "sub-link-icons" are not properly aligned with the expanding DIV It will show in front of the bigger picture when hovering over it.
What I am trying to do is have the sub-link-icons to be in sync with the expanding div.*
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Homepage</title>
</head>
<body>
<div class="submenu" id="steam"><img src="steam.png"></div>
<div class="submenu" id="reddit">
<img src="reddit.png"/>
<ul>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
</ul>
</div>
<div class="submenu" id="youtube"><img src="youtube.png"/></div>
</body>
</html>
CSS:
body {
background-color: #330000;
color: white;
}
div img {
width:256px;
height:256px;
border-radius:5px;
}
li img {
width:75px;
height:75px;
border-radius:15px;
}
#youtube:hover {
border: #E6E6E6 solid 4px;
background-color: #E6E6E6;
}
#steam:hover {
border: #12151A solid 4px;
background-color: #12151A;
}
#g2a:hover {
border: #0F1F2E solid 4px;
background-color: #0F1F2E;
}
#reddit:hover {
border: #999999 solid 4px;
background-color: #999999;
}
ul{
position:absolute;
list-style-type: none;
display:none;
margin-left: 125px;
}
.submenu {
border-radius: 5px;
position:relative;
display: inline-block;
margin-left: 0px;
width:256px;
height:256px;
border:4px solid #330000;
text-align:center;
margin-left:5px;
margin-top:5px;
transition: width 1s;
z-index:0;
}
.submenu img {
float:left;
}
.submenu:hover {
width:350px;
transition: width 1s;
}
.submenu:hover img {
float:left;
z-index:2;
}
.submenu ul {
position: absolute;
}
.submenu:hover ul {
display:inline-block;
float:right;
margin-top:-10px;
margin-left:-45px;
position:absolute;
z-index: 1;
}
.submenu:hover ul li img {
float:left;
margin-left: -30px;
margin-top: 12.5px;
}
I've tried searching the web for help but couldn't quite manage it.
JSFIDDLE
Lets go through this step by step.
First issue: On hover, "sub-icon-links" are layered over your big pictures, instead of under it.
This IS fixable with z-index, but first you have to understand how z-index works.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
With z-index you can layer elements that are in the same HTML layer. Because it didn't work I assume you've tried to apply z-index on the sub-menu-links. This wouldn't work because the big picture is not on the same layer as them. If we take a look at your HTML structure you'll see:
<div class="submenu" id="reddit">
<img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/>
<ul>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
</ul>
</div>
To use z-index in this case, you have to see at which points the images or their containers are on the same layer.
Your big image is contained within an anchor tag (a)
Your small images are contained within list items
These list items are contained within an unordered list
This unordered list and the anchor tag are on the same layer. Applying z-index to one of these will fix this issue.
Note: This works different when using things like "position: absolute" and "position: fixed" or any other attribute that changes the position of the element in the HTML stack.
JSFiddle: https://jsfiddle.net/eehdo8wa/5/
What I did:
Added "z-index: -1;" to ".submenu ul"
Removed "z-index: 1;" from ".submenu:hover ul"
Second issue: On hover, the "sub-icon-links" should expand at the same rate as the div expands
So, doing this should be very simple now the pictures are layered under the big picture correctly. Basically, when you think about it, all you should have to do is make the pictures stick to the right side of its parent, so when it expands, the pictures stick to the right side and slide along, taking them into the view.
JSFiddle: https://jsfiddle.net/eehdo8wa/6/
What I did:
I redid some of the CSS to make it so everything is already in the right position before sliding into the view. This is essentially what you want in these cases. In your original fiddle you had a LOT of styling on the hover portions, changing all kinds of styling and spacings, but was it really needed? In the end, no. Now it's all in position behind the big image, ready to slide right into the view.
I'm trying to create an element with a div in it, the div is a slightly smaller box then the outer, and makes it appear as a border withing the outer box.. hard to verbalize. the div contains several ul's that I want to maintain a height of 64px, and I want the div to have a set height also. however, the div seems unresponsive to any height I set in css, it just wants to do its own thing I guess and instead has decided that it should base its height on how many ul's there are within it.. I was hoping someone could explain whats going on with it, why it wont obey my commands, and possibly offer a solution.
here's the css:
#selectUnitScreen {
overflow: hidden;
min-width:390;
min-height:350;
left:5%;
top:5%;
bottom:5%;
right:5%;
padding:5%;
border-left: solid red 5px;
border-right:solid red 5px;
border-top: solid red 12px;
border-bottom: solid red 12px;
}
#selectUnitScreen ul {
height:64px;
}
#selectUnitScreen li {
font-size:25px;
padding-left: 5%;
display: inline-block;
}
#buildUnitScreen {
padding: 3px;
position: absolute;
z-index: 10;
border-radius: 2%;
border: 3px solid black;
width:400px;
height:470px;
background: white;
box-shadow: 4px 0px 2px 1px black;
left:260px;
top:200px;
}
and the HTML:
<section id="buildUnitScreen">
<div id="selectUnitScreen">
<ul id="build">
<li class="name">
infantry
</li>
<li class="cost">
1000
</li>
</ul>
<ul id="build">
<li class="name">
mechenized infantry
</li>
<li class="cost">
3000
</li>
</ul>
</div>
jsfiddle: https://jsfiddle.net/FJV8b/
The problem lies in your not setting units for the min-height and min-width. You say 390 and 350 but what are those? px? Otherwise those values are ignored. So:
min-height:350px;
I'm a CSS-beginner. Basically I have the following html:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
I want to have a thick underline when hovering my a tags, but I use a custom font with big descenders, so if I use the common trick for this:
a:hover {
text-decoration: none;
border-bottom: 2px solid;
padding: 0;
margin: 0;
}
The underline is far below the base line: But I want it to look like this:
I tried to do it like this:
<ul>
<li class="over">О нас</li>
<li class="over">Галерея</li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
But the width of the underline is the same for all the strings now:
Then I added display: inline-block; for .over. But I got this:
Then I changed inline-block to table, but the underline is again far below:
I ended up adding an extra span, so now I have:
<ul>
<li><span class="over">О нас</span></li>
<li><span class="over">Галерея</span></li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
display:inline-block;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
And this gives me finally the desired behaviour (the underline width is adjusted to the string width, and it's positioned close to the baseline). But is it a good practice to add an extra span for this purpose? Doesn't it look hacky?
A span is a meaningless tag, so it won't give extra 'weight' to your code. Therefor, imho, it is okay to use it (but better to avoid).
Alternatively you could do the following:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
a {
font-size: 30px;
text-decoration: none;
position: relative;
}
a:hover:after {
content: "";
border-bottom: 2px solid #ec6713;
position: absolute;
left: 0;
right: 0;
bottom: 3px;
}
And a DEMO.
Please note that the :after is overlapping the a. I've tried adding a z-index, but that didn't fix it.
OPTION 2
Add a background-image to your a.
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.