CODEWITHSUNDEEP
htmlcss
Coding Gal
Coding Gal

Reputation: 145

CSS border trouble

I have a slight problem with CSS borders. I have 9 camera feeds streaming directly to one webpage. I want a neat white 1px border between the nine of them, but no matter how hard I try, no dice. Currently my code is:

It SHOULD give me a neat 1px border everywhere, right? Nope. What it gives me is this:

view cams

body{
	background-color:#FFF;
	text-align:center;
	margin:0;
	padding:0;
	overflow:hidden;
}    
.cam{
	width: 33%; 
	height: auto; 
	float:left;
	border-style:solid;
	border-color:white;
	border-width:0px;
}

#topleft{
	border-bottom-width:1px;
	border-right-width: 1px;
}

#topright{
	border-bottom-width:1px;
	border-left-width: 1px;
}

#bottomleft{
	border-top-width:1px;
	border-right-width: 1px;
}

#bottomright{
	border-top-width:1px;
	border-left-width: 1px;
}

#middle{
	border-top-width:1px;
	border-left-width: 1px;
	border-bottom-width:1px; /*Note that I didn't even include the top border to try and fix the problem.*/
} 
<img class="cam" src="*IP ADRESS*" id="topleft">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="topright">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="middle">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="bottomleft">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id ="bottomright">

Upvotes: 0

Views: 79

Answers (3)

Rohit Kumar
Rohit Kumar

Reputation: 2031

no need to add 4 or 5 id, just use this -

.cam + .cam {
    border-left: 1px solid #fff;
}

to get a vertical border between each.

now for a horizontal border, this one should do -

.cam {
    border-bottom: 1px solid #fff;
}

However, this one adds a horizontal border-bottom at the last low also. To remove that also, you can do this -

.cam:nth-child(7), .cam:nth-child(8), .cam:nth-child(9) {
    border-bottom: none;
}

Here is the working fiddle

Upvotes: 3

U K A
U K A

Reputation: 321

If using a table, border-collapse will solve this.

If without using a table, then please run the code snippet below,

.cells {
  width: calc((100% - 2px)/3);
  height: 100px;
  float: right;
  background-color: #EFEFEF;
  border: 1px solid white;
  box-sizing: border-box;
  margin-top: -1px;
  margin-left: -1px;
}
<div>
  <div class="cells cell-1"></div>
  <div class="cells cell-2"></div>
  <div class="cells cell-3"></div>
  <div class="cells cell-4"></div>
  <div class="cells cell-5"></div>
  <div class="cells cell-6"></div>
  <div class="cells cell-7"></div>
</div>

Upvotes: 2

Aaron
Aaron

Reputation: 10430

Try this..

body {
  background-color: grey;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.cam {
  width: 33%;
  height: auto;
  float: left;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="topleft">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="topright">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="middle">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="bottomleft">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="bottomright">

Currently your widths are 33% which when you apply a border will add extra width and height to the image.

By applying border-box your image will use width + padding + border to create the 33% width of each item.

Upvotes: 2

Related Questions