I created a basic, simple HTML website for our clinics, however, the table content keep falling off the grid/margin (or whatever we call them). The view for ipad, web is alright but on phone is so weird.
Please help me.
I tried many way to have this sorted but it seemed so weird. I try to redo it but same thing keep happen.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Style image */
.img-LHG {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.img-LCG {
padding-top: 0px;
margin-right: auto;
margin-left: auto;
width: 20%;
}
.img-me{
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
float: inherit;
}
h1{
font-family: Arial, "Time new roman";
font-size: 22px;
text-align: center;
line-height: 40px;
}
h2 {
font-family: Arial, "Time new roman";
font-size: 18px;
text-align: center;
line-height: 20px;
}
h3 {
font-family: Arial, "Time new roman";
font-size: 12px;
text-align: center;
line-height: 20px;
}
p {
font-family: Arial;
font-size: 16px;
text-align: center;
line-height: 30px;
text-indent: 30px;
}
table{
width: 100%;
background-color: white;
}
td{
padding: 1px;
}
/* Header/logo Title */
.header {
text-align: center;
padding: -10px;
text-align: center;
background: white;
text-decoration: none;
}
/* Links Title */
.links {
text-align: center;
font-size: 22px;
font-stretch: expanded;
}
/* Style the top navigation bar */
.wrapper{
margin: 0 auto;
width: 100%;
}
nav {
width: 100%;
height:100px;
background-color: #white;
text-align: center;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
line-height: 100px;
background-color: grey:
text-align: center;
padding: -10px;
text-align: center;
}
ul li a {
text-decoration: none;
font-size: 18px;
font-family: Arial;
color: #1e1e1e;
padding: 0 30px;
text-align: center;
padding: -10px;
text-align: center;
}
ul li a:hover {
color: blue;
}
/* Style the navigation bar links */
.navbar a {
font-family: Arial;
font-size: 15px;
text-align: center;
line-height: 30px;
text-align: center;
text-indent: 30px;
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
.side {
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: lightgray;
width: 100%;
padding: 20px;
float: left;
}
/* Footer */
.footer {
padding: 15px;
text-align: center;
background: #ddd;
width: 100%;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.wrapper{
width: 600px;
}
.header{
width: 500px;
}
.wrapper p {
width: 500px;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.row {
flex-direction: column;
}
.wrapper{
width: 300px;
}
.header{
width: 300px;
}
.wrapper p {
width: 300px;
}
}
/* Responsive layout - when the screen is less than 200px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 200px) {
.row {
flex-direction: column;
}
.wrapper{
width: 100px;
}
.header{
width: 100px;
}
.wrapper p {
width: 100px;
}
.table{
size: 20px;
width: calc(100vh - 100%);
}
.table p{
font-size: 10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div> <a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="img/LHG.jpg" alt="LHG"> </div>
<h1>Welcome to London abc</h1>
<p>abc</p>
</div>
<nav>
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
<br>
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/HHC.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHW.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHH.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/OPL.jpg" alt="LHG"></th>
</tr>
</table>
<br>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
</head>
<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=Roboto:wght#500&display=swap" rel="stylesheet">
<style>
* {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
font-family: "Roboto", serif;
box-sizing: border-box;
padding: 0;
}
.header {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-direction: column;
background-color: white;
}
.header img {
width: 60px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.header>*,
.wrapper>* {
padding: 8px;
color: black;
}
.nav-links-wrapper {
width: 100%;
height: auto;
padding: 55px;
background-color: #f1f1f1;
}
ul {
display: flex;
align-items: center;
align-content: center;
justify-content: space-evenly;
}
.content-wrapper>* {
padding: 8px;
}
.table {
width: 100%;
}
.table-wrapper {
margin: 15px;
background: #f1f1f1;
}
.img-LCG {
width: 40px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.footer {
background-color: #ddd;
}
.footer>* {
padding: 8px;
}
</style>
<body>
<div class="header">
<div>
<a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></a>
</div>
<h1>Welcome to London abc</h1>
<p>ABC</p>
</div>
<nav class="nav-links-wrapper">
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<div class="content-wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
</div>
<div class="table-wrapper">
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
</table>
</div>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.
</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
Related
I'm making a news webiste for my school project. I have a logo banner that hide when scrolling, after that there is nav-bar and sidebar which sticks to top after scrolling. But the main content is showing after the sidebar and not alongside it. Sidebar is fixed but the content is scrollable
HTML
`
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
</div>
<div class="sidebar">
<table class="match" >
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
</div>
<div class="main">
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
`
css
.logo {
height: 200px;
display: flex;
justify-content: center;
}
\#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
.sidebar {
width: 250px;
height: 100%;
position: -webkit-sticky;
position: sticky;
top: 60px;
background-color: red;
}
.main{
margin-left: 250px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
}
I tried many things like using a wrapper over sidebar and main content. but it didn't work.
full html https://pastebin.com/5rdiYdMa
full css https://pastebin.com/CHQDPVGY
Please check below working snippet
body{
background-color: #ddd;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
/*------LOGO------------------- */
.logo {
height: 200px;
display: flex;
justify-content: center;
}
/* -----------------NAV BAR-------------------------------*/
/* Add a black background color to the top navigation */
#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #e31e24;
color: white;
}
/*-----------------NAV BAR END-----------------------------*/
.content {
display: flex;
flex-wrap: nowrap;
}
/*-----------------SIDE BAR-----------------------------*/
.sidebar {
width: 250px;
height: 100%;
/* position: absolute; chnage this tro scroll*/
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.match {
margin-top: 10px;
width: 100%;
font-weight: bold;
color: white;
border-collapse: collapse;
border-spacing: 0;
}
.crest {
width: 40px;
height: auto;
padding: 10px;
/* center the image*/
display: block;
margin-left: auto;
margin-right: auto;
}
.teamA {
background-color: #e31e24;
/* border-radius: 20px 0px 0px 0px; */
}
.scoreA {
font-size: 20px;
font-weight: bolder;
background-color: #e31e24;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 20px 0px 0px; */
}
.teamB {
background-color: #0c5d9c;
/* border-radius: 0px 0px 0px 20px; */
}
.scoreB {
font-size: 20px;
font-weight: bolder;
background-color: #0c5d9c;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 0px 20px 0px; */
}
.sidebarnews {
width: 100%;
background-color: #0c5d9c;
height: auto;
padding: 0px;
color: white;
margin-top: 10px;
border-collapse: collapse;
border-spacing: 0;
/* border-radius: 20px 20px 20px 20px; */
}
.sidebarnews thead{
font-size: 20px;
}
.sidebarnews td{
height: 50px;
padding: 10px;
}
.sidebarnews tr:nth-child(even) td{
background-color: #0c5d9c;
}
.sidebarnews tr:nth-child(odd) td{
background-color:#e31e24;
}
/* ------------------------end sidebar-----------------------------*/
.main{
margin-left: 0px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
width: calc(100% - 250px);
}
article{
height: auto;
background-color: white;
padding: 10px;
margin-top: 10px;
/* border-radius: 20px 20px 20px 20px; */
box-shadow: 0px 0px 102px 0px rgba(0,0,0,0.5);
}
article h2{
font-size: 30px;
font-weight: bold;
}
article p{
font-size: 20px;
color: #313131;
}
article img{
width: 100%;
height: auto;
}
/* -----------------when screen width is small------------------- */
#media (max-width: 768px) {
.sidebar {
width: 96%;
height: auto;
position: relative;
padding-left : 10px;
}
.sidebarnews {
display: none;
}
.main {
margin: 0px;
padding: 0px;
}
.logo {
height: 100px;
}
.topnav {
display:none;
}
article h2{
font-size: 25px;
font-weight: bold;
}
article p{
font-size: 15px;
color: #313131;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body class="body">
<!-- create a logo area in header -->
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<!-- create a logo area in header -->
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
<!-- searchbutton-->
</div>
<div class="content">
<!-- sidebar -->
<div class="sidebar">
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/spain.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/england.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="sidebarnews">
<thead>
<tr>
<th>LATEST NEWS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
</tbody>
</table>
</div>
<!-- main content -->
<div class="main">
<article>
<h2 >India's contenders for the 2023 ODI World Cup </h2>
<img src="images/news/team-india.jpg"></img>
<p>With many candidates for the final fifteen, the challenge for the hosts is to get their combinations right between now and the tournament</p>
</article>
<article>
<h2>Kuldeep Sen, Shahbaz to replace Dayal and Jadeja for Bangladesh ODIs </h2>
<img src="images/news/kuldeep.webp"></img>
<p>Pacer Kuldeep Sen and all-rounder Shahbaz Ahmed have been named as replacements for Yash Dayal and Ravindra Jadeja for the three-match ODI series against Bangladesh, the BCCI stated in a release on Wednesday (November 23). </p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
</div>
</body>
</html>
Here, I have Wrapped sidebar and main div into parent div.
Removed margin-left: 250px from main div and added this css:
.content {
display: flex;
flex-wrap: nowrap;
}
I am trying to add a responsive html email to send to the user a link to reset their password. The left padding is not working and I would like it to be responsive like the right side, to have the container always centered.
What line of code is missing inside my inline css for my left padding to perform?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html" />
<title>StackOverflow</title>
<style>
/*
// MARK: Styling
*/
.button {
border-radius: 4px;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
color: white;
padding: 12px 12px;
text-decoration: none;
display: inline-block;
}
.buttonPassword {
margin: auto;
}
#buttonReset {
width: 150px;
margin: auto;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
text-align: center;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
body {
position: relative;
margin: 16;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.container {
display: block;
margin: 16 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 16 auto;
max-width: 580px;
padding: 10px;
}
footer {
width: 100%;
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
}
header {
margin: auto;
width: 100%;
position: relative;
z-index: 100;
top: 0;
}
html, body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 16;
padding: 16;
}
.logo h1 {
font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
display: inline;
}
.logo img {
padding: 16px;
width: 64px;
height: 64px;
vertical-align: middle;
}
p {
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.right h2 {
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
text-align: center;
padding: 1em;
}
/*
// MARK: Screen Sizing
*/
#media only screen and (max-width: 620px) {
.logo h1 {
display: inline;
}
.logo img {
padding: 8px;
width: 48px;
height: 48px;
vertical-align: middle;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
}
/*
// MARK: Colors Declaration
// Light Mode
*/
.button {
background-color: #FF9000;
}
#buttonReset {
background-color: #FF9000;
}
.content {
color: #000;
}
header {
background: linear-gradient(#FF9000, #FFA101);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #FFF;
}
/*
// Dark Mode
*/
#media (prefers-color-scheme: dark) {
.button {
background-color: #FF9A0A;
}
.content {
color: #FFF;
}
header {
background: linear-gradient(#FF9A0A, #FF9000);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #000;
}
}
</style>
</head>
<body>
<span class="preheader">
Email with instructions to reset your password.
</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<header>
<div class="logo">
<h1><img src="/images/logo.png" alt="logo">StackOverflow</h1>
</div>
</header>
<div id="content">
<br>
<p>
Hello,
<br><br>
A request has been received to change the password for your StackOverlfow account.
<br><br><br>
<p>
<center>
<p>
Click the link below to reset your password.
<p>
</p>
</center>
</p>
</p>
<br>
<div class="buttonPassword">
<center>
<a class="button" href="#(link)">
<strong>Reset password</strong>
</a>
</center>
</div>
<br>
<br>
<p>
The link has a validity of one hour. Ask for a new one after this delay.
<br>
If you did not initiate this request, please contact us immediately at contact#stackoverflow.eu and ignore this
email.
</p>
<br>
<p>
Thank you,
<br>
The StackOverlfow Team
</p>
<br>
</div>
<footer>
<div class="right">
<center>
<p>© 2021 StackOverlfow. All right reserved.</p>
</center>
</div>
</footer>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Solution 1:
You can make your container centered for every screen and responsive by just changing your container class margin with (0 auto) which centers the div automatically.
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
Watch the final result on my code_pen
Solution 2:
simply add align=center in your table tag.
Add align="center" on table
<table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">
https://jsfiddle.net/lalji1051/fgw258dr/
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
I'm realizing a new website. I have attached an image of how I would like it to be the base of my home page.
I ask you please what is the best method to create these three colored sections.
The first blue in which to insert the title.
The second light blue with black borders in which to include names.
And the rest light gray where I will add a table containing input boxes and below I will add the text.
I state that I have no problem formatting title, tables, texts, input boxes, etc.
I only can't get the effect of the three sections like in the image. I either tried to use div but I think it's not the best solution because I get unwanted margins.
How would you do?
Thanks :)
.div0 {
background-color: red;
margin-top: 0%;
margin-bottom: 0%;
}
.title1 {
font-family: Arial;
font-weight: normal;
color: black;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: 0%;
text-align: center;
bgcolor: red;
}
.td1 {
text-align: center;
}
.div1 {
background-color: blue;
margin-top: 0%;
margin-bottom: 0%;
}
<BODY>
<div class="div0">
<H1 class="title1">
Title
</H1>
</div>
<div class="div1">
<table width="96%" align="center">
<tr class="tr1">
<td class="td1" width="1/7">
Name1
</td>
<td class="td1" width="1/7">
Name2
</td>
<td class="td1" width="1/7">
Name3
</td>
<td class="td1" width="1/7">
Name4
</td>
<td class="td1" width="1/7">
Name5
</td>
<td class="td1" width="1/7">
Name6
</td>
<td class="td1" width="1/7">
Name7
</td>
</tr>
</table>
</div>
<div class="div2">
</div>
</BODY>
A minimal markup and css for something similar to that, using css grid and flexbox, would be more or less like this:
body {
margin: 0;
font-family: sans-serif;
}
.main {
display: grid;
grid-template-rows: 120px max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navbar__item {
flex-grow: 1;
padding: 6px 12px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
}
.content {
background: silver;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
</article>
</main>
I recommend you do a bit of studying about html5 semantic markup, to help you know where to use each kind of tag in their appropriate context.
It is not good practise using tables for the structure of a page. For a structure you may use display:flex or float:left. The first stylesheet removes differences between browsers and give some good readable default values for many devices. The second stylesheet is your styling (see below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<header id="header">
<h1 class="title1">Title</h1>
</header>
<nav id="nav">
<ul>
<li>Name1</li>
<li>Name2</li>
<li>Name3</li>
<li>Name4</li>
<li>Name5</li>
<li>Name6</li>
<li>Name7</li>
</ul>
</nav>
<main id="main">
<p>Your content</p>
</main>
<footer id="footer">
Footer
</footer>
</body>
</html>
And the css in file "style.css"
html, body {
height: 100%;
}
#page {
max-width: 100%;
min-height: 100%;
padding-top: 0.7%;
}
#header {
background-color: red;
}
#header h1 {
margin: 0;
text-align: center;
}
#nav {
background-color: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav::after {
display: block;
clear: both;
content: "";
}
#nav ul {
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
width: 14.2857%;
padding: 5px 0px 7px 0px;
text-align: center;
}
#main {
min-height: 5em;
padding: 12px 16px;
background-color: silver;
}
#footer {
text-align: center;
background-color: red;
}