I'm trying to design a chat window with messages from the user on the right and messages from the other person on the left. At first, I tried doing this without floats and failed. Doing some research I found that this was usually done using floats. I rewrote it using floats but it still isn't working.
Update: Are floats the best solution for this type of design?
.user {
float: right;
background-color: deepskyblue;
margin-right: 20px;
font-size: 25px;
color: white;
}
.friend {
float: left;
background-color: orchid;
margin-left: 20px;
font-size: 25px;
color: white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div contenteditable="true" class="user clearfix">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend clearfix">
No I did not.
</div>
<div contenteditable="true" class="user clearfix">
Is it working?
</div>
<div contenteditable="true" class="friend clearfix">
NO :(
</div>
</body>
</html>
Is this? I removed ::after
.user {
float: right;
background-color: deepskyblue;
margin-right: 20px;
font-size: 25px;
color: white;
}
.friend {
float: left;
background-color: orchid;
margin-left: 20px;
font-size: 25px;
color: white;
}
.clearfix {
clear: both;
display: table;
margin:5px 0;
}
<div contenteditable="true" class="user clearfix">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend clearfix">
No I did not.
</div>
<div contenteditable="true" class="user clearfix">
Is it working?
</div>
<div contenteditable="true" class="friend clearfix">
NO :(
</div>
are floats best solution?
I think that's relative to the developer and situation. There is no 'wrong' way, if that's what you are asking. But there are ways that help you in the long run if you want to be flexible and add more features. Here is an example using flex properties:
body {
background-color: snow;
display: flex;
flex-flow: column nowrap;
}
body div {
font-size: 18px;
padding: 10px;
color: white;
border-radius: 5px;
}
.user {
background-color: deepskyblue;
align-self: flex-end;
}
.friend {
background-color: orchid;
align-self: flex-start;
}
<body>
<div contenteditable="true" class="user">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend">
No I did not.
</div>
<div contenteditable="true" class="user">
Is it working?
</div>
<div contenteditable="true" class="friend">
NO :(
</div>
</body>
Related
Currently putting CSS touches on a landing page. How do I get my p elements to align underneath my h2 elements? Like how I'd like it to look like:
Here’s what mine looks like:
And here’s the link to the CodePen.
Thanks in advance.
* {
font-family: Arial;
}
#media (max-width: 768px) {
* {
font-family: Tahoma;}
}
#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
background-color: white;
opacity: 0.8;
}
#header img {
height: 75px;
width: 75px;
margin-top: -10px;
}
#header h1 {
font-size: 23px;
margin-left: -20px;
}
#header nav {
margin-left: 730px;
margin-top: 15px;
}
#header a {
color: black;
text-decoration: none;
}
.nav-link {
margin-right: 10px;
}
#glove {
margin-top: 100px;
margin-left: 50px;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 100px;
width; 100px;
}
.description {
padding: 5px;
margin-top: -10px;
margin-bottom: 15px;
}
#features {
margin-top: 50px;
}
#features h2 {
text-align: center;
}
#features iframe{
display: block;
margin: 0 auto;
}
#pricing {
margin-top: 100px;
text-align: center;
border: 1px dashed black;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
#pricing h3 {
font-weight: normal;
}
#pricing p {
font-style: italic;
}
#close {
margin-top: 50px;
text-align: center;
font-size: 20px;
}
input[type=submit] {
background-color: #DBBC58;
border-radius: 6px;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id=header>
<img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
<h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
Why this glove?
Features
Pricing
</nav>
</div>
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
</div>
<div id="features">
<h2>In-Depth Look</h2>
<iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pricing">
<h2>Pricing</h2>
<h3>$49.99</h3>
<p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>
<div id="close">
<form id="form" action="https://www.freecodecamp.com/email-submit">
Take your bouts to the next level: <br>
<input id="email" type="email" placeholder="Email" name="email"><br>
<input id="submit" type="submit">
</form>
</div>
You needed an extra div around your h2s and ps to format them correctly inside of a flex parent. I simplified your CSS and HTML to the minimal correct example, also choosing to use classes instead of IDs for CSS selectors to remove duplicate styles:
* {
font-family: Arial;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 150px;
width: 150px;
}
.description {
padding: 10px;
}
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
could someone help me with an example how to accomplish following layout? Is tables the best for this?
https://gyazo.com/80a2f66d280c480c1e6e70637959b271
I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..
So basicly I need it centered but not text-align centered. Appreciate all the help I could get.
Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:
body {
font-family: Arial, sans-serif;
color: #444444;
}
.info {
border: 1px solid #bbbbbb;
border-width: 1px 0;
padding: 10px;
}
.row {
line-height: 30px;
padding: 10px;
}
.label {
display: inline-block;
width: 30%; /* You may want to adjust this property */
margin: 0 10px;
text-align: right;
font-size: 95%;
color: #888888;
}
button {
border: none;
background-color: #43CEAD;
border-radius: 3px;
padding: 4px 10px;
color: white;
font-size: 90%;
}
.right {
float: right;
}
<div class="info">
<div class="row">
<span class="label">Name:</span>
John Doe
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Password:</span>
********
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Animus Heart ID:</span>
B0 23459332
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">E-mail:</span>
john#doe.com
<button class="right">Edit</button>
</div>
</div>
Why tables? You can set div width in percent, isn't it?
.col--first {
width: 40%;
float: left;
text-align: right;
}
.col--second {
margin-left: 1%;
width: 59%;
float: left;
}
.col--second:after {
content: '';
display: table;
clear: both;
}
.right {
float: right;
}
<div>
<div class="col--first">Name:</div>
<div class="col--second">John
<button class="right">Edit</button>
</div>
<div class="col--first">Password:</div>
<div class="col--second">******
<button class="right">Edit</button>
</div>
</div>
Have a look at responsive tables:
.table {
display: table;
}
.table > .row {
display: table-row;
}
.table > .row > .cell {
display: table-cell;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second
</div>
<div class="cell">
Third
</div>
</div>
</div>
#img {
width: 100%;
margin: 0 auto;
}
Width can be changed to reflect the desired size of the image, but this will center the image based on the parent element's size by dividing the two margins equally on the left and right.
I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS.
It looks this way right now
Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this
As you can see it gets all messed up.
Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" autofocus />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
body{
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {
}
#input {
width: 10%;
padding: 1px;
margin: auto;
}
.global{
width: 18%;
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small{
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
}
#header {
text-align:left;
clear: both;
font-size: 22px;
}
ul
{
list-style-type: none;
}
.izq { float: left; }
.der { float: right; }
This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.
All that is required is a "clearfix" of which there are several.
body {
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {} #input {
width: 10%;
padding: 1px;
margin: auto;
}
.global {
width: 50%;
/* for this demo */
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small {
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
list-style-type: none;
overflow: hidden;
/* cleafix */
}
#header {
text-align: left;
clear: both;
font-size: 22px;
}
.izq {
float: left;
}
.der {
float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
</div>
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo