I'm having an issue with some CSS I'm working on. The expected content is to be a containing box with four rounded corners that everything falls into. It works in Safari on the Mac, but not in Chrome or in iOS. In those browsers, the corners are squared for the .posttype and the image. I can't seem to figure out what is causing the issue. Any help will be great.
CSS:
.row { margin-bottom: 50px; }
.box { background: #eee; }
.shadow { -moz-box-shadow: 0px 3px 3px 0px #666; -webkit-box-shadow: 0px 3px 3px 0px #666; box-shadow: 0px 3px 3px 0px #666; }
.rounded { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: block; overflow: hidden; }
.posttype {
float: right;
position: relative;
width: 150px;
height: 150px;
text-transform: uppercase;
margin: -85px -85px 4px 4px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform:rotate(45deg);
overflow: hidden;
}
.posttype > p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 24px;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #fff;
opacity: 0.3;
}
.meta {
width: 110%;
margin: 5px -8px -8px -8px;
padding: 5px;
background-color: rgba(255,255,255,0.8);
box-shadow: inset -5px 1px 5px #555;
font-size: 10pt;
color: #555;
}
.photo { position: relative; }
.photo > p { padding: 0 8px; }
.photo > .meta { padding-left: 16px; padding-bottom: 16px; }
.photo > img, .photo > a > img { width: 100%; margin-bottom: 10px; }
.photo > .posttype { position: absolute; top: 0; right: 0; margin: -75px -75px 4px 4px; }
HTML:
<div class="row">
<div class="span7 box rounded shadow photo">
<img src="photo.jpg" alt="Alt" width="500">
<div class="posttype"><p>photo</p></div>
<p>This is a great picture.</p>
<hr class="clear">
<div class="meta">
<ul>
<li class="date"><i class="icon-time"></i> 7/29/12</li>
<li class="comments"><i class="icon-comment"></i> 3 Comments</li>
</ul>
<hr class="spacer">
<ul class="tags">
<li class="tags"><i class="icon-tags"></i></li>
<li class="tag">Tag1</li>
<li class="tag">Tag2</li>
</ul>
</div>
</div>
</div>
Live demo: Tinkerbin
The round borders are behind the image, add a padding-top look at this http://tinkerbin.com/fLyD5Cuf
Related
I am attempting to create a stack of cards in a list, so that the cards can be swapped position-wise and organized.
However, while the ordering is not working either, right now I'm facing the problem of text from the card below showing up above the top-most card:
This is the code I have so far, for both the HTML and the CSS:
.catCards {
justify-content: space-between;
margin: 5px;
text-align: center;
z-index: 1;
margin-top: 256px;
}
.cwColumnCard {
margin-top: -190px;
}
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
}
.cwCTitle {
padding: 3px;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 18px;
z-index: 1;
}
.cwImage {
margin: 0 auto;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin-top: 5px;
z-index: 1;
}
.cwValue {
width: 100%;
text-align: center;
padding: 4px;
padding-bottom: 5px;
padding-top: 5px;
z-index: 1;
}
.cwSystemLabel {
width: 100%;
text-align: center;
padding-bottom: 4px;
padding-top: 4px;
z-index: 1;
}
<div class="catCards">
<ul>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card One</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card Two</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
</ul>
</div>
Z-Index was a brief attempt to fix the text positioning, but had no effect on it. What is causing the text to show up in this manner? The card below should be hidden once it's covered.
For the z-index property to work correctly you need to set the position property to something other than static.
In this case adding position: relative; to .cwCard will solve your issue.
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
position: relative;
}
I have to create the chat application textbox as a below attached image, I have tried but I cannot create the textbox as it was there presented.
.leftpanel-messages {
background-color: #FFFFFF;
padding: 5px 5px 0px 5px;
float: left;
}
.leftpanel-messages ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftpanel-messages ul li {
display:inline-block;
clear: both;
padding: 5px 15px 5px 10px;
border-radius: 10px;
border-bottom-right-radius: 0;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
position: relative;
}
.him {
background: transparent;
border:1px solid #eee;
float: left;
}
.him > p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
<div class="" style="padding:15px 10px 0 10px;">
<ul>
<li class="him">
<p>Text message send by him</p>
<div></div>
</li>
</ul>
</div>
</div>
Can anyone help me to append the right corner at the end of the textbox?
Using :before and :after
.leftpanel-messages {
background-color: #FFFFFF;
padding: 5px 5px 0px 5px;
float: left;
}
.leftpanel-messages ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftpanel-messages ul li {
display:inline-block;
clear: both;
padding: 5px 15px 5px 10px;
border-radius: 10px;
border-bottom-right-radius: 0;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
position: relative;
}
.him {
background: transparent;
border:1px solid #eee;
float: left;
position: relative;
}
.him > p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
.me {
float: right;
background: #0084ff;
color: #fff;
}
.him:before {
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0 0 13px;
border-color: transparent transparent transparent #eee;
position: absolute;
content: '';
bottom: -1px;
right: -12px;
transform: scale(0.7, 1);
}
.him:after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 0 12px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
content: '';
bottom: 0;
right: -10px;
transform: scale(0.7, 1);
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
<div class="" style="padding:15px 10px 0 10px;">
<ul>
<li class="him">
<p>Text message send by him</p>
<div></div>
</li>
</ul>
</div>
</div>
Or you can just use only one pseudo-element :before with background-image with a little triangle.
Can someone help me with fitting triangle with block element? How remove that unnecessary new line above, when designate menu element with a pointer?
Can someone help me with fitting triangle with block element? How remove that unnecessary new line above, when designate menu element with a pointer?
code
https://jsfiddle.net/fxdruwxf/
body{
width: 400px;
margin:0 auto;
}
#navtable{
position: relative;
width: 238px;
height: 900px;
border-radius: 6px;
border: 1px solid grey;
background: white;
}
.elem{
color: dodgerblue;
font-weight: bold;
padding: 10px 0px;
}
.elem:last-child{
line-height: 18px;
font-size: 10px
}
.elem:hover{
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.elem:hover .tr {
height:40px;
width:40px;
overflow:hidden;
transform:scale(1,1.2);/* increase visual height */
position: relative;
left: -40px;
bottom: -30px;
}
.tr::before{
float: left;
content:"";
width:70%;
height:70%;
float:right;
background:#C20009;
transform:rotate(-45deg);
box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3);
transform-origin: top right;
border-radius : 8px 0 0 0 /* and the rounded corner to finish */
}
<div id="navtable">
<br>
<div class="elem"><div class="tr"></div>Polecamy</div>
<div class="elem"><div class="tr"></div>Promocja</div>
<div class="elem"><div class="tr"></div>Nowości</div>
<div class="elem"><div class="tr"></div>Wypróbuj</div>
<br>
<div class="elem"><div class="tr"></div>Wszystkie</div>
</div>
Consider making your tr class absolutely positioned and your containing elem elements relatively positioned :
.elem:hover{
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
/* This will cause any child elements to be positioned relative to it */
position: relative;
}
.elem:hover .tr {
height:40px;
width:40px;
overflow:hidden;
transform:scale(1,1.2);/* increase visual height */
/* This will be positioned absolutely to it's container (which is relative) */
position: absolute;
left: -40px;
/* Since this is absolutely positioned, you'll want it to appear at the top */
top: 0px;
}
This should give you roughly the effect that you are looking for as seen in the example below.
Example
body {
width: 400px;
margin: 0 auto;
}
#navtable {
position: relative;
width: 238px;
height: 900px;
border-radius: 6px;
border: 1px solid grey;
background: white;
}
.elem {
color: dodgerblue;
font-weight: bold;
padding: 10px 0px;
}
.elem:last-child {
line-height: 18px;
font-size: 10px
}
.elem:hover {
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
}
.elem:hover .tr {
height: 40px;
width: 40px;
overflow: hidden;
transform: scale(1, 1.2);
/* increase visual height */
position: absolute;
left: -40px;
top: 0px;
}
.tr::before {
float: left;
content: "";
width: 70%;
height: 70%;
float: right;
background: #C20009;
transform: rotate(-45deg);
box-shadow: 0 0 1px, inset 0 1px 1px, inset 5px -5px 5px rgba(0, 0, 0, 0.3);
transform-origin: top right;
border-radius: 8px 0 0 0
/* and the rounded corner to finish */
}
<div id="navtable">
<br>
<div class="elem">
<div class="tr"></div>Polecamy</div>
<div class="elem">
<div class="tr"></div>Promocja</div>
<div class="elem">
<div class="tr"></div>Nowości</div>
<div class="elem">
<div class="tr"></div>Wypróbuj</div>
<br>
<div class="elem">
<div class="tr"></div>Wszystkie</div>
</div>
Hello ...
How could Make link wraps with the end of the cell ?
because if the text contains links turn to a new line as shown in the picture,
So - If the div is 400px x 300px. If text enters more than 400px then the text take new line put not just the link.
like
i need it in css.
thnx ,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
#menu {
padding: 10px;
margin: 5px 5px 5px 5px;
}
#menu a {
width: 140px;
}
#menu ul {
white-space: wrap;
list-style-type: none;
}
#menu li {
white-space: wrap;
float: right;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
white-space: wrap;
position: absolute;
left: -10px;
z-index: 90;
display:none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
position:relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color:#fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body{border-top:1px solid #D1D8E7;color:#808080;}
.egg_Message{font-size:13px !important;font-weight:normal;overflow:hidden}
h3{font-size:13px;color:#333;margin:0;padding:0}
.comment_ui
{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;padding:6px 4px 3px 6px;width:331px; cursor:pointer;
}
.comment_ui:hover{
white-space: wrap;
background-color: #F7F7F7;
padding: 10px;
margin: 5px 5px 5px 5px;
}
.dddd
{
white-space: wrap;
padding: 10px;
margin: 5px 5px 5px 5px;
background-color:#f2f2f2;border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;margin-bottom:2px;padding:6px 4px 3px 6px;width:431px;
}
.comment_text{padding:2px 0 4px; color:#333333}
.comment_actual_text{display:inline;padding-left:.4em}
ol {
list-style:none;
margin:0 auto;
width:500px;
margin-top: 20px;
}
#mes{
white-space: wrap;
padding: 0px 3px;
border-radius: 2px 2px 2px 2px;
background-color: rgb(240, 61, 37);
font-size: 9px;
font-weight: bold;
color: #fff;
top: -5px;
left: -73px;
}
.toppointer{
background-image:url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 354px;
}
</style>
<div id="menu">
<ul>
<li>
<a href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer"><img src="alert/top.png" /></div>
<div id="view_comments $id"></div>
<div id="two_comments $id">
<div class="comment_ui">
<div class="comment_text">
<div class="comment_actual_text">
$all
</div></div></div></div>
<div class="bbbbbbb" id="view $id">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
View all $comment_count comments
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
I may not be reading the question correctly, but if you want the links to sit on their own line, you can just set them to display: block;. E.g.
li a {display: block;}
I am making top navigation with CSS. Some of the buttons are floated to the left, and some of them to the right. There is empty gap-button in-between. How to make that gap auto-expandable so the whole top navigation takes 100% of the page?
Here is a link for an example image:
HTML:
<div class="row clearfix">
<div class="top_nav">
<ul>
<li>
<div class="ui-nav-button first">
<a class="button first" href="#"><i class="icon-home"></i></a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">About</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">Contact</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button empty">.</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
</div>
</li>
<li>
<div class="ui-nav-button last">
<a class="button logout last" href="#"><i class="icon-off"></i></a>
</div>
</li>
</ul>
</div>
</div>
CSS:
/* Clear fix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.top_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.top_nav ul li {
display: inline;
}
div[class*="ui"] {
vertical-align: top;
display: -moz-inline-stack;
float: left;
position: relative;
height: 44px;
margin-bottom: 3px;
background-color: #444444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
*display: inline;
}
.top_nav a.button, .top_nav div[class*="ui"] {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.button {
float: left;
position: relative;
bottom: 3px;
height: 28px;
line-height: 32px;
padding: 8px 30px;
background-color: #f7f7f7;
text-decoration: none;
letter-spacing: 0.1em;
color: #777777;
font-weight: bold;
border-left: 1px solid #cecece;
font-family: sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.input:focus {
outline: none;
border-color: #9d9d9d;
}
.button i {
position: relative;
line-height: 23px;
top: 1px;
}
.dropdown_nav {
display: none;
}
/* Set your empty space with */
.button.empty {
width: auto;
text-indent: -9999px;
}
.button.dropdown i {
margin-left: 15px;
margin-right: -15px;
}
.button.first, div[class*="ui"].first {
border: 0px;
-webkit-border-top-left-radius: 3px !important;
-webkit-border-bottom-left-radius: 3px !important;
-moz-border-radius-topleft: 3px !important;
-moz-border-radius-bottomleft: 3px !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
.button.last, div[class*="ui"].last {
-webkit-border-top-right-radius: 3px !important;
-webkit-border-bottom-right-radius: 3px !important;
-moz-border-radius-topright: 3px !important;
-moz-border-radius-bottomright: 3px !important;
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
.button.first, .button.last {
padding: 8px 15px;
}
.button[href]:hover {
bottom: 4px;
-webkit-transition-property: top, bottom;
-moz-transition-property: top, bottom;
-o-transition-property: top, bottom;
-ms-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-ms-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.button[href]:active {
bottom: 0px;
}
.button i {
font-size: 19px;
}
CSS/HTML link: http://jsfiddle.net/xRCqx/.
Here's the clean code.
HTML:
<div class="row clearfix">
<div class="top_nav">
<ul>
<li>
<div class="ui-nav-button">
<a class="button" href="#">About</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button" href="#">Contact</a>
</div>
</li>
<li>
<div class="ui-nav-button">
<a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
</div>
</li>
</ul>
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.top_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.top_nav ul li {
display: inline;
}
div[class*="ui"] {
vertical-align: top;
display: -moz-inline-stack;
float: left;
position: relative;
height: 44px;
margin-bottom: 3px;
background-color: #444444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
zoom: 1;
*display: inline;
}
.top_nav a.button, .top_nav div[class*="ui"] {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.button {
float: left;
position: relative;
bottom: 3px;
height: 28px;
line-height: 32px;
padding: 8px 30px;
background-color: #f7f7f7;
text-decoration: none;
letter-spacing: 0.1em;
color: #777777;
font-weight: bold;
border-left: 1px solid #cecece;
font-family: sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.input:focus {
outline: none;
border-color: #9d9d9d;
}
.button i {
position: relative;
line-height: 23px;
top: 1px;
}
.dropdown_nav {
display: none;
}
/* Set your empty space with */
.button.empty {
width: auto;
text-indent: -9999px;
}
.button.dropdown i {
margin-left: 15px;
margin-right: -15px;
}
.button.first, div[class*="ui"].first {
border: 0px;
-webkit-border-top-left-radius: 3px !important;
-webkit-border-bottom-left-radius: 3px !important;
-moz-border-radius-topleft: 3px !important;
-moz-border-radius-bottomleft: 3px !important;
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
}
.button.last, div[class*="ui"].last {
-webkit-border-top-right-radius: 3px !important;
-webkit-border-bottom-right-radius: 3px !important;
-moz-border-radius-topright: 3px !important;
-moz-border-radius-bottomright: 3px !important;
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
.button.first, .button.last {
padding: 8px 15px;
}
.button[href]:hover {
bottom: 4px;
-webkit-transition-property: top, bottom;
-moz-transition-property: top, bottom;
-o-transition-property: top, bottom;
-ms-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: 0.05s;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-ms-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.button[href]:active {
bottom: 0px;
}
.button i {
font-size: 19px;
}