I tried to put all boxes in same line and i did it but there is one problem,
look at the last box, its not in same line.
Can be done by adding one more text line to the last section but i want just 2 lines.
How to fix that?
body {
background: black;
}
.box-container {
margin-top: 0px;
text-align: center;
background: white;
white-space: nowrap;
}
.box {
display: inline-block;
background: green;
width: 250px;
height: 300px;
margin: 35px;
color: white;
white-space: normal;
}
.fa.rounded.big {
font-size: 3.5em;
}
.fa.rounded {
border-radius: 100%;
border: 1px solid white;
height: 150px;
line-height: 150px;
width: 150px;
}
.box-container section .fa.rounded {
margin-bottom: 30px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="box-container">
<section class="box"><i class="fa rounded fa-clock-o fa-5x"></i><br><a>This page is created with HTML, CSS and jQuery and beacuse of that, it should be fast.</a></section>
<section class="box"><i class="fa rounded fa-heart-o fa-5x"></i><br><a>Beacuse of bootstrap, UIkit, Animate.css, WOW.js this page is even more awesome!</a></section>
<section class="box"><i class="fa rounded fa-code fa-5x"></i><br><a>There is only 41 lines of code but there will be more things soon!</a></section>
</div>
</body>
There are 3 boxes,
make sure you see them all, look at the full page.
Add a
vertical-align: top;
CSS attribute to the last box. This should fix it.
Related
I'm seeing two buttons with no text in them on a page. The buttons do not appear in the code I wrote nor in the source code of the page.
When I check the console/use inspect element, I see two <button> tags with a space in between the opening tag and end tag.
I tried running it in JSFiddle instead and am getting the same thing so I doubt its on my end.
I'm confused as hell and would some appreciate help.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div>
<h1 class="title">Clicker Game</h1>
<h2 class="title">Level: 0</h2>
<h2 class="title">Skill Points: 0</h2>
</div>
<div>
<div id="skillsContainer">
<button id="strength" onclick="strength()"><p class="center"><strong>Strength</strong></p><button>
<button id="expandButton" onclick="expandSkills()"><p class="center"><strong>Expand</strong></p></button>
<button id="minion" onclick="minion()"><p class="center"><strong>Minion</strong></p><button>
</div>
<button id="xpButton" onclick="xpAdd()"><p class="center"><strong>Click Me!</strong></p></button>
</div>
</div>
</body>
</html>
CSS:
.title {
display: flex;
justify-content: center;
}
#xpButton {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-top: 100px;
margin-right: 15%;
cursor: pointer;
height: 150px;
width: 150px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
#xpButton:hover {
background-color: green;
color: white;
}
.flex {
display: flex;
}
#skillsContainer {
margin-left: 350px;
margin-top: 0px;
}
#strength {
height: 100px;
display: none;
margin-top: 175px;
cursor: pointer;
}
#minion {
height: 100px;
display: none;
margin-top: 175px;
cursor: pointer;
}
#expandButton {
height: 100;
display: flex;
cursor: pointer;
}
.center {
display: flex;
margin: auto;
}
Use a markup validator. Your HTML has many errors in it.
In particular, button elements are not allowed to contain paragraphs and the effect you see is the browser attempting to recover from that error.
So essentially, I've been stuck on this for a while, not exactly sure if this question is super obvious or not since I don't come from a frontend development background.
But essentially, I'm trying to design this thing that mimics the youtube live chat design (building an OBS plugin that integrates the youtube live chat API). A JsFiddle of the page can be seen here -> jsfiddle demo
Dont't mind the borders, I'm just using it to help me visualize the bounds of my divs. But my problem here is how do I get that text with the username and the comment to align directly next to the pfp image.
I've tried using float, flexboxs, inline properties, etc. And they don't seem to work, again Im not exactly sure if I'm using them properly since I am not a frontend web developer, my knowledge of css is simply through stack overflow and some google searches.
My ideal result is to aim as close to something like this:
.messageBox {
position: absolute;
width: 300px;
height: 500px;
border: 1px solid #d1d1d1;
overflow-y: auto;
}
.messageBox .header {
position: absolute;
width: 100%;
height: 50px;
border-bottom: 1px solid #d1d1d1;
}
.messageBox .header p {
position: absolute;
margin-left: 15px;
font-family: 'Roboto', sans-serif;
}
.messageBox .content {
width: 95%;
position: absolute;
top: 50px;
height: auto;
border: 1px solid green;
}
.messageBox .content .message {
margin: 10px;
border: 1px solid red;
font-family: 'Roboto', sans-serif;
font-size: small;
}
.messageBox .content .message .pfp {
width: 25px;
border-radius: 500px;
margin-right: 10px;
}
.messageBox .content .message .text{
margin-left: 15px;
}
.messageBox .content .message .text span{
color: #747474;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="messageBox">
<div class="header">
<p>Live Chat Replay</p>
</div>
<div class="content">
<div class="message">
<img class="pfp" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
<p class="text"><span>Michael Collins</span>Hello world, this is a test message</p>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>
So, you can achieve the same using floats, flex and grid.
I just edited your JSFiddle and have implemented a solution using flex. Check it here.
You may add some padding to give a better look to the box.
.message {
display: flex;
align-items: center;
}
.profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
}
please use flex with some margins for image and paragraph
.message {
display:flex
}
There is a strange effect with the css setting that has come with the latest chrome version.
Do you've an idea why the second box is below the first one (see image) ?
display: inline-block;
some help is welcomed.
If you want the boxes to anchor to the top you can use the CSS vertical-align: top property.
Here is the example,
Please view it in a full screen mode so that the boxes appear side by side.
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
vertical-align:top;
}
.ic3a-mini-box {
height: 100px;
margin: 15px;
padding: 20px;
background-color:#990033;
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
Actually its working fine as expected only, when it is coming below means when container width reduce by the screen why because you given width: 100%; to the parent and given fixed width to the child elements, still you want that side by side only give white-space: nowrap; to the parent element.
There is an another way too, you can you give display: table; to the parent element and for child's give display: table-cell;. It wont come down anymore
Displaying inline block does exactly as it says, if in your markup you have any spaces it will render these spaces as well (the white space - it is supposedly a bug - i see it as a bug as inline should butt up next to each other), example is what you have displayed. With the width of both of the boxes and the space next to them will result in the boxes breaking down.
There are a few ways to remove this:
<div>Element</div><!--
--><div>Element 2<div>
or you can do:
<div>Element</div><div>Element</div>
Will result in the blocks showing inline next to one another. Another way to combat this is to use a negative margin:
.class{
margin-left: -3px;
}
There is also the workaround of setting the parent element to:
font-size: 0;
or
white-space: nowrap;
I would recommend using flexbox on the parent element personally, as this will stop your line break from happening.
You can read more on this here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
}
.ic3a-mini-box {
height: 100px;
/* margin: 15px;*/
padding: 20px;
background-color:#990033
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
I just have removed margin:15px from ic3a-mini-box class.
You can check in browser and see you get the result as expected or not?
Hope this helps.
First of all, thank you for taking your time answering my maybe stupid question. I have a problem with my span not wanting to stay where mummy told him to stay.
HTML
<section class="row" id="white_background">
<div class='col-lg-6 col-md-6 col-sm-6 col-xs-12'>
<article class="news_post">
<span class='news_head'>
<h4>BLA BLA BLA BLA BLA BLA BLA</h4>
<p><?php echo $NewsItem->getValueEncoded( "summary" ) ?></p>
<p><?php echo $NewsItem->getValueEncoded( "uploadDate" ) ?></p>
</span>
</article>
</div>
</section>
Sass
#white_background {
background: $light;
height:100%;
padding: 20px;
text-align: center;
#inlcude clearfix;
h2 {
text-align: center;
color: $purple;
}
}
.news_post {
#include article_back (
'../img/picture_2.png');
padding: 20px;
margin-top: 30px;
margin-bottom: 50px;
}
.news_head {
max-width: 330px;
background-color: $purple;
padding: 6px 12px;
display: block;
color: $white;
margin: auto 50px auto 0px;
transform: translateY(120px);
text-align: left;
font-size: 12px;
h4 {
font-family: $heading;
font-size:13px;
}
}
Now it does this:
http://imgur.com/a/HQ46N
So it seems like the span does not see the div as a boundary.. any ideas?^^
EDIT: Sorry for making a slight mess here.
What I want to achieve is make the article-span overflow the article in a controlled way. Meaning: If I manually resize the window, the span should not go outside of the parent article.
The problem is that the sections I used, do not render the movement of the span properly and that is why the sections overlaps, like shown here: http://imgur.com/a/fZyux (Note: the left item in the purple box overflows the light grey edges of the article. It should stay inside this grey box.
The dealbreaker now is, when i resize the window to smaller window sizes, the span starts to move down, but i expected it to move to the edge of it's parten article or div.
The span does not get recognize that it sits in a div and does not get restricted by its boundaries. Why is that the case? It's super hard to explain but I tried.
Take a look at the full mockup to get an idea. http://imgur.com/a/5ZQn9
I hope this makes it more clear what i want to achieve^^
Use display flex;.
article {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
article span {
width: 30px;
height: 30px;
border: 1px solid green;
}
<article>
<span></span>
</article>
The sections overlap because using:
transform: translateY(120px);
makes the element behave like it was:
position: relative;
top: 120px;
The element has moved on the screen, but the rest of the layout renders as if it was still in the original place. To push the borders you can add margin-bottom to your span.
.container {
background-color: yellow;
height: auto;
}
.element-transformed {
display: block;
width: 50%;
height: 100px;
background-color: red;
transform: translateY(70px);
}
.element-positioned {
display: block;
width: 50%;
height: 100px;
background-color: red;
position: relative;
top: 70px;
}
.make-some-space {
height: 100px;
}
.element-transformed-with-margin {
display: block;
width: 50%;
height: 100px;
background-color: red;
transform: translateY(70px);
margin-bottom: 70px;
}
<div class="container">
<span class="element-transformed">
<p>transform: translateY(70px);</p>
</span>
</div>
<div class="container">
<span class="element-positioned">
<p>position: relative; top: 70px;</p>
</span>
</div>
<div class="make-some-space"></div>
<div class="container">
<span class="element-transformed-with-margin">
<p>transform: translateY(70px); margin-bottom: 70px;</p>
</span>
</div>
<div class="container">
<span class="element-positioned">
<p>position: relative; top: 70px;</p>
</span>
</div>
To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.
For whatever reason, my vertical-align: bottom; property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?
index.html
<body>
<div class="header">
<div class="container">
<div class="pull-left">
What's This?
</div>
<img src="http://placehold.it/75x75" />
<div class="pull-right">
About
</div>
</div>
</div>
<!-- Modules -->
<!-- Controllers -->
<!-- Services -->
</body>
main.css
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: #FF3B4E;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: white;
text-align: center;
height: 125px;
}
.header img {
margin: 25px 0;
}
.header .pull-left{
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
.header .pull-right {
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
The reason I have boxes around pull-left and pull-right is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!
jsfiddle: https://jsfiddle.net/rtc498uk/
EDIT: My goal is to get the text to align like this:
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}