I have created a grid with div boxes on http://jsfiddle.net/TsRJy/.
The problem
I don't know how to make the a:hover work.
Info
Rewrite the HTML code as a table is not an option for me.
http://www.normann-copenhagen.com/Products succeded with this issue.
I prefer CSS before Javascript.
HTML (in case jsfiddle don't work)
<div class="container">
<div class="grid">
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
</div>
</div>
CSS
.container {
margin: 0 auto;
width: 500px;
}
.item {
border: 1px solid #ccc;
float: left;
margin: 0 -1px -1px 0;
}
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
}
.item a:hover {
border: 1px solid black;
}
You can use box-sizing property for this. Write like this:
.item a:hover {
border: 1px solid black;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/TsRJy/1/
try this one,just minor change in css
.container {
margin: 0 auto;
width: 500px;
}
.item { float: left; }
.item a {
display: block;
height: 99px;
width: 99px;
background: #f5f5f5;
border: solid 1px #d6d6d6;
border-width: 0 1px 1px 0;
}
.item a:hover {
border: solid 1px #f00;
margin: -1px 0 0 -1px;
}
http://jsfiddle.net/GtR3P/
for more accurate result try this one also hope this one solve your issue
.container {
margin: 0 auto;
width: 506px;
}
.item { float: left; }
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
border: solid 1px #d6d6d6;
border-width: 0 1px 1px 0;
}
.item a:hover {
border: solid 1px #f00;
margin: -1px 0 0 -1px;
}
.grid .item:nth-child(5n+1) a { border-left-width:1px; }
.grid .item:nth-child(5n+1) a:hover { margin:-1px 0 0 0; }
Since you have put border, the hover effect is not working properly.
.item a:hover {
box-shadow: 2px 2px 2px #333;
background-color:Teal
}
Look at this fiddle
Also here is a useful link
Also another way to go, it's to set border-color the same color as the box's background-color and change it to black on hover:
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
border: 1px solid #f5f5f5;
}
.item a:hover {
border-color: black;
}
Demo: http://jsfiddle.net/TrXT9/1/
I see your wrapper has a width of 500px. If you make a div with a width of 100px, a border of 1px and a margin-right of -1px, the div is still 101px.
box-sizing:border-box is a beautiful way to solve this problem, but it is not supported in IE7
If you want IE7-support, you need to adjust your width and height like this:
http://jsfiddle.net/TsRJy/5/
Related
I have a container with some tabs:
<div class="tabbed-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="active nav-link">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link">A longer tab name</a>
</li>
<li class="nav-item">
<a class="nav-link">Last tab</a>
</li>
</ul>
<div class="tab-content">
<p>
Hey look, some content!
</p>
<p>
More content!
</p>
</div>
</div>
.
body {
background-color: white
}
*, *::after, *::before {
box-sizing: border-box;
}
.tabbed-container {
display: flex;
flex-direction: column;
margin: 2em;
background-color: white;
}
.nav {
display: flex;
padding-left: 0;
margin-bottom: 0;
list-style: none;
justify-content: space-between;
}
.nav-tabs .nav-item {
margin: 0 3px -1px 3px;
flex: 1 1 auto
}
.nav-tabs > .nav-item:first-child {
margin-left: 0px;
}
.nav-tabs > .nav-item:last-child {
margin-right: 0px;
}
.nav-tabs .nav-item a {
border-radius: 10px 10px 0 0;
padding: 1em;
border: 0px;
border-bottom: 1px solid transparent;
background-color: #e4e4e4;
text-align: center;
}
.nav-tabs .nav-item a.active,
.nav-tabs .nav-item a:active {
background-color: white;
border: 1px solid #e4e4e4;
border-bottom: 1px solid white;
}
.nav-link {
display: block;
}
.tab-content {
padding: 1em;
width: 100%;
border: 1px solid #e4e4e4
}
fiddle: https://jsfiddle.net/pqmefsbr/34/
I would like for there not to be any border between the content and the active tab. To this end, I've changed the margin on .nav-tabs .nav-item from margin: 0 3px to margin: 0 3px -1 3px, and added border-bottom: 1px solid white to the active tab. This doesn't seem to have accomplished anything, though.
After playing around with the border color and thickness to see what is actually going on, it looks like the border of the content div is always being rendered on top of the tab's border, so my white border-bottom is accomplishing nothing. What can I do to get the tab's border to render on top instead? Is there possibly some other way to accomplish what I'm trying to do?
Stacking without the z-index property | MDN
When the z-index property is not specified on any element, elements
are stacked in the following order (from bottom to top):
The background and borders of the root element Descendant
non-positioned blocks, in order of appearance in the HTML Descendant
positioned elements, in order of appearance in the HTML
Short answer is:
.nav-tabs {
position: relative;
...
}
Related examples:
.a {
height: 20px;
background: pink;
margin-bottom: -10px;
}
.b {
height: 40px;
border: 10px solid gray;
}
.relative {
position: relative;
}
.z-index {
z-index: 1;
}
<h3>Example 1: all default</h3>
<div class="a"></div>
<div class="b"></div>
<h3>Example 2: 1st position: relative</h3>
<div class="a relative"></div>
<div class="b"></div>
<h3>Example 3: both position: relative</h3>
<div class="a relative"></div>
<div class="b relative"></div>
<h3>Example 4: both position: relative + 1st z-index: 1</h3>
<div class="a relative z-index"></div>
<div class="b relative"></div>
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
UI told me to make a list, the list item height is not fixed, it depends on the images uploaded by user, and the user may upload a 10x1000 image or 1000x10 image, whatsoever, the image width is fixed to 100px, but height is auto. At right side of the image, there are some text written by user, which is not a one line text, it is multiline text which we don't know how many lines there will be.
html like below:
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
css as below:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
But the result is as below:
How can I make the text box vertical align middle to the image at left side?
All code is at Codepen, you can try it there.
Thank you!
Declare vertical-align: middle on the sibling element (.aaa) as well.
To display x2 sibling inline block-level elements vertically center to each other, both elements should have the property vertical-align: middle.
Code Snippet Demonstration:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle; /* additional */
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
You can use the power of flex.
Use align-items: center to do the trick.
Check it out: https://codepen.io/anon/pen/dJmrvB
Solution1: Just apply vertical-align: middle; to .aaa class
.container {
border: 1px solid green;
padding: 1px;
position: relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
Solution2: Try to make use of flex CSS
.container {
border: 1px solid green;
padding: 1px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.container img {
width: 300px;
}
.aaa {
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
I am trying to rescale images of the following div but the CSS style doesn't have any effect.
The div tags:
<article id="article_1">
<div id="div_article_1_fleche_haut">
<img src="images/haut.png" />
</div>
<div id="div_article_1_central">
<div id="div_article_1_central_fg">
<img src="images/gauche.png" />
</div>
<div id="div_article_1_central_carte">
<img src="images/r500_0.gif">
</div>
<div id="div_article_1_central_fd">
<img src="images/droite.png" />
</div>
</div>
<div id="article_1_fleche_bas">
<img src="images/bas.png" />
</div>
</article>
The CSS file:
#div_header_main {
width: 90%;
overflow:hidden; /**/
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height:80px;
}
#div_article_1_central_carte img
{
height: 25px;
}
This is the jsfiddle file:
http://jsfiddle.net/e7gvbz66/3/
I have updated your CSS file on jsfiddle.net/e7gvbz66/8/ its working fine now. Unnecessary characters were present in your CSS file, I have removed and just added some styles to show the changes.
#div_header_main {
width: 90%;
overflow:hidden;
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height: 80px;
/*added for testing*/
width: 40px;
}
#div_article_1_central_carte img
{
/*updated for testing*/
height: 55px;
width: 100px;
}
#div_article_1_central_carte
{
}
Please include a style like this in your CSS file then the style of img will apply correctly.
#div_article_1_central_carte {
}
fiddle should explain the issue, but cannot see what I’m doing wrong here
here is the code:
body {
background-color: #ededed;
}
#social{
position: fixed;
top: 50px;
left: 50px;
border: thin solid #ff6600;
}
#social .facebook a {
width: 60px;
height: 60px !important;
background-color: #000000;
border: thin solid #00ff00;
}
#social .facebook a:hover {
width: 60px;
height: 60px !important;
background-color: #3B5998;
}
<style>
</head>
<body>
<div id="social">
<div class="facebook">
<a href="#">
<img src="http://poststudio.co.uk/louisbrennan/facebook.png"
width="60" height="60"/>
</a>
</div>
</div>
</body>
http://jsfiddle.net/misemefein/McmAQ/
any thoughts appreciated
Add display: block; to #social .facebook a so that it occupies the full height of its container
Example: http://jsfiddle.net/Adrift/McmAQ/4/