So, I want to write a fan page for NerdHub (YouTube channel) and, I'm stuck because the "Search..." isn't in one line with the logo (of NerdHub).
Now as you can see it looks like this:
It should look like this:
I read a duplicate, but display: inline-block; didn't help me either.
All the files: https://drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G?usp=sharing
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<style type="text/css">
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
Simple way is to use flex as above answer mentioned. You can align the items inside the box with align-items property. Simply add another div around the elements you wish to have on one line and give it following style:
#wrapper {
display: flex;
align-items: center;
}
Also since you want to have logo to the left you should have it before the search bar.
<div id="wrapper">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
</div>
The simplest solution will be to add display:flex.
By default, flex renders its immediate children in a row.
I would encourage you to read more about flex properties here.
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
.flex{
display:flex;
}
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div class="flex">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</div>
</body>
</html>
Try this one instead of your code...
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="reklambytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<!--file:///D:/Don%C3%A1t/Programoz%C3%A1s/wamp/nerdhub.com/Nerdhub.html -->
<style type="text/css">
body {
background-color: black;
}
.con,#asd{float: left;}
form{width: 80%;margin: 0 auto;}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
margin: 15px 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con > * {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
* {
box-sizing: border-box;
position: relative;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
header {
align-items: center;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-gap: 140px;
overflow: hidden;
padding: 20px 60px;
width: 100%;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
section {
width: 100%;
}
aside {
padding: 30px;
position: absolute;
right: 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con>* {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
<div class="con">
<div id="fel"></div>
</div>
<header>
<div id="img">
<img src="https://drive.google.com/uc?export=view&id=1TR9UwuFvWO7ZAFkYjl9LQ5wNEKpvOzEM" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
</header>
<section>
<aside>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="https://drive.google.com/uc?export=view&id=14CKiNux7_cpRXiM48Sajr7DV0H5ikjFC">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</aside>
</section>
Related
I would like to have space after the table. I know that <br> works, but I want to find out if there is a CSS attribute I can add that will make it unnecessary.
.bold {
font-weight: bold;
}
.body-settings {
font-family: opensans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 0;
background-color: black;
}
.site-wrapper {
background-color: lightyellow;
max-width: 50%;
margin: 0 auto;
padding: 30px;
position: relative;
}
.rTable {
display: table;
width: 100%;
margin-bottom: 1em;
}
.rTableRow {
display: table-row;
}
.rTableCell {
display: table-cell;
}
.rTableCellBold {
font-weight: bold;
}
<body class="body-settings">
<div class="site-wrapper">
<div class="rTable">
<div class="rTableRow">
<div class="rTableCellBold">Subject Name:</div>
<div class="rTableCell"> John Doe</div>
</div>
<div class="rTableRow">
<div class="rTableCellBold">Occupation:</div>
<div class="rTableCell"> Professional Impersonator</div>
</div>
</div>
<div class="bold">
Executive Summary
</div>
</div>
<body>
You can just use margin-bottom on rTable.
.body-settings {
font-family: opensans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 0;
background-color: black;
}
.site-wrapper {
background-color: lightyellow;
max-width: 50%;
margin: 0 auto;
padding: 30px;
position: relative;
}
.rTable {
display: table;
width: 100%;
margin-bottom:20px;
}
.rTableRow {
display: table-row;
}
.rTableCell {
display: table-cell;
}
<body class="body-settings">
<div class="site-wrapper">
<div class="rTable">
<div class="rTableRow">
<div class="rTableCellBold">Subject Name:</div>
<div class="rTableCell"> John Doe</div>
</div>
<div class="rTableRow">
<div class="rTableCellBold">Occupation:</div>
<div class="rTableCell"> Professional Impersonator</div>
</div>
</div>
<div class="bold">
Executive Summary
</div>
</div>
</body>
The actual problem was that I did not add rTableCellBold to the display: table-cell; list:
.rTableCell, rTableCellBold {
display: table-cell;
}
After this change, I was able to use
.rTable {
display: table;
width: 100%;
margin-bottom: 1em;
}
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
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>
I have a css header that has a div, a h1 and a div. I am having a challenge of aligning the div content to the left, the header to the center and the second div to the right horizontally with content of the second div placed on top of one another.
css snippets
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom:3px;
padding: 2px;
text-align: center;
width: 100%x;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
html snippets
<div id="header">
<div style="float:left; margin-left:40px;">
<img src="${contextPath}/resources/images/chat1.png" width="496" height="90"/>
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div align="right">
<img src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat"/>
</form>
</div>
</div>
bellow is the illustration of what I am trying on
div content h1 content second div
kindly assist!
Maybe like this, where you use flex to line them up
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom: 3px;
padding: 2px;
text-align: center;
width: 100%x;
display: flex;
}
#header * {
flex: 1;
}
#header div:last-child {
text-align: right;
}
#header h3 {
margin-top: 35px;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div>
<img src="http://placehold.it/200x50/f00" width="296" height="90" />
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div>
<img src="http://placehold.it/50x50/ff0" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat" />
</form>
</div>
</div>
Can be done with display: table-cell if you need to target older browsers
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom: 3px;
padding: 2px;
text-align: center;
width: 100%;
display: table;
}
#header * {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div>
<img src="http://placehold.it/200x50/f00" width="296" height="90" />
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div>
<img src="http://placehold.it/50x50/ff0" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat" />
</form>
</div>
</div>
I believe that this is what you want:
#header {
text-align: center;
}
#leftDiv {
float: left;
display: inline;
}
#leftImage {
height: 50px;
width: 200px;
}
h3 {
display: inline;
}
#rightDiv {
float: right;
display: inline;
}
#rightImage {
height: 50px;
width: 100px;
}
#leaveChat {
position: relative;
bottom: 40px;
}
<div id="header">
<div id="leftDiv">
<img id="leftImage" src="${contextPath}/resources/images/chat1.png" />
</div>
<h3>
Chat Panel
</h3>
<div id="rightDiv">
<img id="rightImage" src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input id="leaveChat" type="submit" value="Leave Chat"/>
</form>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/bbh4qpwm/
How about that:
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom:3px;
padding: 2px;
text-align: center;
width: 100%x;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div style="float:left; margin-left:40px;">
<img src="${contextPath}/resources/images/chat1.png" width="496" height="90"/>
</div>
<h3 style="float:left"><strong>Chat Panel</strong></h3>
<div style="float:right">
<img src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat"/>
</form>
</div>
</div>
https://jsfiddle.net/d05Lcn1m/