Last post Dec 19, 2016 08:06 AM by Cathy Zou
Member
327 Points
1770 Posts
Dec 17, 2016 08:30 AM|grafic.web|LINK
Hi, i am looking to achive in css the following :
I would love on the top a red box with inside a white title adn just on the center bottom of the div a kind of down arrow also in red backround
and after just above a list of div with backround pictures 3 x3 same size height an width (250 x 250)
also the picture are link and i was thinking to give a color on hover and put inside them a white title of the picture
how to achive?
Star
8670 Points
2882 Posts
Dec 19, 2016 08:06 AM|Cathy Zou|LINK
Hi, grafic.web
Based on your need, I make an sample.
Following code for your reference:
<style> * { padding: 0; margin: 0; } .container { display: flex; justify-content: center; } .TitleDiv { position: relative; background-color: red; height: 50px !important; width: 600px !important; text-align: center; padding-top: 10px; } .TitleDiv:after { z-index: 100; position: absolute; top: 98.1%; left: 50%; margin-left: -10%; content: ''; width: 0; height: 0; border-top: solid 35px red; border-left: solid 30px transparent; border-right: solid 55px transparent; } p { font-size: x-large; word-spacing: 3px; color: white; letter-spacing: 2px; position: relative; } .PictureDiv { z-index: 50; width: 600px; height: 400px; background-color: cadetblue; margin-top: -3px; } .PictureTable{ width:600px; height:400px; border-collapse:collapse; } .PictureTable,th,td { border: 1px solid black; } .puzzle1 { background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-05-133958-f9449cea-129-650.JPG); width: 199px; height: 201px; background-position: -200px -100px; } .puzzle2 { background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-06-132109-835d4935-20161203-180733-650.jpg); width: 199px; height: 201px; background-position: -200px -100px; } .puzzle3 { background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-13-130604-e2d975b0-sposa-650.JPG); width: 199px; height: 200px; background-position: -200px -100px; } </style> <div class="container"> <table> <tr> <td> <div class="TitleDiv"> <p>Title To</p> </div> </td> </tr> <tr> <td> <div class="PictureDiv"> <table class="PictureTable"> <tr> <td style="width: 20%; height: 200px;"> <div class="puzzle1"> </div> </td> <td style="width: 20%"> <div class="puzzle2 "> </div> </td> <td style="width: 20%"> <div class="thumbnail puzzle3 "> </div> </td> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>af</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>aa</td> </tr> </table> </div> </td> </tr> </table> </div>
Output as below:
Best Regards
Cathy
Member
327 Points
1770 Posts
Title in a red background div with bottom arrow also background red and on the bottom list of pic...
Dec 17, 2016 08:30 AM|grafic.web|LINK
Hi, i am looking to achive in css the following :
I would love on the top a red box with inside a white title adn just on the center bottom of the div a kind of down arrow also in red backround
and after just above a list of div with backround pictures 3 x3 same size height an width (250 x 250)
also the picture are link and i was thinking to give a color on hover and put inside them a white title of the picture
how to achive?
Star
8670 Points
2882 Posts
Re: Title in a red background div with bottom arrow also background red and on the bottom list of...
Dec 19, 2016 08:06 AM|Cathy Zou|LINK
Hi, grafic.web
Based on your need, I make an sample.
Following code for your reference:
Output as below:
Best Regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.