I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Related
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'm trying to recreate FreeCodeCamp's Product Landing Page as a personal project.
For the content below the Get Started button and above the video, I used a grid to try to align them properly. However, I'm having trouble aligning the text (the heads and paragraphs) vertically in their rows. How may I go about doing this? They seem to be sitting at the "bottom" of their rows.
HTML code:
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
According to my experience, If we want to align items(vertically or horizontally) in a grid we can use flex property inside that child element. The following example will help to get an idea.
To vertically align:
align-items:{position}
To horizontally align:
justify-content:{position}
body{
color: #ffff;
}
.content{
display: grid;
grid-gap: 10px;
max-width: 960px;
margin: auto;
text-align: center;
font-weight: bold;
font-size: 50px;
font-family: sans-serif;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:200px;
}
.content div{
background: gray;
padding: 30px;
}
.content div:nth-child(even){
background: green;
}
.one{
display:flex;
align-items: start;
justify-content: start;
}
.two{
display:flex;
align-items: center;
justify-content: center;
}
.three{
display:flex;
align-items: end;
justify-content: end;
}
.four{
display:flex;
align-items: start;
justify-content: center;
}
.five{
display:flex;
align-items: end;
justify-content: center;
}
.six{
display:flex;
align-items: start;
justify-content: end;
}
<html>
<body>
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>
What I did was I made the div surrounding the h1 and p tags into a flexbox
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
And that seemed to work. It was really as simple as that.
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
h1 {
margin-bottom: 0;
}
p {
margin-top: 0;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
Currently, my divs/elements overlap each other. How can I fix it? If you found more issues in my code let me know. I try with position and other things (eg. margin) but don't work for me or I don't know how to do it. Maybe someone also can help me how to make this menu sticky while scrolling down.
Thanks for your help!
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #282A2E;
font-family: 'Fira Code', monospace;
}
menu {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-gap: 10px;
padding-bottom: 100px;
}
.menu__item {
border: 3px dotted white;
width: 150px;
padding: 10px;
text-align: center;
}
.menu__item a {
text-decoration: none !important;
color: white;
font-size: 20px;
}
#whoami #skills #projects {
padding-bottom: 50px;
}
.description__text {
border: 3px dotted#282A2E;
width: 500px;
float: left;
margin-left: 200px;
height: 399px;
text-align: center;
background-color: white;
}
.description__text h1 {
color: #282A2E;
font-size: 50px;
}
.description__text p {
color: #282A2E;
}
.section__header h1 {
width: auto;
height: 50px;
border: 3px dotted#282A2E;
background-color: white;
display: block;
margin-top: auto;
text-align: center;
padding-top: 10px;
}
<!DOCTYPE HTML>
<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" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap" rel="stylesheet">
<script src="hereFontAwesome" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<menu>
<div class="menu__item">
whoami
</div>
<div class="menu__item">
skills
</div>
<div class="menu__item">
projects
</div>
<div class="menu__item">
contact
</div>
</menu>
<section id="whoami">
<img src="./images/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg"
style="border: 2px solid white; float: right; margin-right: 200px; ">
<article class="description__text">
<h1>Who am I?</h1>
<p>TEST!</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</article>
</section>
<section id="skills">
<div class="section__header">
<h1>
My skills
</h1>
</div>
<article style="margin-top: 100px;">
<div style="color: white;display: grid;
grid-template-columns: repeat(3, 500px); gap:50px;
text-align: center; justify-content:center">
<i class="fab fa-html5 fa-5x"></i>
<i class="fab fa-css3-alt fa-5x"></i>
<i class="fab fa-sass fa-5x"></i>
<i class="fab fa-js-square fa-5x"></i>
<i class="fas fa-database fa-5x"></i>
<i class="fab fa-git fa-5x"></i>
</div>
<p style="color: white; text-align: center; margin-top: 100px;">TEXT </p>
</article>
</section id="projects">
<div class="section__header">
<h1>My projects</h1>
</div>
</section>
</div>
<script src="./scripts/script.js" async defer></script>
</body>
</html>
The main reason for the overlapping elements is because you're floating an element (article.description__text) inside an element (section#whoami) which is not floated.
If you're using floats to layout your page, you need to use float on all your elements. A more modern way to layout your page would be to use flexbox.
Add a , between these section id
#whoami,
#skills,
#projects {
padding-bottom: 50px;
}
and remove float: left; from .description__text class.It will fix the overlapping issue .
https://codesandbox.io/s/hopeful-river-kkkps?file=/style.css
I'm having a problem that's driving me crazy because I know the solution is likely right in front of my eyes. I have a dropdown menu that I want to change on the screen reaching a size. Here is the snippet of what it it is like when it's unedited.
.box {
float: left;
position: relative;
top: -50px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: left;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This works fine and how I want it. But my trouble comes when I try to change the float value when the screen reaches a certain size by doing the following:
#media screen and (max-width: 768px) {
#Dropdown {display: block;}
.box button {
float: top;
display: inline-block;
}
.box {
float: top;
position: static;
top: 0;
margin-top: 10px;
max-height: 45px;
max-width: 150px;
}
}
But for some reason it doesn't work right. It should appear like the following page:
.box {
float: top;
margin-top: 0px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: top;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This is a pretty long winded question so any help on this would be greatly appreciated!
As I know, there is no css command float:top;. float can take the parameters: left, right, none, inline-start, inline-end.