So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below
I tried to put out this font-awesome icon by using the :after selector, it got pretty ugly:
http://fortawesome.github.io/Font-Awesome/icon/angle-right/
So instead, I tried to put an arrow on an arrow through this arrow generator:
http://apps.eky.hk/css-triangle-generator/
It also became very ugly. So now I wonder if there is anyone who has a good idea on how to solve this?
How my html look like so far:
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">
<a class="bx-pager-link active" data-slide-index="0" href=""> 1. DIN EXPERT </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
</div>
</div>
You can create triangles with CSS borders by:
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green
I've created the same thing as you see above here:
#container {
width:150px;
height:40px;
background-color:green;
position:relative;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green;
position:absolute;
right:-20px;
}
<div id="container">
<div class="arrow-right"></div>
</div>
Atlast!! :)
div.main {
margin-right:30px;
}
ol > li {
display: table-cell;
height: 30px;
position: relative;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid #d68a3a;
}
ol > li > div {
position:relative;
line-height: 30px; /* equal to the list item's height */
height:100%;
width: 100%;
}
ol>li:hover {
background-color: #d68a3a;
cursor: pointer;
color: white;
}
ol {
display: table;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
ol > li > div:after, ol > li > div:before {
content:"";
display:inline-block;
border-width: 16px;
border-style: solid;
width: 0px;
height: 0px;
left: 100%;
top: -1px;
position: absolute;
z-index: 1;
}
ol > li > div:after, ol > li:hover > div:before {
border-color: transparent transparent transparent #d68a3a;
}
ol > li > div:before {
border-width: 14px;
display: block;
border-color: transparent transparent transparent #ffffff;
z-index: 2;
top:1px;
}
Working Fiddle
You have to make little bit changes to your html structure
Put active class at bx-pager-item element level
Put 1 extra element after anchor tag .
Please refer below code snippet.
Working fiddle link: Fiddle
.container {
max-width: 700px;
margin: auto;
}
.bx-pager {
display: flex;
align-items: center;
height: 34px;
border-left: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item {
display: flex;
align-items: center;
height: 100%;
flex: 0 25%;
border-top: 1px solid #d68a3a;
border-bottom: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item .bx-pager-link {
text-decoration: none;
color: #222;
font-size: 13px;
flex: 1;
padding-left: 16px;
text-align: center;
}
.bx-pager .bx-pager-item .arrow {
border: solid #d68a3a;
display: inline-block;
padding: 9px;
border-width: 0 1px 1px 0;
transform: translateY(15.5px) rotate(-45deg) skew(-15deg, -15deg) translateX(18px);
background-color: #FFF;
}
.bx-pager .bx-pager-item.active {
background-color: #d68a3a;
}
.bx-pager .bx-pager-item.active .bx-pager-link {
color: white;
}
.bx-pager .bx-pager-item.active .arrow {
background-color: #d68a3a;
}
<body>
<div class="container">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item active">
<a class="bx-pager-link " data-slide-index="0" href=""> 1. DIN EXPERT </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
<div class="arrow">
</div>
</div>
</div>
</div>
</body>
Please Change according to your specification.
<style>
.menu {
position: relative;
background: #88b7d5;
width:150px;
height:60px;
}
.menu:after, .menu:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
}
.menu:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
</style>
<div class="menu">
</div>
In case it is needed for others here is another solution, that can work as the requested answer, but will work if there is a need of separation of the elements.
Using the above examples, what will happen is that the background must always remain the same color. Like this it will always have a separation thus transparency between items.
Hope this helps, this post really helped me to find this solution :)
.items--container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-left: 1rem;
width: 150px;
height: 50px;
}
.item.active .content {
color: #FFFFFF;
}
.item.active .arrow {
background: #d68a3a;
}
.content {
color: #000000;
position: absolute;
z-index: 2;
}
.arrow {
width: 100%;
height: 50%;
background: #FFFFFF;
}
.arrow.top {
transform: skew(45deg, 0deg);
border-left: 1px solid #d68a3a;
border-right: 1px solid #d68a3a;
border-top: 1px solid #d68a3a;
}
.arrow.bottom {
transform: skew(-45deg, 0deg);
border-left: 1px solid #d68a3a;
border-right: 1px solid #d68a3a;
border-bottom: 1px solid #d68a3a;
}
<div class="items--container">
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 1</div>
<div class="arrow bottom"></div>
</div>
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 2</div>
<div class="arrow bottom"></div>
</div>
<div class='item active'>
<div class="arrow top"></div>
<div class="content">Menu Item 3</div>
<div class="arrow bottom"></div>
</div>
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 4</div>
<div class="arrow bottom"></div>
</div>
</div>
Related
I simply have 1 smaller div (navigation menu) in a bigger div (header).
And i need the border-bottom of the smaller div to be on the same height as the border-bottom of the bigger div.
I've attached to pictures:
have
want
.main-navigation-link .main-navigation-link-text {
border-bottom: 6px solid #F18000;
color: #F18000;
padding-bottom: 7px;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-main {
border-bottom: 7px solid red;
}
<div class="nav-main fixed-header">
<div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
<div class="container">
<nav class="nav main-navigation-menu">
<a class="nav-link main-navigation-link">
<div class="main-navigation-link-text">
<span itemprop="name">Dönermesser</span>
</div>
</a>
</nav>
</div>
</div>
</div>
JSFiddle
Try to set margin on smaller div margin-bottom: -5px; (or value of border thickness of bigger div)
.main-navigation-link .main-navigation-link-text {
border-bottom: 6px solid #F18000;
color: #F18000;
padding-bottom: 6px;
margin-bottom: -6px;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-main {
border-bottom: 6px solid red;
}
<div class="nav-main fixed-header">
<div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
<div class="container">
<nav class="nav main-navigation-menu">
<a class="nav-link main-navigation-link">
<div class="main-navigation-link-text">
<span itemprop="name">Dönermesser</span>
</div>
</a>
</nav>
</div>
</div>
</div>
You can use :after element on the element with text.
.box {
width: 100px; /* demo only */
padding: 10px;
text-align: center;
border-bottom: 10px solid #ccc;
}
.content {
position: relative;
display: inline-block;
color: orange;
}
.content:after {
content: '';
width: 100%;
height: 3px;
background: orange;
display: block;
position: absolute;
bottom: -13px;
}
<div class="box">
<div class="content">Dönermesser</div>
</div>
I cannot get my .container{} to encompass all the content on my web page. My lower navigation buttons are sitting outside the container (marked by a 1px black border) and I can't figure out why. I'm not sure where I've went wrong in my CSS or HTML code! Thanks in advance for your help. Here is a link to my CodePen: https://codepen.io/IDCoder/pen/rGWeEE?editors=0100
Here are my code snippets:
<html>
<head>
<title>Ms.Jane Equities Management Corp</title>
</head>
<body>
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/>
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> </div>
<div class ="nav wrap">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<!--<div class="search box wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>-->
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class ="nav wrap 2">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
</body>
<html>
CSS:
.container-fluid{
border: 1px solid #000000;
max-width: 1600px;
/*overflow: hidden;*/
}
.wrap{
background-color: yellow;
display: inline: flex;
/*overflow: hidden;*/
}
.Logos{
width: 55%;
display: inline-block;
background-color: blue;
}
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: 25px;
}
ul.navigation{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two{
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size:cover;
background-repeat: no-repeat;
max-width: 1600px;
height: 550px;
margin: auto;
}
.floater.box{
background-color: white;
border-radius: 10px;
opacity: .45;
max-width: 75%;
height: 200px;
position: absolute;
top:50%;
left: 0;
right: 0;
margin: auto;
}
/*.search {
width: 50%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
.search.box.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
I think your div.nav.wrap is getting pushed down because it's floated and there's no room for it in the container and because it's floated the container doesn't adjust for it. If you remove the float, you'll see the container start to contain it. That's normal float behaviour - elements with float are out of the 'flow' of the document so other elements aren't affected by them.
I'd just add a negative top margin to push it back up. I'd usually do this in rem or depending on how you size the nav height. So your existing .nav.wrap rule would become:
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: -35px;
}
I'm using html and css to make 3 boxes act as links, equally spaced apart. For some reason when I got the divs to be equally spaced, a line was created between all three, acting as a link to the div left of the line.
Why is the line there?
here is the code: (with some stuff taken out)
.divider{
text-align: center;
}
.image{
float:left;
}
#javatut, #frgames, #scratchtut{
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<a href="url">
<div id="javatut">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="frgames">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="scratchtut">
<!-- stuff in here -->
</div>
</a>
<span class="stretch"></span>
</div>
This line is caused by the browsers default styling of links as underlined. Just set text-decoration: none; on your links and the line will be invisible.
a {
text-decoration: none;
}
.divider {
text-align: center;
}
.image {
float: left;
}
#javatut,
#frgames,
#scratchtut {
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<a href="url">
<div id="javatut">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="frgames">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="scratchtut">
<!-- stuff in here -->
</div>
</a>
<span class="stretch"></span>
</div>
It's because text-decoration CSS property. Set to none, and it works.
#container a {
text-decoration: none;
}
Your markup is not right
Make your a tags inside the div, all your styles will work correctly
check this
.divider {
text-align: center;
}
.image {
float: left;
}
#javatut,
#frgames,
#scratchtut {
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div id="javatut">
<a href="url">
</a>
</div>
<div id="frgames">
<!-- stuff in here -->
<a href="url">
</a>
</div>
<div id="scratchtut">
<!-- stuff in here -->
</div>
<span class="stretch"></span>
</div>
Hope this helps
You can also do using flexbox for this
I have create a table listing. When user hover the first cell that is with 3 dots Edit and Delete option are displayed and below that there is a transparent background.
Everything is fine when content is in single line.
Issue is when there is more content. The height of overlay does not adjust. I have tried top: 0; bottom: 0; height: 100% to the .action it covers the whole table.
body {
margin: 0
}
.table {
display: table;
width: 100%;
border-bottom: 1px solid #ccc
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 2;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
left: 0;
right: 0;
margin-top: -19px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
Hope this helps you.
Use :before for the overlay on the cell and target the cells using ~ operator. I had same requirement. This is how I handled it.
body {
margin: 0
}
.table {
display: table;
width: 100%;
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
position: relative
}
.tRow:last-child .tCell {
border-bottom: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow .tCell:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.9);
top: 0;
left: 0;
display: none;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 3;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 4;
left: 0;
right: 0;
margin-top: -19px;
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
display: block;
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
#Tushar .. I noticed that the bottom line of the table, the div border never gets updated on the hover.. fiddle example
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000;
}
I'm currently working on some web coursework and as you'll notice I lack experience in web development. Basically I'm trying to create tables that hold products for a shop, however I want to use div tree's for the most part and if necessary forms for the text.
Essentially I want each independent table to hold an image, a description and eventually other data implemented with JS (I don't need help with this.. yet ^^). Hopefully you'll see what I'm trying to do from the code;
<div id="items">
<div id="item1" class="items">
<img src="img/products/robot1.jpg"/>
</div>
<div id="item2" class="items">
<img src="img/products/robot2.jpg"/>
</div>
<div id="item3" class="items">
<img src="img/products/robot3.jpg"/>
</div>
</div>
#content {
width: 600px;
padding-top: 10px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
.items{
display:inline;
}
#items {
padding-top:10px;
}
#items img{
border: 1px solid rgba(207, 207, 207, .7);
border-radius:20px;
}
The div's are parented by the 'content' container which is 600px wide, each table would have to be roughly 193px wide to fit three "products" on a row taking margins into consideration.
I drew a quick picture to represent exactly what I'm aiming for (the 'button' represents the 'add to basket' feature).
Unfortunately I can't use any frameworks such as jquery for the task so I'm stuck doing things the hard way. Apologies in advance for my lack of experience but hopefully you can put me in the right direction.
Edit: Using div's is just a preference, if it would be easier to use standalone forms I wouldn't mind.
Maybe this will point you in the right direction.
HTML:
<div id="content" class="clearfix">
<div id="items">
<div id="item1" class="items">
<img src="img/products/robot1.jpg"/>
Add
</div>
<div id="item2" class="items">
<img src="img/products/robot2.jpg"/>
Add
</div>
<div id="item3" class="items">
<img src="img/products/robot3.jpg"/>
Add
</div>
</div>
</div>
CSS:
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
#content {
width: 600px;
padding-top: 10px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
background:red;
}
.items{
float:left;
width:193px;
min-height:100px;
border:1px solid black;
position:relative;
}
.items a.add-basket {
position:absolute;
bottom:0;
right:0;
background:black;
color:#fff;
}
#item1 { margin-right:7px; }
#item2 { margin-right:7px; }
#items {
padding-top:10px;
}
#items img {
border: 1px solid rgba(207, 207, 207, .7);
border-radius:20px;
}
http://jsfiddle.net/DNS8P/1/
Here's a FIDDLE by the image you provide.
<div id="content">
<h1>Products</h1>
<div id="items">
<div id="item1" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
<div id="item2" class="items">
<img src="img/products/robot2.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
<div id="item3" class="items">
<img src="img/products/robot3.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</div>
</div>
#content {
width: 600px;
padding: 10px 10px 30px 10px;
margin: 30px auto;
text-align: center;
border: 1px solid #999;
}
#items {
padding-top:10px;
}
.items{
display: inline-block;
text-align: center;
width: 180px;
margin: 0 7px 0 7px;
padding-top: 10px;
border: 1px solid #999;
border-radius: 20px;
}
.items img {
width: 160px;
height: 140px;
border: 1px solid rgba(207, 207, 207, .7);
}
.items button {
background: #666;
width: 80px;
height: 26px;
float: right;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: none;
border-bottom: none;
outline: none;
cursor: pointer;
border-bottom-right-radius: 20px;
transition: background 0.2s ease-in;
}
.items button:hover {
background: #888;
}
.desc,
.price,
.other {
display: block;
margin-bottom: 10px;
}