I'm trying to build a facebook like Profile/Cover Layout, but i'm struggling with the correct layout.
What i have so far:
http://jsfiddle.net/kvEBF/
<div class="user_profile_cap">
<div class="user_profile_cover">
<img src="jpgfile" alt=""/>
</div>
<div class="user_profile_headline">
Pull Right Text
</div>
</div>
css
.user_profile_cap {
width: 970;
height: auto 9;
border: 1px solid #DDD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.user_profile_cover {
img {
width: 970px;
height: 115px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
.user_profile_headline {
padding: 10px;
font-size: 16px;
}
http://jsfiddle.net/kvEBF/
The Desired Layout
I'm struggling on placing the Profile Picture, the Page Title and the Right Text correctly in to this Layout.
Can somebody help me out ?
Like this
working demo
css
.user_profile_cap {
width: 970;
height: auto 13;
border: 1px solid #DDD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow:hidden;
}
.user_profile_cover {
img {
width: 970px;
height: 115px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
.user_profile_headline {
padding: 10px;
font-size: 16px;
}
.user_profile_headline img{
border:1px solid #EEEEEE;
width:124px;
height:124px;
float:left;
margin:-90px 10px 0 0;
position:relative;
z-index:111;
background-color:white;
}
.user_profile_headline h2{
margin:0;
padding:0;
font-size:12px;
font-weight:bold;
display:block;
}
.user_profile_headline span{
font-size:10px;
font-family:verdana;
color:gray;
}
Related
Goal:
Text above the picture and it should be centered and middle(First row is text and the next row is picture)
Problem:
I have tried using clear:both, display: block or similar but it doesn't work.
What code am I missing?
Thank you!
#parent {
display: flex;
}
#test1,
#test2{
border-top: 1px solid black;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
background: white;
width: 200px;
height: 200px;
padding:15px 15px 15px 15px;
flex: 1;
}
#test1 {
border-left: 1px solid black;
border-right: 1px solid black;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#test2 {
border-right: 1px solid black;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#test1:hover {
background-color:#DCDCDC;
}
#test1:visited {
text-decoration:none;
text-decoration: none;
text-decoration-color: none;
background-color:none;
color: none;
}
#test2:hover {
background-color:#DCDCDC;
}
<div id="parent">
<a href="#">
<div id="test1">
picture1
<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
</div>
</a>
<a href="#">
<div id="test2">
picture2
<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
</div>
</a>
</div>
I have the following button on my site:
http://jsfiddle.net/32u5x5uf/
I'd first like to move the span circle to be exactly in the center of the main button. I'd then like if I can somehow "merge" the two shapes together in CSS. So basically remove the top half of the circle and the main bar that cuts through the middle of the circle.
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
/* overides ... */
.full-circle {
border-radius: 0 0 30px 30px;
border-top: none;
height: 17px;
background: #FFF;
left: 50%;
margin-left: -17px;
bottom: -19px;
line-height: 0;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
The Answer above by Turnip is actually kind of a cheat with same
background-color
If that's not the case then you should go with this:
div {
background-color: #80C5A0;
width: 200px;
height: 100px;
border-radius: 50% / 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<div></div>
I have problem, I can't align two buttons in one line.
I tried to set padding of span class pptext2 but without success.
Here is code
http://jsfiddle.net/71782p4L/1/
HTML
<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->
CSS
.ppdiv{
padding-top:22px;
padding-left: 19px;
}
.ppdiv img{
padding:10px;
font-size: 20px;
}
.ppenvelope{
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.pptext{
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
}
.pptext2{
display: inline-block;
color:#4c6974;
padding-top: 15px;
padding-bottom:13px;
padding-left: 13px;
}
I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.
HTML:
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
</button>
<button class="pptext">PRIVATE MESSAGE</button>
</div>
CSS:
.ppdiv{
overflow: hidden;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img{
padding:10px;
}
.pptext{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}
Use vertical-align: middle; on both buttons.
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
https://jsfiddle.net/71782p4L/2/
Here you are.
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}
What I've done here is just make a box like the image below but how to fade a color and set
margin-left= 10px; margin-top: 5px for the title's box with CSS
Demo
HTML:
<div id="_div">
<span class="_top">Company Performance</span>
<span class="_content">Electric Consumption: 2300kW</span>
<div>
CSS:
#_div {
display: block;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
width: 300px;
height: 100px;
background-color: #FFFFFF;
box-shadow: 5px 5px 5px #e0e6e8;
border: 1px solid #c1dee0;
}
._top {
display: block;
background-color: #D0E3EC;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
padding-bottom: 10px;
border-bottom: 1px solid #c1dee0;
}
._content {
display: block;
margin-left: 10px;
margin-top: 10px;
}
Not clear why you want to use the margin
if you want to align the text use padding with _top class
Remove all the padding from _top class and add
padding: 5px 0 5px 10px;
To fade the color use opacity: .5
To solve my problems, I have used linear-gradient(#D0E3EC, #e9f2f6); and padding-left: 10px; padding-top: 5px;. To be more detail, please have a look on the code below.
Code:
._top {
display: block;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
padding-bottom: 10px;
border-bottom: 1px solid #c1dee0;
background-image:
linear-gradient(#D0E3EC, #e9f2f6);
padding-left: 10px;
padding-top: 5px;
}
Demo
I am struggling to create this "button" using CSS.
I also would like to be able to add the text "ABI" and "12/19" manually in my HTML so I can change it.
Attached the result I would like to have with the dimensions.
Thanks for your help.
I had fun creating it, it is not perfect and you will need some tweaking to get it exacly like the image but it should get you on the right path :
FIDDLE DEMO
html:
<div id="abi">ABI</div>
<div id="number">12/19</div>
CSS
div{
float:left;
height:60px;
line-height:60px;
font-size:20px;
margin:0;
padding:0;
}
#abi{
width:75px;
background:gray;
color:blue;
padding-left:25px;
position:relative;
z-index:2;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#abi:after{
content:"";
position:absolute;
right:-10px;
top: 19px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid gray;
}
#number{
width:155px;
text-align:right;
padding-right:25px;
background:blue;
color:gray;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
Something
LIKE THIS?
HTML
<div class='button'>ABI
<div>12/19</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.button, .button div {
color:grey;
background:#007bff;
display:inline-block;
line-height:60px;
font-size:20px;
}
.button div {
padding-right:25px;
padding-left:25px;
width:180px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
z-index:1;
text-align:left;
position:relative;
}
.button {
color:#007bff;
background:grey;
padding-left:25px;
width:280px;
text-align:right;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position:relative;
z-index:1;
}
.button div:after {
content:'';
display:block;
position:absolute;
left:0px;
top:20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 10px 14px;
border-color: transparent transparent transparent grey;
z-index:0;
}
Also did one for fun.. :)
Fiddle
CSS
.btn{
position: relative;
border-radius: 10px;
display: table;
font-size: 35px;
font-family: Verdana, sans-serif;
width: 280px;
height: 60px;
background: #2a2c2b;
}
.left{
position: relative;
padding-left: 25px;
color: #0ebfe9;
display: table-cell;
width: 100px;
vertical-align: middle;
}
.right{
color: #2a2c2b;
display: table-cell;
width: 180px;
vertical-align: middle;
padding-left: 14px;
padding-right: 25px;
}
.left:after
{
height: 0px;
content: '';
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2a2c2b;
position: absolute;
left:90px;
}
HTML
<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>
(background of btn are gradients, couldn't get them in the code here..)
Looked like fun, had to try it myself: http://jsfiddle.net/8SUX6/1/
Change href="#" to a link, to make it one or add a onclick event for it to execute JS.
ABI <span>12/19</span>
#button {
font-weight: 600;
height: 60px;
width: 60px; /* 60 + 25 + 15 = 100 */
display: block;
text-decoration: none;
background: #2A2C2B;
color: #0EBFE9;
position: absolute;
border-radius: 5px 0 0 5px;
font-family: Segoe UI;
font-size: 40px;
padding-left: 25px;
padding-right: 15px;
}
#button:before {
left: 93px;
top: 10px;
z-index: 3;
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid #2A2C2B;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#button span {
top: 0;
letter-spacing: 2px;
color: #2A2C2B;
position: absolute;
z-index: 2;
height: 60px;
width: 155px; /* 155 + 25 = 180px */
background: #0EBFE9;
position: absolute;
left: 100px;
border-radius: 0 5px 5px 0;
padding-right: 25px;
text-align: right;
}
The following can be the css
*{
margin:0;
padding:0;
}
div{
float:left;
margin-top:10px;
font-size:20px;
font-weight:bold;
text-align:center;
height:60px;
}
.abi{
margin-left:10px;
width:100px;
background:#2A2C2B;
color:#0EBFE9;
border-radius:10px 0 0 10px;
}
.abi>p,.num>p{
padding-top:15px;
}
.num{
color:#2A2C2B;
background:#0EBFE9;
margin-right:10px;
width:180px;
border-radius:0 10px 10px 0;
}
.abi:after{
border-bottom: 10px solid transparent;
border-left: 10px solid #2A2B2C;
border-top: 11px solid transparent;
content: "";
position: absolute;
left: 110px;
top: 29px;
}
the following is the html
<div class="abi"><p>ABI</p></div>
<div class="num"><p>12/19</p></div>