I have the following HTML code and its respective CSS.
The table seems to be spilling out of the main body. How can I extend the body/header to full width and encompass the table and other elements?
I tried width : 100%; and reducing the table and few other tricks but was unsuccessful. In any case, when zoomed into the browser, the table seems to be spilling out nevertheless.
Here is what is looks like at 100% zoom :
Here is what is looks like when zoomed in:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link rel="stylesheet" href="../styles/layout.css">
<link rel="stylesheet" href="../styles/listview.css">
</head>
<body>
<!-- Header Start -->
<div class = "container container-header">
<div class = "item item-header-title">
<h1>TITLE</h1>
</div>
<div class = "item item-header-username">
<h2>
<a class="item-header-username" href = "#username" target="_blank">
#username
</a>
</h2>
</div>
</div>
<!-- Header End -->
<div class = "container-page">
<!-- Sidebar Start -->
<div class = "container container-sidebar">
<h4 class = "item item-sidebar">
<a class ="item-sidebar" href="#home">Home</a>
</h4>
<button class="accordion">Page</button>
<div class="panel">
<a href= "#" class ="item-sidebar" > - Create new Page</a>
<a href= "#" class ="item-sidebar" > - Create new Page</a>
<a class ="item-sidebar" > - View Page</a>
<a class ="item-sidebar" > - View Page</a>
</div>
<button class="accordion">Page</button>
<div class="panel">
<a href= "#" class ="item-sidebar" > - Create new Page</a>
<a href= "#" class ="item-sidebar" > - Create new Page</a>
<a class ="item-sidebar" > - View Page</a>
<a class ="item-sidebar" > - View Page</a>
</div>
<h4 class = "item item-sidebar">
<a class = "item-sidebar" href="#glossary">Glossary</a>
</h4>
</div>
<!-- Sidebar End -->
<!-- Content Start -->
<div class = "container container-content">
<h1 class = "item item-content item-content-title">
Title
</h1>
<h1 class = "item item-content item-content-body">
<table id = "listviewTable">
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</h1>
</div>
<!-- Content End -->
</div>
<!-- Footer Start -->
<div class = "container container-footer">
<div class = "item item-footer">
<h1>
<a class="item-footer" href="Item" target="_blank">
Item
</a>
|
<a class="item-footer" href="Item" target="_blank">
Item
</a>
|
<a class="item-footer" href="Item" target="_blank">
Item
</a>
</h1>
</div>
</div>
<!-- Footer End -->
<script src="../js/index.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
width : 100%;
border: 5px solid rgb(153, 153, 153);
}
.container {
display: flex; /* or inline-flex */
}
.container-header {
flex-direction: row;
/* background-image: linear-gradient(to bottom right,rgba(38, 0, 255, 0.9),
rgba(96, 143, 230, 0.9)); */
background-image: linear-gradient(to bottom right, rgba(34,47,62,0.9),
rgba(80, 80, 80 , 0.9));
font-family: "Lucida Console", "Courier New", monospace;
color: rgba(236,114,17,255);
/* rgba(236,114,17,255) */
height: 100px;
align-items: center;
border: 1px solid rgb(153, 153, 153);
}
.container-page{
background-color: rgb(233, 24, 24);
display: flex;
flex-direction: row;
}
.container-sidebar {
background-color: #d7d6d6;
background-image: linear-gradient(to bottom right,rgb(215, 214, 214, 0.9),rgba(104, 101, 104, 0.9));
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
width: 25%;
text-align: left;
border: 1px solid rgb(153, 153, 153);
}
.container-content {
background-color: rgb(255, 255, 255);
flex-direction: column;
width: 75%;
border: 1px solid rgb(153, 153, 153);
font-size: 0.6em;
font-weight: 10;
color: #000;
border: 1px solid rgb(153, 153, 153);
}
.container-footer {
flex-direction: row;
background-image: linear-gradient(to bottom right, rgba(34,47,62,0.9),
rgba(80, 80, 80 , 0.9));
font-family: "Lucida Console", "Courier New", monospace;
color: white;
align-items: center;
border: 1px solid rgb(153, 153, 153);
height : 50px;
font-size : 0.7em;
}
.item {
/* */
}
.item-header-title {
flex-grow: 1;
text-align: left;
padding-left: 2%;
font-size: 1.5em;
}
.item-header-username {
flex-grow: 1;
text-align: right;
padding-right: 2%;
font-size: 1em;
}
.item-header-title {
flex-grow: 1;
}
.item-sidebar {
margin: 0;
font-weight: 10;
}
.item-content {
background-color: rgb(150, 243, 167);
}
.item-content-title {
background-color: rgb(244, 241, 241);
margin: 0;
padding: 30px;
color: #000;
border: 1px solid rgb(153, 153, 153);
font-size: 3em;
}
.item-content-body {
background-color: rgb(251, 251, 251);
flex-grow: 2;
margin: 0;
padding: 30px;
color: #000;
}
.item-footer
{
flex-grow: 1;
}
a{
text-decoration: none;
color: white;
}
a.item-sidebar{
display: block;
color: #000;
padding: 20px 16px;
background-color: #ececec;
}
a.item-sidebar.active {
background-color: #5a51b6;
color: white;
}
a.item-sidebar:hover:not(.active) {
background-color: #5a51b6;
color: white;
}
.accordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.panel {
padding: 0 28px;
max-height: 0;
width: 100%;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
table {
border-collapse: collapse;
width: 100%;
align-items: center;
font-weight: 10;
font-size: 0.8em;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
Any help or suggestion is appreciated. Thanks!
you should remove the border property from the body selector in the CSS. and add width: 100%; to the .container-header and .container-page selectors and set the width of the table to 100% and remove the width property from the .item-content-body selector
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.container {
display: flex;
}
.container-header {
flex-direction: row;
width: 100%;
background-image: linear-gradient(to bottom right, rgba(34, 47, 62, 0.9),
rgba(68, 108, 179, 0.9));
}
.container-page {
width: 100%;
}
.container-content {
flex: 1;
padding: 20px;
overflow-y: scroll;
}
.item-content-body {
margin: 0;
padding: 0;
}
table {
width: 100%;
}
th,
td {
padding: 15px;
text-align: center;
border: 1px solid black;
}
Related
I was trying to make a navbar and adding elements next to it, but I don't know why the other element is positioning in a higher place, making the navbar to move down.
This is what's happening
What do I need to do so the navbar stays where it's supposed to be
and have the ability to move freely the other objects, so I can place them in the middle of the website without problem
Here is the code:
body{
margin: 0;
}
header{
background: #224fb1;
color: white;
display: flex;
justify-self: space-between;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
}
#iconmenu{
margin-left: 25px;
margin-right: 25px;
}
.title{
display: flex;
justify-self: space-between;
align-items: center;
}
.titphp{
font-size: large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#navbar{
background-color: #eeeeee;
border-radius: 5px;
/* height: 100vh; */
height: 860px;
width: 170px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
margin-top: 5px;
margin-right: 5px;
}
ul{
padding: 0;
text-decoration: none;
color: #444;
list-style: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#opcnav{
padding: 0;
background-color: white;
height: 25px;
margin: 5px;
border-radius: 5px;
}
#opcnav:hover{
background-color: #91B6E4;
font-weight: bold;
transition-duration: 0.2s;
}
#botnav{
text-decoration: none;
color: #444;
display: block;
}
#botnav:hover{
border-radius: 5px;
text-decoration: none;
color: #444;
background-color: #91B6E4;
color: white;
}
#datosalumno{
background-color: #eeeeee;
margin: 0px;
text-align: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
border-radius: 5px;
}
#fotoalumno{
margin: 10px;
/* border-radius: 10px; */
}
#calendar{
margin: 5px;
}
/* Parte del calendario */
#calendario{
border: 4px double black;
max-width: 536px;
background-color: #fffafa;
text-align: center;
display: inline-block;
}
#diasc{
border: 1px solid black;
border-collapse: separate;
border-spacing: 4px;
}
#diasc th, #diasc td {
font: normal 14pt arial;
width: 70px;
height: 30px;
}
#diasc th{
color: #990099;
background-color: #5ecdec;
}
#diasc td{
color: #492736;
background-color: #9bf5ff;
}
#fechaactual {
font: bold 12pt arial;
padding: 0.4em;
}
#fechaactual i {
cursor: pointer;
}
#fechaactual i:hover{
color: blue;
text-decoration: underline;
}
#buscafecha{
background-color: #663366;
color: #9bf5ff;
padding: 5px;
}
#buscafecha select, #buscafecha input {
background-color: #9bf5ff;
color: #990099;
font: bold 10pt arial;
}
#buscafecha [type=text]{
text-align: center;
}
#buscafecha [type=button]{
cursor: pointer;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="prac/calestilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="calendario.js"></script>
<title>Calendario 2.0</title>
</head>
<body>
<div class="cab">
<header>
<div>
<img src="prac/icons/hambu.png" alt="Menu" id="iconmenu"
height="40px"
>
</div>
<div>
<h1 class="title">Calendario</h1>
</div>
</header>
</div>
<div id="navbar">
<img src="prac/icons/logo_uni_2016.png" alt="Logo Uni"
height="50px">
<ul id="listnav" class="nav-menu">
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Prac/miinfo.html" title="Mi Perfil" target="blank"><img src="prac/icons/user.png" alt="Mi Información"
height="15px"> Mi Perifl</a>
<li id="opcnav"> <img src="prac/icons/asistencia.png" alt="Asistencia"
height="15px"> Asistencia
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Calendario.php" title="Calendario" target="blank" > <img src="prac/icons/calendar.png" alt="Calendario"
height="15px"> Calendario</a>
<li id="opcnav">En Proceso...
</ul>
</div>
<!-- Esta es la parte del calendario -->
<div id="calendario">
<div id="anterior" onclick="mesantes()"></div>
<div id="posterior" onclick="mesdespues()"></div>
<h2 id="titulos"></h2>
<table id="diasc">
<tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr id="fila1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila4"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila5"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila6"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>
<div id="buscafecha">
<form action="#" name="buscar">
<p>Buscar ... MES
<select name="buscames">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
... AÑO ...
<input type="text" name="buscaanno" maxlength="4" size="4" />
...
<input type="button" value="BUSCAR" onclick="mifecha()" />
</p>
</form>
</div>
</div>
</body>
</html>
Suggestion
In today era, we have some powerful things like flex and grid to build a website layout. So plz try to use display: flex; or display: grid; insted of display: inline-block;.
How to do
Just wrap the <nav id="navbar"> and <div id="calendario"> to the <div> and give it a style display: flex. And then there's no need for display: inline-block; just remove it from both childs. One more fix to adjust the height of <div id="calendario"> by height: fit-content;
body {
margin: 0;
}
header {
background: #224fb1;
color: white;
display: flex;
justify-self: space-between;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
}
#iconmenu {
margin-left: 25px;
margin-right: 25px;
}
.title {
display: flex;
justify-self: space-between;
align-items: center;
}
.titphp {
font-size: large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#navbar {
background-color: #eeeeee;
border-radius: 5px;
/* height: 100vh; */
height: 860px;
width: 170px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
/* display: inline-block; */
margin-top: 5px;
margin-right: 5px;
}
ul {
padding: 0;
text-decoration: none;
color: #444;
list-style: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#opcnav {
padding: 0;
background-color: white;
height: 25px;
margin: 5px;
border-radius: 5px;
}
#opcnav:hover {
background-color: #91B6E4;
font-weight: bold;
transition-duration: 0.2s;
}
#botnav {
text-decoration: none;
color: #444;
display: block;
}
#botnav:hover {
border-radius: 5px;
text-decoration: none;
color: #444;
background-color: #91B6E4;
color: white;
}
#datosalumno {
background-color: #eeeeee;
margin: 0px;
text-align: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
border-radius: 5px;
}
#fotoalumno {
margin: 10px;
/* border-radius: 10px; */
}
#calendar {
margin: 5px;
}
/* Parte del calendario */
#calendario {
border: 4px double black;
max-width: 536px;
background-color: #fffafa;
text-align: center;
/* display: inline-block; */
}
#diasc {
border: 1px solid black;
border-collapse: separate;
border-spacing: 4px;
}
#diasc th,
#diasc td {
font: normal 14pt arial;
width: 70px;
height: 30px;
}
#diasc th {
color: #990099;
background-color: #5ecdec;
}
#diasc td {
color: #492736;
background-color: #9bf5ff;
}
#fechaactual {
font: bold 12pt arial;
padding: 0.4em;
}
#fechaactual i {
cursor: pointer;
}
#fechaactual i:hover {
color: blue;
text-decoration: underline;
}
#buscafecha {
background-color: #663366;
color: #9bf5ff;
padding: 5px;
}
#buscafecha select,
#buscafecha input {
background-color: #9bf5ff;
color: #990099;
font: bold 10pt arial;
}
#buscafecha [type=text] {
text-align: center;
}
#buscafecha [type=button] {
cursor: pointer;
}
#main{
display: flex;
}
#calendario {
height: fit-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="prac/calestilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="calendario.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Calendario 2.0</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="cab">
<header>
<div>
<img src="prac/icons/hambu.png" alt="Menu" id="iconmenu" height="40px">
</div>
<div>
<h1 class="title">Calendario</h1>
</div>
</header>
</div>
<div id="main">
<div id="navbar">
<img src="prac/icons/logo_uni_2016.png" alt="Logo Uni" height="50px">
<ul id="listnav" class="nav-menu">
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Prac/miinfo.html" title="Mi Perfil"
target="blank"><img src="prac/icons/user.png" alt="Mi Información" height="15px"> Mi Perifl</a>
<li id="opcnav"> <img src="prac/icons/asistencia.png" alt="Asistencia" height="15px"> Asistencia
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Calendario.php" title="Calendario"
target="blank"> <img src="prac/icons/calendar.png" alt="Calendario" height="15px">
Calendario</a>
<li id="opcnav">En Proceso...
</ul>
</div>
<!-- Esta es la parte del calendario -->
<div id="calendario">
<div id="anterior" onclick="mesantes()"></div>
<div id="posterior" onclick="mesdespues()"></div>
<h2 id="titulos"></h2>
<table id="diasc">
<tr id="fila0">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr id="fila1">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila2">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila3">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila4">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila6">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>
<div id="buscafecha">
<form action="#" name="buscar">
<p>Buscar ... MES
<select name="buscames">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
... AÑO ...
<input type="text" name="buscaanno" maxlength="4" size="4" />
...
<input type="button" value="BUSCAR" onclick="mifecha()" />
</p>
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
I'm struggling with something regarding jQuery, HTML and CSS. I am currently working on a project that is to do with a railway company. I am designing the website, I completed the Home page, but I am now on the tickets page. I am using only HTML,CSS and jQuery to build this site but I just cannot get the tickets page to work properly. I created a ticket section that has a purchase button after you selected if you are an adult, but all the purchase buttons appear if just one of the trips's, can someone please help me out, the purchase button all have the same class name but I know that using $(this).find(".className").show(); always works but it does not seem to now. I also tried $("tr").find(".className").show(); as well as $("this").closest(".classname").show();
// Trips Page Functionality
$("input").click(function() {
$("tr").first(".purchase-button").fadeIn(800);
});
//footer functionality
$("#social-media-group").mouseenter(function() {
$(this).find(".facebook-block").attr("src", "assets/icons/facebook-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".facebook-block").attr("src", "assets/icons/facebook.svg");
});
$("#social-media-group").mouseenter(function() {
$(this).find(".instagram-block").attr("src", "assets/icons/instagram-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".instagram-block").attr("src", "assets/icons/instagram.svg");
});
$("#social-media-group").mouseenter(function() {
$(this).find(".youtube-block").attr("src", "assets/icons/youtube-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".youtube-block").attr("src", "assets/icons/youtube.svg");
});
});
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
#container {
background-color: #000000;
width: 100%;
height: auto;
}
/* Nav-Bar Styling */
#overlay {
position: fixed;
background-color: rgba(203, 187, 42, 0.6);
width: 100%;
z-index: 2;
}
#header {
background-color: black;
height: 150px;
text-align: center;
}
#phone-div {
margin-top: 0px;
position: relative;
right: 350px;
bottom: 100px;
}
h6 {
font-family: 'Prata', serif;
color: white;
font-size: 12px;
}
#email-div {
margin-top: 0px;
position: relative;
left: 350px;
bottom: 150px;
}
#dropdown {
width: 700px;
height: 50px;
margin: 0 auto;
}
#dropdown:hover {
transition: 0.2s;
}
li {
text-decoration: none;
display: inline;
margin-left: 150px;
text-align: center;
position: relative;
left: -50px;
font-family: 'Prata', serif;
position: relative;
top: 14px;
color: white;
}
li:hover {
text-shadow: 2px 2px 5px black;
transition: 0.2s;
cursor: pointer;
}
a {
text-decoration: none;
}
/* End of Nav Bar Styling */
/* Container styling */
h1 {
font-family: 'MonteCarlo', 'sans-serif';
color: white;
position: relative;
top: 220px;
left: 50px;
text-align: center;
font-size: 62px;
}
h2 {
position: relative;
top: 300px;
margin-left: 120px;
margin-right: 120px;
color: white;
font-family: 'Prata', 'sans-serif';
border-radius: 10px;
text-align: center;
}
/* Tickets Section Styling */
#tickets-group {
width: 100%;
height: auto;
margin: 50px;
;
border-radius: 10px;
position: relative;
top: -2200px;
right: 50px;
}
table {
width: 70%;
position: relative;
left: 20px;
border-collapse: collapse;
position: relative;
left: 250px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
}
th {
color: white;
font-family: 'Prata', 'sans-serif';
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
td {
color: white;
text-align: center;
border-right: 3px solid rgba(0, 0, 0, 0.5);
font-family: 'Prata', serif;
}
input:hover {
cursor: pointer;
}
.trips:hover {
cursor: pointer;
background-color: rgba(203, 187, 42, 0.6);
transition: 0.3s;
}
.purchase-button {
text-align: center;
position: relative;
left: 43%;
font-size: 24px;
border-bottom: none;
}
table:hover {
box-shadow: 3px 1px 20px black;
transition: 0.3s ease;
}
h3 {
font-family: 'Prata', serif;
font-size: 24px;
}
.purchase-button:hover {
transition: 0.3s;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5)
}
/* Footer Styling */
#footer {
width: 100%;
float: left;
background-color: #CBBB2A;
overflow: hidden;
}
#social-media-group img {
margin: 20px;
position: relative;
left: 40%;
bottom: 130px;
}
/* End of Footer Styling */
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Wiaan Duvenhage">
<meta name="lecturer" content="Armand Pretorius">
<meta name="assessment" content="Website-root">
<meta name="studentnumber" content="200307">
<meta name="subject" content="DV100">
<meta name="class" content="Class 2">
<link rel="stylesheet" href="../css/trips-page.css">
<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=Julius+Sans+One&family=MonteCarlo&family=Prata&display=swap" rel="stylesheet">
<title>Velocity Railways</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../js/data.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div id="container">
<div id="overlay">
<div id="header">
<img src="../assets/logo.svg" alt="velocity_logo" width="200px">
<div id="phone-div">
<img src="../assets/icons/phone .svg" alt="phone_icon" width="30px">
<h6>+27 12 785 3355</h6>
</div>
<!--Phone Div-->
<div id="email-div">
<img src="../assets/icons/email.svg" alt="phone_icon" width="30px">
<h6>enquiries#velocityrailways.co.za</h6>
</div>
<!--Email Div-->
</div>
<!--Header-->
<div id="dropdown">
<ul>
<a href="pages/trips-page.html">
<li>Trips</li>
</a>
<li>Purchase Tickets</li>
<li>About</li>
</ul>
</div>
<!-- Dropdown -->
</div>
<!--Overlay-->
<div id="inner-container">
<h1>Trips Page</h1>
<div id="introduction-body">
<h2>Welcome To Trips Page Section! Feel free to book your tickets on this page and after selecting it, proceeding to the next page, which is the Purchase Tickets Page!</h2>
</div>
<img class="home-page-image" src="../img/iccup-nNV3q_nhGKQ-unsplash.jpg" width="100%" height="auto">
<div id="tickets-group">
<table>
<tr>
<th>
<h3>FROM</h3>
</th>
<th>
<h3>TO</h3>
</th>
<th>
<h3>DEPART</h3>
</th>
<th>
<h3>ARRIVE</h3>
</th>
<th>
<h3>ADULT</h3>
</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
</table>
</div>
</div>
<div id="footer">
<img src="../assets/logo-footer.svg" alt="velocity_logo" width="200px">
<div id="social-media-group">
<img src="../assets/icons/facebook.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/instagram.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/youtube.svg" alt="facebook-logo" width="50px">
</div>
</div>
</div>
<!-- End of Outer Container -->
</body>
</html>
Default your purchase button should be hide by CSS property like .purchase-button{display: none;}.
After that you need to check condition of checkbox is checked or Not as respectively show/hide purchase-button through jQuery functionality.
And need to add colspan="5" attribute on .purchase-button element for standard html structure.
$(document).on('change', 'input[type="checkbox"]', function () {
if($(this).is(':checked')){
$(this).parents('.trips').next().find('.purchase-button').show();
}else{
$(this).parents('.trips').next().find('.purchase-button').hide();
}
});
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
#container {
background-color: #000000;
width: 100%;
height: auto;
}
/* Nav-Bar Styling */
#overlay {
position: relative;
background-color: rgba(203, 187, 42, 0.6);
width: 100%;
z-index: 2;
}
#header {
background-color: black;
height: 150px;
text-align: center;
}
#phone-div {
margin-top: 0px;
position: relative;
}
#email-div {
margin-top: 0px;
position: relative;
}
h6 {
font-family: 'Prata', serif;
color: white;
font-size: 12px;
}
#dropdown {
width: 100%;
max-width: 700px;
height: 50px;
margin: 0 auto;
}
#dropdown:hover {
transition: 0.2s;
}
li {
text-decoration: none;
display: inline;
margin-left: 150px;
text-align: center;
position: relative;
left: -50px;
font-family: 'Prata', serif;
position: relative;
top: 14px;
color: white;
}
li:hover {
text-shadow: 2px 2px 5px black;
transition: 0.2s;
cursor: pointer;
}
a {
text-decoration: none;
}
/* End of Nav Bar Styling */
/* Container styling */
h1 {
font-family: 'MonteCarlo', 'sans-serif';
color: white;
position: relative;
text-align: center;
font-size: 62px;
}
h2 {
font-size: 32px;
position: relative;
color: white;
font-family: 'Prata', 'sans-serif';
border-radius: 10px;
text-align: center;
}
/* Tickets Section Styling */
#tickets-group {
width: 100%;
max-width: 1320px;
height: auto;
margin: 50px auto;
border-radius: 10px;
position: relative;
}
table {
width: 100%;
position: relative;
border-collapse: collapse;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
border: none;
}
th {
color: white;
font-family: 'Prata', 'sans-serif';
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 10px;
}
td {
color: white;
text-align: center;
border-right: 3px solid rgba(0, 0, 0, 0.5);
font-family: 'Prata', serif;
padding: 10px;
}
input:hover {
cursor: pointer;
}
.trips:hover {
cursor: pointer;
background-color: rgba(203, 187, 42, 0.6);
transition: 0.3s;
}
.purchase-button {
text-align: center;
position: relative;
font-size: 24px;
border-bottom: none;
display: none;
}
table:hover {
box-shadow: 3px 1px 20px black;
transition: 0.3s ease;
}
h3 {
font-family: 'Prata', serif;
font-size: 24px;
}
.purchase-button:hover {
transition: 0.3s;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5)
}
/* Footer Styling */
#footer {
width: 100%;
float: none;
background-color: #CBBB2A;
overflow: hidden;
text-align: center;
padding: 15px;
}
#social-media-group{
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
#social-media-group img {
margin: 10px 10px 0 10px;
position: relative;
}
/* End of Footer Styling */
<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=Julius+Sans+One&family=MonteCarlo&family=Prata&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
<div id="overlay">
<div id="header">
<img src="../assets/logo.svg" alt="velocity_logo" width="200px">
<div id="phone-div">
<img src="../assets/icons/phone .svg" alt="phone_icon" width="30px">
<h6>+27 12 785 3355</h6>
</div>
<!--Phone Div-->
<div id="email-div">
<img src="../assets/icons/email.svg" alt="phone_icon" width="30px">
<h6>enquiries#velocityrailways.co.za</h6>
</div>
<!--Email Div-->
</div>
<!--Header-->
<div id="dropdown">
<ul>
<li>Trips</li>
<li>Purchase Tickets</li>
<li>About</li>
</ul>
</div>
<!-- Dropdown -->
</div>
<!--Overlay-->
<div id="inner-container">
<h1>Trips Page</h1>
<div id="introduction-body">
<h2>
Welcome To Trips Page Section! Feel free to book your tickets on this page and after selecting it,
proceeding to the next page, which is the Purchase Tickets Page!
</h2>
</div>
<img class="home-page-image" src="../img/iccup-nNV3q_nhGKQ-unsplash.jpg" width="100%" height="auto">
<div id="tickets-group">
<table>
<tr>
<th><h3>FROM</h3></th>
<th><h3>TO</h3></th>
<th><h3>DEPART</h3></th>
<th><h3>ARRIVE</h3></th>
<th><h3>ADULT</h3></th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
</table>
</div>
</div>
<div id="footer">
<img src="../assets/logo-footer.svg" alt="velocity_logo" width="200px">
<div id="social-media-group">
<img src="../assets/icons/facebook.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/instagram.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/youtube.svg" alt="facebook-logo" width="50px">
</div>
</div>
</div>
<!-- End of Outer Container -->
You could select the parent tr with .parents('.trips'), then the next tr with .next() and then the button with .find('.purchase-button'):
$('input[type="checkbox"]').on('click', function() {
$(this).parents('.trips').next().find('.purchase-button').show();
});
When the code below renders in ANY browser, the user agent stylesheet is overriding the form.example in my CSS for the search button. The button is appearing small and not the same size as the input box as it used to. I have confirmed this using the browser console. It's strange because the same CSS has been working fine for months and I haven't changed anything. It stopped working all of a sudden. Strangely, when I run the same code in https://www.codeply.com/p it seems to render correctly.
Here is code:
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example
width: 80%;
background: #f1f1f1;
}
}
table.example
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="margin:left;max-width:600px">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>
You missed the { in form.example and got one closing } to much after it. Therefore its missing on input[type=text] {
Should work:
form.example {
width: 80%;
background: #f1f1f1;
}
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
JSFiddle
OR
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example {
width: 80%;
background: #f1f1f1;
}
table.example {
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="display:inline;">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>
It seems there an update in the API or something.
I would suggest to set the overwritten styles an !important flag and/or try a browser style-reset:
td /*!important flag*/
{
border: 1px solid #333 !important;
}
*, html /*set every element an initial style (style-reset)*/
{
margin: 0;
padding: 0;
}
I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>
the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#firstsection div a {
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover {
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br> the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
I am trying to create a web page that looks like this:
Download page
I worked with bootstrap and created rows to align three download options next to each other. I then created containers in these rows (to replicate the boxes) and center aligned the text and download icon horizontally. Unfortunately, I am not sure how to center align the text and icon vertically in a container. Can anyone help out? My current design looks like this:
My code is the following:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
float: left;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
Edit: Thanks everyone for their answers! I really appreciate them. For me it worked by simply adjusting my content-border class with:
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
You don't need to complicate stuff using FlexBox. Please use something like this, a table layout or line-height and vertical-align combination:
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
text-align: center;
padding: 5px;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
vertical-align: middle;
line-height: 120px;
}
#download-icon + span {
vertical-align: middle;
line-height: 1;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
</div>
</div>
</div>
</div>
Preview
I would use a flexbox for the container-border class. In that case you can remove the floats.
.download {
font: Verdana, Helvetica, Arial, sans-serif;
color: RGB(112, 112, 112);
font-size: 18px;
padding: 5px;
text-align: center;
}
.download:hover {
color: rgb(227, 111, 30);
cursor: pointer;
}
#download-icon {
font-size: 80px;
}
.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>
add display: flex;align-items: center; to .container-border
.container-border{
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
display: flex;
align-items: center;
}
Why not just set a padding:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
Demo:
.download {
font: Verdana,Helvetica,Arial,sans-serif;
color: RGB(112,112,112);
font-size:18px;
text-align:center;
/* padding: 5px; <- removed */
padding: 12px 5px 5px 5px; /* New */
}
.download:hover {
color: rgb(227,111,30);
cursor: pointer;
}
#download-icon {
font-size:80px;
float:left;
padding-top: 10px; /* New */
}
.container-border {
border-style:solid;
border-color: rgb(0,143,197);
padding: 5px;
min-height:120px;
width: 300px; /* New*/
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="container-border">
<i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
<p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
</div>
</div>
</div>
</div>