I've got a page with a thumbnail on it (more to come, so the float:left property is necessary). The thumbnail is a Div, with an anchor in it, in that anchor is an image and some text. The text is below the image. The ancho rinks to a pdf file. Simple.
http://www.bridgecitymedical.com/forms
The problem is that the text gets underlined on hover when you hover over it, and the thumb image gets a border and the text gets underlined when you hover over the thumb image. What I need is for then you hover over either the text or the image, that they BOTH get applied their respective hover states, e.g. image gets a border, text gets underlined. At the moment they function by themselves, but they need to be one, or it just looks odd.
Here's the markup:
<div class="form">
<a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
<div class="form-wrapper">
<div class="form-thumb">
<img src="/forms/thumbs/1.jpg" alt="" />
</div>
Caption
</div>
</a>
</div>
and the css...
.form {
margin: 30px;
font-size:.8em;
width: 137px;
text-align: center;
}
.form-thumb{
width: 125px;
height: 150px;
padding:5px;
border: 1px solid rgba(0,0,0,.2);
float:left
}
.form-thumb:hover{
border: 1px solid #000;
}
The text underline comes from another part of the tylesheet by default.
Can I do this without javascript!?
Solved by Chris (selected answer). Here's his solution, with my thumb in a fiddle...
http://jsfiddle.net/7MLjZ/1/
Use the :hover state on .form-wrapper instead.
<div class='wrap'>
<div class='thumb'></div>
Text!
</div>
.wrap{width:60px; height:80px;}
.thumb{width:60px; height:60px; background-color:blue;}
.wrap:hover{text-decoration:underline;}
.wrap:hover .thumb{border:5px solid black;}
http://jsfiddle.net/7MLjZ/
This should work to make both the image's div border and the caption's text black when hovered:
.form {
margin: 30px;
font-size:.8em;
width: 137px;
text-align: center;
}
.form-thumb{
width: 125px;
height: 150px;
padding:5px;
border: 1px solid rgba(0,0,0,.2);
float:left
}
.form:hover .form-wrapper .form-thumb {
border: 1px solid #000;
}
a:hover {
color:#000;
}
Related
Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.
Is there a way (preferably a CSS trick) to prevent my divs from appearing like having a double border? Have a look at this image to better understand what I mean:
You can see that where the two divs meet, it appears like they have a double border.
If we're talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:
.collection {
/* these styles are optional here, you might not need/want them */
margin-top: -1px;
margin-left: -1px;
}
.collection .child {
outline: 1px solid; /* use instead of border */
margin-top: 1px;
margin-left: 1px;
}
Note that outline doesn't work in older browsers (IE7 and earlier).
Alternately, you can stick with the borders and use negative margins:
.collection .child {
margin-top: -1px;
margin-left: -1px;
}
#divNumberOne { border-right: 0; }
HTML:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
CSS:
div {
border: 1px solid #000;
float: left;
}
div:nth-child(n+2) {
margin-left: -1px;
}
Demo
Include ie9.js for IE8 support (it's very useful for all CSS selectors/pseudo-elements).
Another solution one might consider is using the CSS Adjacent sibling selector.
The CSS
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
jsFiddle
I'm late to the show but try using the outline property, like so:
.item {
outline: 1px solid black;
}
Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.
You can use odd selector to achieve this
.child{
width:50%;
float:left;
box-sizing:border-box;
text-align:center;
padding:10px;
border:1px solid black;
border-bottom:none;
}
.child:nth-child(odd){
border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
border-bottom:1px solid black
}
<div>
<div class="child" >1</div>
<div class="child" >2</div>
<div class="child" >3</div>
<div class="child" >4</div>
<div class="child" >5</div>
<div class="child" >6</div>
<div class="child" >7</div>
<div class="child" >8</div>
</div>
If the divs all have the same class name:
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
There's a JSFiddle demo here.
Add the following CSS to the div on the right:
position: relative;
left: -1px; /* your border-width times -1 */
Or just remove one of the borders.
Using Flexbox it was necessary to add a second child container to properly get the outlines to overlap one another...
<div class="grid__container">
<div class="grid__item">
<div class="grid__item-outline">
<!-- content -->
</div>
</div>
</div>
SCSS
.grid__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}
.grid__item {
flex: 0 1 25%; // grid of 4
margin: 0 0 1px; // margin-bottom to prevent double lines
}
.grid__item-outline {
margin: 0 0 0 1px; // margin-left to prevent double lines
outline: 1px solid #dedede;
}
If you also need to change border colors on interaction (eg. swatch selector in a form), I found out a nice trick to do it, using a combination of negative margins, padding adjustment and transform translate. Check it out:
.parent{
display: flex;
width: 100%;
max-width: 375px;
margin-left:1px;
}
.child {
margin-left: -1px;/* hide double borders behind their siblings */
flex: 1 0 auto;
}
.child input {
display:none
}
.child label {
display:block;
border: 1px solid #eaeaea;
min-height: 45px;
line-height: 45px;
cursor: pointer;
padding: 0 10px; /* will be changed when input is checked */
font-size: 15px;
text-align: center;
}
.child input:checked+label {
border: 1px solid red;
transform: translateX(-1px);
padding-left: 11px;
padding-right: 9px;
background-color: #fafafa;
}
<div class="parent">
<div class="child">
<input id="swatch-1" type="radio" value="1" name="option" checked="true">
<label for="swatch-1">Element 1</label>
</div>
<div class="child">
<input id="swatch-2" type="radio" value="2" name="option">
<label for="swatch-2">Element 2</label>
</div>
<div class="child">
<input id="swatch-3" type="radio" value="3" name="option">
<label for="swatch-3">Element 3</label>
</div>
</div>
My use case was for boxes in a single row where I knew what the last element would be.
.boxes {
border: solid 1px black // this could be whatever border you need
border-right: none;
}
.furthest-right-box {
border-right: solid 1px black !important;
}
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
CSS:
.one{
width:100px;
height:100px;
border:thin red solid;
float:left;
}
.two{
width:100px;
height:100px;
border-style: solid solid solid none;
border-color:red;
border-width:1px;
float:left;
}
jsFiddle
I just use
border-collapse: collapse;
in the parent element
I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.
You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.
My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.
Example of how I do it:
<div class="tableWrap">
<div class="tableRow tableHeaders">
<div class="tableCell first">header1</div>
<div class="tableCell">header2</div>
<div class="tableCell">header3</div>
<div class="tableCell last">header4</div>
</div>
<div class="tableRow">
<div class="tableCell first">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell last">stuff</div>
</div>
</div>
Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;
.tableWrap {
display: table;
}
.tableRow {
display: table-row;
}
.tableWrap .tableRow:first-child .tableCell {
border-top: 1px solid #777777;
}
.tableCell {
display: table-cell;
border: 1px solid #777777;
border-left: 0;
border-top: 0;
padding: 5px;
}
.tableRow .tableCell:first-child {
border-left: 1px solid #777777;
}
Et voila, a perfect table.
Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.
I was able to achieve it using this code:
td.highlight {
outline: 1px solid yellow !important;
box-shadow: inset 0px 0px 0px 3px yellow;
border-bottom: 1px solid transparent !important;
}
A very old question, but it was the first google result, so for anyone that comes across this and doesn't want to have media queries to re-add the border to the right/left of the element on mobile etc.
The solution I use is:
.element {
border: 1px solid black;
box-shadow: 0 0 0 1px black;
}
This works because you'll see a 2px border around the element made of the border and the shadow. However, where the elements meet, the shadow overlaps which keeps it 2px wide;
To add to a 9 year old question, another clean and responsive way to achieve this is to:
Add a border-left and border-top to the parent
Add border-right and border-bottom to each of the children
What about giving a margin:1px; around your div.
<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
<div class="brd"></div>
<div class="brd"></div>
<div class="brd"></div>
</body>
</html>
DEMO
I prefer to use another div behind them as background and delete all the borders. You need just to calculate the size of the background div and the position of the foreground divs.
Is it possible to remove the padding on the image, but keep the padding for the text from within the style.css file:
<p>
Hello World
<img src="">
</p>
I've set style as:
style.css
p { padding: 5px 10px }
img { padding: 0px !important}
You need to think about how elements interact. Padding is space INSIDE the element and margin is space OUTSIDE the element. Both "push" an element around in the layout.
Images don't have padding. (at least not like other elements, you would only see it if you wanted an offset border)
Also, the text content of an element doesn't have any properties so you can't add/remove padding from that.
Your currently have something like this:
------------<p>-------------
some text
------------<img>-----------
------------</img>----------
------------</p>------------
This means the text is sitting directly on the image and there's space between the image and the bottom of the image and the end of the paragraph.
If you want space between the image and the text you would add a margin-top to the image to push it down. If you want to remove the space between the image and the end of the paragraph you can either remove the padding-bottom from the paragraph tag OR give the image a negative margin-bottom
p {
margin-bottom: 20px;
background-color: aqua;
}
img {
display:block;
}
p.one {
padding: 5px 10px;
}
p.two {
padding: 5px 10px 0 10px;
// top right bottom left
}
p.two img {
margin-top: 20px;
}
What you have
<p class="one">
some text
<img src="https://via.placeholder.com/150" />
</p>
Giving the image space
<p class="two">
some text
<img src="https://via.placeholder.com/150" />
</p>
I'm not exactly sure what you are trying to do; the padding will be independent for each element you specify it for; so setting padding for the paragraph will not apply it for the image, however setting it on the image will increase the height of the paragraph probably.
You also have the option to display them side by side without them being nested so the padding of the paragraph does not affect the image in any way at all.
p {
padding: 5px 10px;
border: 1px solid red;
}
img {
padding: 0px;
height: 20px;
width: 20px;
border: 1px solid blue;
}
.img2 {
padding: 15px;
height: 20px;
width: 20px;
border: 1px solid blue;
}
.p2 {
padding: 0px;
border: 1px solid red;
}
.p3 {
padding: 15px;
border: 1px solid red;
display: inline-block;
}
.container {
border: 1px solid green;
}
<!-- Paragraph with padding and image inside with padding -->
<p>
Hello World
<img src="">
<img src="" class="img2">
</p>
<!-- Paragraph without padding and image inside without padding -->
<p class="p2">
Hello World
<img src="">
</p>
<!-- Container with paragraph with padding and image without padding as separate elements -->
<div class="container">
<p class="p3">Hello World</p>
<img src="">
</div>
I'm working on a map project and for some reason my tooltip's text width will continue to expand as wide as I want until I add a space to my text. If I add a space, it breaks to the next line; what is going on and how do I fix this? I'd like the text on one line without specifying a width so it can automatically set the width, how can I fix this?
In the example below, look at text "Baseball Fields" in the paragraph tag. If it reads "BaseballFields" it will stay on one line. But as soon as I add the space, it will line break.
<div style="width: 750px; height: 1221px; border: 0; padding: 0; margin-top: 10px; display: block; position:relative; background: url('http://www.thefirstacademy.org/filerequest/9701.jpg') no-repeat left top;">
<style type="text/css">
.triangle {
position:absolute;
bottom:-5px;
left:40%;
height:0;
width:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid white;
}
.tooltip {
color:#ef4c4c;
background:#ffffff;
padding:17 10;
display:block;
position:absolute;
border-radius:5px;
font:.8em 'MuseoSans-500','Museo Sans';
top:-40px;
box-shadow:0px 3px 3px #000;
border:1px solid #000;
}
</style>
<div class="marker" style="position:absolute;cursor:pointer;left:450px;top:75px;" id="baseball">
<img src="http://www.thefirstacademy.org/filerequest/9702.png" alt="Location Marker" />
<div class="tooltip" >
<div class="triangle"></div>
<p style="padding:0;margin:0;line-height:0;display:block;">Baseball Fields</p>
</div>
</div>
</div>
Just a heads up: in addition to white-space: nowrap; it can be helpful to include display: inline-block; for browser compatibility purposes
Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.
Is there a way (preferably a CSS trick) to prevent my divs from appearing like having a double border? Have a look at this image to better understand what I mean:
You can see that where the two divs meet, it appears like they have a double border.
If we're talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:
.collection {
/* these styles are optional here, you might not need/want them */
margin-top: -1px;
margin-left: -1px;
}
.collection .child {
outline: 1px solid; /* use instead of border */
margin-top: 1px;
margin-left: 1px;
}
Note that outline doesn't work in older browsers (IE7 and earlier).
Alternately, you can stick with the borders and use negative margins:
.collection .child {
margin-top: -1px;
margin-left: -1px;
}
#divNumberOne { border-right: 0; }
HTML:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
CSS:
div {
border: 1px solid #000;
float: left;
}
div:nth-child(n+2) {
margin-left: -1px;
}
Demo
Include ie9.js for IE8 support (it's very useful for all CSS selectors/pseudo-elements).
Another solution one might consider is using the CSS Adjacent sibling selector.
The CSS
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
jsFiddle
I'm late to the show but try using the outline property, like so:
.item {
outline: 1px solid black;
}
Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.
You can use odd selector to achieve this
.child{
width:50%;
float:left;
box-sizing:border-box;
text-align:center;
padding:10px;
border:1px solid black;
border-bottom:none;
}
.child:nth-child(odd){
border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
border-bottom:1px solid black
}
<div>
<div class="child" >1</div>
<div class="child" >2</div>
<div class="child" >3</div>
<div class="child" >4</div>
<div class="child" >5</div>
<div class="child" >6</div>
<div class="child" >7</div>
<div class="child" >8</div>
</div>
If the divs all have the same class name:
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
There's a JSFiddle demo here.
Add the following CSS to the div on the right:
position: relative;
left: -1px; /* your border-width times -1 */
Or just remove one of the borders.
Using Flexbox it was necessary to add a second child container to properly get the outlines to overlap one another...
<div class="grid__container">
<div class="grid__item">
<div class="grid__item-outline">
<!-- content -->
</div>
</div>
</div>
SCSS
.grid__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}
.grid__item {
flex: 0 1 25%; // grid of 4
margin: 0 0 1px; // margin-bottom to prevent double lines
}
.grid__item-outline {
margin: 0 0 0 1px; // margin-left to prevent double lines
outline: 1px solid #dedede;
}
If you also need to change border colors on interaction (eg. swatch selector in a form), I found out a nice trick to do it, using a combination of negative margins, padding adjustment and transform translate. Check it out:
.parent{
display: flex;
width: 100%;
max-width: 375px;
margin-left:1px;
}
.child {
margin-left: -1px;/* hide double borders behind their siblings */
flex: 1 0 auto;
}
.child input {
display:none
}
.child label {
display:block;
border: 1px solid #eaeaea;
min-height: 45px;
line-height: 45px;
cursor: pointer;
padding: 0 10px; /* will be changed when input is checked */
font-size: 15px;
text-align: center;
}
.child input:checked+label {
border: 1px solid red;
transform: translateX(-1px);
padding-left: 11px;
padding-right: 9px;
background-color: #fafafa;
}
<div class="parent">
<div class="child">
<input id="swatch-1" type="radio" value="1" name="option" checked="true">
<label for="swatch-1">Element 1</label>
</div>
<div class="child">
<input id="swatch-2" type="radio" value="2" name="option">
<label for="swatch-2">Element 2</label>
</div>
<div class="child">
<input id="swatch-3" type="radio" value="3" name="option">
<label for="swatch-3">Element 3</label>
</div>
</div>
My use case was for boxes in a single row where I knew what the last element would be.
.boxes {
border: solid 1px black // this could be whatever border you need
border-right: none;
}
.furthest-right-box {
border-right: solid 1px black !important;
}
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
CSS:
.one{
width:100px;
height:100px;
border:thin red solid;
float:left;
}
.two{
width:100px;
height:100px;
border-style: solid solid solid none;
border-color:red;
border-width:1px;
float:left;
}
jsFiddle
I just use
border-collapse: collapse;
in the parent element
I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.
You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.
My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.
Example of how I do it:
<div class="tableWrap">
<div class="tableRow tableHeaders">
<div class="tableCell first">header1</div>
<div class="tableCell">header2</div>
<div class="tableCell">header3</div>
<div class="tableCell last">header4</div>
</div>
<div class="tableRow">
<div class="tableCell first">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell last">stuff</div>
</div>
</div>
Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;
.tableWrap {
display: table;
}
.tableRow {
display: table-row;
}
.tableWrap .tableRow:first-child .tableCell {
border-top: 1px solid #777777;
}
.tableCell {
display: table-cell;
border: 1px solid #777777;
border-left: 0;
border-top: 0;
padding: 5px;
}
.tableRow .tableCell:first-child {
border-left: 1px solid #777777;
}
Et voila, a perfect table.
Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.
I was able to achieve it using this code:
td.highlight {
outline: 1px solid yellow !important;
box-shadow: inset 0px 0px 0px 3px yellow;
border-bottom: 1px solid transparent !important;
}
A very old question, but it was the first google result, so for anyone that comes across this and doesn't want to have media queries to re-add the border to the right/left of the element on mobile etc.
The solution I use is:
.element {
border: 1px solid black;
box-shadow: 0 0 0 1px black;
}
This works because you'll see a 2px border around the element made of the border and the shadow. However, where the elements meet, the shadow overlaps which keeps it 2px wide;
To add to a 9 year old question, another clean and responsive way to achieve this is to:
Add a border-left and border-top to the parent
Add border-right and border-bottom to each of the children
What about giving a margin:1px; around your div.
<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
<div class="brd"></div>
<div class="brd"></div>
<div class="brd"></div>
</body>
</html>
DEMO
I prefer to use another div behind them as background and delete all the borders. You need just to calculate the size of the background div and the position of the foreground divs.
I have the following structure:
<div class="boxLayer">
<div class="text">Result</div>
<div class="additionalLink"></div>
</div>
.boxLayer{
position: relative;
float:left;
height:28px;
width:100%;
border-top: 1px solid #cccccc;
background-color: #fff;
}
.boxLayer a {
display:block;
height:100%;
width: 100%;
background: white;
}
.boxLayer a:hover{
background-color: #ffeecc;
}
The idea is to have a box with a text shown at the left side of this box and an additional link at the right side of the box. When i hover over the box, the backgroundColor of the box is shown, also when i hover over the text or the second link. I have managed to create the Box, but when i add the text or the link, the hover-Effect of the box is not shown.
I am not sure this will be your answer
please check the fiddle:
.boxLayer {
position: relative;
height:auto;
float:left;
width:100%;
border-top: 1px solid #cccccc;
background-color: #fff;
}
.boxLayer:hover {
background-color: #ffeecc;
}
<div class="boxLayer">
<div class="text">Result</div>
<div class="additionalLink"> </div>
</div>