I am not able to move my p tag. I tried padding but its not working.
Here is the code. You can find the p tag inside the div of the P1 class.
* {
box-sizing: border-box;
}
body {
background-color: #FFB7C5;
margin: 0;
}
.top-heading {
height: 70px;
font-family: 'Bebas Neue', cursive;
padding: auto;
margin: auto;
width: 30%;
font-size: 2rem
}
.top-heading h1 {
text-align: center;
}
.container {
border: 1px solid black;
margin-top: 10%;
height: 28rem;
}
.P1 {
border: 1px solid green;
margin-left: 10%;
height: 80%;
width: 30%;
}
.P1 p {
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 2rem;
padding-right: 100px;
}
.P2 {
border: 1px solid green;
margin-top: -27.3%;
margin-left: 60%;
height: 80%;
width: 30%;
}
.dice {
/* border:1px solid red; */
border-radius: 20px;
height: 65%;
width: 65%;
margin: 50px auto;
background-color: #09585d;
}
.circle {
display: inline-block;
border-radius: 50%;
background-color: honeydew;
height: 20%;
width: 20%;
margin: 30px 50px;
}
.c2 {
float: right;
margin-top: -80px;
}
.c3 {
margin-top: -15px;
}
.c4 {
float: right;
margin-top: -79px;
}
.c5 {
margin-top: -13px;
}
.c6 {
float: right;
margin-top: -81px;
}
.P2 p {
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 2rem;
padding-right: 100px;
}
.p2c2 {
float: right;
margin-top: -218px;
}
.p2c4 {
float: right;
margin-top: -149px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<!-- STYLESHEET -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-heading">
<h1>Refresh Me</h1>
</div>
<div class="container">
<div class="P1">
<p>Player 1</p>
<div class="dice">
<div class="circle"></div>
<div class="circle c2"></div>
<div class="circle c3"></div>
<div class="circle c4"></div>
<div class="circle c5"></div>
<div class="circle c6"></div>
</div>
</div>
<div class="P2">
<p>Player 2</p>
<div class="dice">
<div class="circle"></div>
<div class="circle p2c2"></div>
<div class="circle c3"></div>
<div class="circle p2c4"></div>
<div class="circle c5"></div>
<div class="circle c6"></div>
</div>
</div>
</div>
</body>
</html>
In the snippet above, you can see the properties of the p tag.
Even though I added padding-right but it's still not moving.
You are using padding-right and the p tag get padding from the right side!
and your P1 class has 30% width and you cant see the padding from right side. If you give it padding-right 1000px Or less width of P1 class you can see the change
But I think you want to padding it from the left side :) so you should use padding-left
Related
I want the style of this page of mine to be justified in the center but it doesn't work.
Especially for the converter tab I want each element to have its own line and must be centered inside the div container.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried the display block and in-line block but the element inside the container is not moving.
i think the container class is the implemented one because he is the in the general div that contain the "converter-tab" div , and the reason of not-centered elements is the padding and margin css classes.
try to remove it or replace it by this one :
.container {
margin: auto;
}
What you really have to do in this case is to assign a property text-align: center
to your .converter-tab class and moreover you have to wrap your h2, input and button individually inside a separate div for each one.
You can check my working snippet below:
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
text-align: center;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<div><h2>Metric/Imperial Unit Conversion</h2></div>
<div><input type="text" id="input-el" class="converter-input" /></div>
<div><button class="converter-btn" id="convert-btn">Convert</button></div>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I've annotated your css below. I've made your input div children block level elements so they appear on their own line. I've then added margin: auto to them to make them centered. I've aligned text to the center using text-align: center;
Alignment is always a PITA (much less so these days) but there's a handy tool to use to help you: howtocenterincss.com
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-tab > * {
display: block; /* make each item a block element so it appears on its own line */
text-align: center; /* make text (e.g. inside <p> tags) centered */
margin-inline: auto; /* make block level elements centered */
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
margin-bottom: 0.5rem; /*just added this to neaten it up a smidge */
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
text-align: center; /* center the text in your output div */
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
As it's acceptably supported all over major browsers I'd use flex: just change the display mode of your container div to flex, set flex-direction: column; and justify-content: center;. After this adjust top and bottom padding as you prefer.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<!--Font Link-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!--CSS-->
<link href="SQIStyle.css" rel="stylesheet" type="text/css">
<title>Solarquake Studios</title>
<!--favicon-->
<link rel="icon" type="image/ico" sizes="128x128" href="Logo.ico"/>
<style>
</style>
</head>
<h1>SolarQuake Studios</h1>
<header>
<img src="Logo.ico" alt="logo" width="80" height="80">
</header>
<body>
<div class="container">
<div class="left-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Games</u></h3>
<p>Upcoming Projects</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="center-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Esports</u></h3>
<p>The Hog Pen</p>
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Assets</u></h3>
<p>Game Art & Designs</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© All Rights Reserved.
<p class ="secondary">Follow Us!</p>
<a href="https://www.youtube.com/channel/UChQzAj3OlDO3sqZl7frbY7g"><img src="YTLogo.png"
width="70"
height="70"
alt="logo"></a>
<a href="https://twitter.com/SQdevelopers"><img src="Twitterlogo.png"
width="64"
height="64"
alt="logo"></a>
</div>
</body>
</html>
The sidebar on the left wasn't intended to be here, I've played with container for these columns and the scroll-Div, scroll-BG, and scroll-object classes and haven't gotten anywhere. This is all my css code so far. Thanks in advance.
h1 {
font-size: 40px;
line-height: 62px;
font-family: 'Press Start 2P', cursive;
text-align: center;
color: yellow;
}
h2 {
font-size: 40px;
color: white;
font-family: 'Press Start 2P', cursive;
}
h3 {
color: white;
}
header {
text-align: center;
padding-bottom: 10px;
}
.container div {
box-sizing: border-box;
min-height: 250px;
margin-left: 6.5%;
}
.left-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.right-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.center-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.footer {
clear: both;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
color: yellow;
font-size: 7px;
}
body {
font-size: 20px;
font-family: 'Press Start 2P', cursive;
background-color: white;
background-image: url("Space.png");
}
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
.scroll-div {
background: rgb(0, 0, 0);
height: 400px;
overflow: hidden;
overflow-y: scroll;
text-align: center;
}
.scroll-object {
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
text-align: center;
}
I tried to remove the sidebar on the left, Its yellow. I cant find in my code where its coming from.enter image description here
The yellow sidebar is there because you have a div with a class="scroll-bg"
So, remove the scroll-bg section from your css and its reference from your html.
### Remove ####
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
Working example - https://jsbin.com/wubuqolumo/edit?html,css,output
what a mess.
You are pushing every div from left by giving it a margin of 6.5%.
Change .container div(means every div inside container will have a 6.5% marging from left) to .container and remove margin. And add left right margin in every col class.
After quite a bit of googling and searching around on here I haven't been able to find a solution to my problem. I am not able to display the trashcan icons the way I need them to be displayed. The paragraphs in the html body are inserted dynamically and can have varying heights so I want to display and align the trash can icons to the top of each of the adjacent paragraphs. How can I do this using css/html? See below for current behavior.
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
If you need to save the current html structure, then you can solve this problem using the css properties display: grid and display: contents. It's not the best solution, but it works. Example below:
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
/*
!!! below are the new CSS changes !!!
*/
div#output-container {
display: grid;
grid-auto-flow: column;
}
div.text {
display: contents;
}
div.text:nth-child(1) > * {
grid-column: 1;
}
div.text:nth-child(2) > * {
grid-column: 2;
}
div.text:nth-child(3) > * {
grid-column: 3;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
Nevertheless, I still recommend reviewing your html structure, for tabular (display: table) or grid-based (display: grid),
You may have a strong reason for the HTML structure you are employing. However, I think that it is difficult to achieve the desired result using that structure. A simple solution would be to adjust your structure and make it easy to align items.
.container{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.header{
display: flex;
gap: 10px;
}
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
</body>
</html>
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp