I'm trying to centralize colors (.attr-image-container) on div(.swat-container) but nothing works, so please can anybody help me?
i have tried putting margin:0px auto; in many places
My html:
<dd class="last">
<div class="input-box">
<div class="settings-swatch-container">
<div class="swat-container">
<div class="attr-image-container">
<div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div>
</div>
</div>
</div>
</div>
Mycss
.swat-container{
width:100%;
height:100%;
margin:auto;
}
.attr-image
{
width: 30px;
height: 30px;
padding: 1px;
margin-right: 5px;
cursor:pointer;
border: 2px solid #00BFFF;
}
.main-swatch-container
{
width: 100%;
clear: both;
margin:auto;
}
.attr-image-container
{
float:left;
position:relative;
text-align: center;
}
Use a flex...
dd {
padding: 0;
margin: 0;
}
.swat-container {
width: 100%;
height: 100%;
margin: auto;
display: flex;
justify-content: center;
}
.attr-image {
width: 30px;
height: 30px;
padding: 1px;
margin-right: 5px;
cursor: pointer;
border: 2px solid #00BFFF;
}
.main-swatch-container {
width: 100%;
margin: auto;
}
.attr-image-container {
position: relative;
text-align: center;
}
<dd class="last">
<div class="input-box">
<div class="settings-swatch-container">
<div class="swat-container">
<div class="attr-image-container">
<div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div>
</div>
<div class="attr-image-container">
<div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div>
</div>
</div>
</div>
</div>
</dd>
Related
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
Vue chat application
I'm creating this chat app like a little project, but I can't make the messages align properly. The messages sent by the user (light blue) should be on the right side, the CSS looks like:
.received {
text-align: left;
background-color: #0A2472;
margin: 1%;
color: white;
padding: 1%;
max-width: fit-content;
}
.sent {
text-align: right;
align-content: right;
background-color: #A6E1FA;
margin: 1%;
padding: 1%;
max-width: fit-content;
}
It looks fine, until "max-width: fit-content" is added to the style.
Any solutions or other approaches?
The main problem is that your messages are only as wide as their text, so the alignment doesn't matter.
I made a container to hold them. I like CSS Grid for laying out almost everything. The chat messages are just rows in the grid, some justified left and some right.
.chatboard {
display: grid;
width: 100%;
grid-gap: 0.6rem;
max-width: 40rem;
}
.sent,
.received {
padding: 1%;
min-width: 20rem;
border-radius: 0.6rem;
}
.received {
justify-self: left;
background-color: #0A2472;
color: white;
}
.sent {
text-align: right;
justify-self: right;
align-content: right;
background-color: #A6E1FA;
}
<div class="chatboard">
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
<div class="received">Hi there</div>
<div class="sent">Hello there</div>
</div>
I have an example of how you can achieve this. I will paste the code below. Look in the css for the specific style you want. It looks like the style rules would be the style modifying the <p> tag in the example the specific css rules modifying it are
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
here is the html
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"
</head>
<body>
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
<div class="srch_bar">
<div class="stylish-input-group">
<input type="text" class="search-bar" placeholder="Search" >
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span> </div>
</div>
</div>
<div class="inbox_chat">
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
<div class="chat_list">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
astrology under one roof.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mesgs">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test, which is a new approach to have</p>
<span class="time_date"> 11:01 AM | Yesterday</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Apollo University, Delhi, India Test</p>
<span class="time_date"> 11:01 AM | Today</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>We work directly with our designers and suppliers,
and sell direct to you, which means quality, exclusive
products, at a price anyone can afford.</p>
<span class="time_date"> 11:01 AM | Today</span></div>
</div>
</div>
</div>
<div class="type_msg">
<div class="input_msg_write">
<input type="text" class="write_msg" placeholder="Type a message" />
<button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<p class="text-center top_spac"> Design by <a target="_blank" href="#">Sunil Rajput</a></p>
here is the css
.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
background: #f8f8f8 none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}
.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
float: left;
width: 11%;
}
.chat_ib {
float: left;
padding: 0 0 0 15px;
width: 88%;
}
.chat_people{ overflow:hidden; clear:both;}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}
.active_chat{ background:#ebebeb;}
.incoming_msg_img {
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 60%;
}
.sent_msg p {
background: #05728f none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#fff;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
height: 516px;
overflow-y: auto;
}
I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?
Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/
You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>
I'm struggling trying to align both vertically and horizontally what should be a CSS keyboard.
I believe I got horizontal aligning right (by specifying width and margin:auto) but I can't understand how to align that vertically.
HTML:
<body>
<div class="maindocu">
<div class="keyboard">
<div class="first_row">
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
</div>
<div class="second_row">
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
</div>
<div class="third_row">
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
</div>
</div>
</div>
</body>
CSS:
a.maindocu{
min-height: 100%;
}
.keyboard{
display: block;
border-spacing: 5px;
margin: auto;
position: relative;
vertical-align: middle;
}
.first_row{
display: block;
margin: auto;
width: 550px;
}
.second_row{
display: block;
margin: auto;
width: 490px;
}
.third_row{
display: block;
margin: auto;
width: 440px;
}
.key{
display: table-cell;
width: 50px;
height: 50px;
border-spacing: 5px;
text-align: center;
vertical-align: middle;
font-family: "Verdana";
font-size: 100%;
color: #ffffff;
background: #000;
border: 5px solid #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
JSFiddle: http://jsfiddle.net/fb58bpgj/
I have already read a few tutorials and tips and tricks but I can't figure this out. Any advice?
Thanks in advance!