Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
Related
I am trying to build a simple page where I was wondering how do I make the circle with the paragraph comes on top of the rectangle so that the rectangle and the text will appear in the front(on the top)? thank you so much for your help,
.dot {
height: 200px;
width: 200px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
margin-bottom: -5rem;
}
.rectangle {
height: 200px;
width: 850px;
background-color: #555;
}
.rectangle-vertical-1 {
height: 180px;
width: 120px;
background-color: lightgrey;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-2 {
height: 180px;
width: 120px;
background-color: #a3a3a3;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-3 {
height: 180px;
width: 120px;
background-color: #4d4c4c;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-container {
position: relative;
margin-top: -9rem;
"}
<div class="container">
<div style="position: relative;">
<div style="text-align:center">
<div class="dot">
<h4>Melrose</h4>
<p>abc</p>
</div>
<div>
<div style="text-align:center">
<div class="rectangle">
<img class="img" src="https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg" alt=""> </div>
<div class="rectangle-vertical-container">
<span class="rectangle-vertical-1"></span>
</div>
</div>
</div>
</div>
I want to add text at bottom right corner inside card element. The text which I want to enter is Innings and Average. I have created flex-box but text such as innings and average is not getting displayed in bottom right corner.
Code:
.playercard1 {
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
}
.item {
padding-left: 10px;
}
.info {
margin-top: 25px;
}
<div class="playercard1">
<img class="profilepic" src="./profile.jpg">
<div class="item">
<div class="info">
<h6>Naman Kohli, Team Name, Right-Hand bat</h6>
<h2 className="cardtitle1">150</h2>
<p>Innings:5</p>
<p>Average:40.67</p>
</div>
</div>
</div>
In my screenshot you can see the innings and average is not getting displayed at bottom right corner. Check screenshot below:
What I am trying to achieve see in below screenshot I want to display innings and average at bottom right corner like the one in below screenshot.
Here is my solution, its not perfect, but it will give you a starting point
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
}
.item {
padding-left: 10px;
flex:1;
}
.info {
margin-top: 25px;
}
.flex{
display:flex;
justify-content:space-between;
}
.cardtitle1{
font-size:24px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/100x100">
<div class="item">
<div class="info">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="flex">
<div class="cardtitle1">150</div>
<div>
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
</div>
</div>
</div>
</div>
With position:absolute
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
position: relative;
}
.item {
padding-left: 10px;
flex: 1;
}
.info {
margin-top: 25px;
}
.flex {
display: flex;
justify-content: space-between;
}
.cardtitle1 {
font-size: 30px;
margin-top:25px;
}
.absolute {
position: absolute;
bottom: 10px;
right: 15px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/80x80">
<div class="absolute">
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
<div class="item">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="cardtitle1">150</div>
</div>
</div>
.playerCard{
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
padding: 15px;
}
.playerCard .player_profile_pic{
display: inline-block;
vertical-align: top;
border-radius:50px;
}
.playerCard .player_profile_pic img{
border-radius: 100%;
width: 100px;
height: 100px;
}
.playerCard .player_details_div{
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 15px;
width: calc(100% - 30px);
}
.player_details_div .player_name_det{
font-size: 16px;
}
.player_details_div .rank_ings_main_div{
width: 100%;
}
.rank_ings_main_div .number_div{
font-size: 30px;
text-align: left ;
float: left;;
}
.rank_ings_main_div .avg_ings_div{
float: right;
text-align: right;
}
.avg_ings_div p{
margin: 5px 0;
}
<div class="playerCard">
<div class="player_profile_pic">
<img src="https://i.stack.imgur.com/l60Hf.png" alt="">
</div>
<div class="player_details_div">
<div class="player_name_det">
Naman Kohli , Team Name, Right Hand Bat
</div>
<div class="rank_ings_main_div">
<div class="number_div">150</div>
<div class="avg_ings_div">
<p>Innings : 3</p>
<p>Average : 50.00</p>
</div>
</div>
</div>
</div>
I guess you need something like this.
Hope this helps.
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>