I define html height:100% and build a red border around, the problem is that the html space is not covering the whole page, if I want to cover the whole page I have to use height:150%. I think Im doing something wrong. The red line is html and yellow is body, all is define at height: 100%. I try with 100vh and min height.The problem with all this is that the footer is getting out of the screen because the distance betwween the footer and the is too big
*,
::before,
::after {
padding: 0;
margin: 0;
border:solid 1px;
}
html {
font-size: 100%;
box-sizing: border-box;
width:100%;
border:solid red 3px;
height: 100%;
}
:root{--color-background:rgb(238,238,238);}
body {
font-family: 'Baskervville', serif;
color: black;
background-color: var(--color-background);
width:800px;
height:100%;
display:block;
margin:0 auto;
align-items:center;
border:solid yellow 3px;
}
img {
width:100px;height:49px;
object-fit: contain;
}
header{
position:fixed;
top:0;
display:grid;grid-template-columns: 250px 1fr;
grid-template-rows: 50px ;
z-index:100;
background-color: var(--color-background);
width:800px;
}
*,
::before,
::after {
padding: 0;
margin: 0;
border:solid 1px;
}
html {
font-size: 100%;
box-sizing: border-box;
width:100%;height:100%;
}
:root{--color-background:rgb(238,238,238);}
body {
font-family: 'Baskervville', serif;
color: black;
background-color: var(--color-background);
width:800px;
height:100%;
display:block;
margin:0 auto;
align-items:center;
border:solid yellow 3px;
}
img {
width:100px;height:49px;
object-fit: contain;
}
header{
position:fixed;
top:0;
display:grid;grid-template-columns: 250px 1fr;
grid-template-rows: 50px ;
z-index:100;
background-color: var(--color-background);
width:800px;
}
#logo{
display:flex;align-items:center;}
#brand{
font-family: 'Raleway', sans-serif;font-size: 2rem;}
nav{
display:flex;justify-content:flex-end;align-items:center;
}
nav ul{
display:flex;align-items:center;list-style-type: none}
.nav-link{
text-decoration: none;color: inherit;
}
nav ul li{margin: auto 2vw;}
form{
display:flex;flex-direction:column;
justify-content:center;align-items:center;}
#email,form input{margin:5px;}
#button-email{background-color:rgb(241,196,15);font-weight:bold;font-size:1.1rem;padding:2px;}
i{text-align: center;color:rgb(255,127,39);font-size:2rem;
}
#product_features{width:100%;}
.feature{
display:grid;
grid-template-columns: 20% 1fr;grid-template-rows: 100px;
align-items:center;
}
main{
height:auto;
max-height:100%;
width:100%;margin:10px auto;align-items:center;position:relative;top:50px;}
#product-list{display:flex;flex-direction:row;
justify-content:space-evenly;}
.product-box{
height:250px;
width:200px;
margin:10px;
border:solid 1px black;
text-align: center;
}
.product-title{
font-family: 'Raleway', sans-serif;
font-size: 1.5rem;font-weight:bold;
background-color:rgb(221,221,221);
padding:10px;}
.product-price{
font-family: 'sans-serif', serif;
font-size: 1.5rem;
padding:5px;}
.product-description{
padding:30px 2px;
margin:auto;
width:180px;height:70px;
}
.product-box button{
padding:5px;
margin:2px;
background-color:rgb(241,196,15);
}
button, #button-email{cursor:pointer;}
iframe{display:block;margin:10px auto;}
footer{
position:relative;
top:75;
width:100%;
margin:1px auto;
background-color:rgb(221,221,221);text-align:right;
font-size:0.9rem;font-weight:600;
}
footer p{font-weight:100;font-size:0.75rem;}
#media only screen and (max-width: 800px) {
header {
grid-template-columns: 250px 1fr;
grid-template-rows: 75px ;
z-index:100;
background-color: var(--color-background);
width:100%;min-width:500px;}
body{min-width:500px;width:100%;padding:7px;
}
main{top:85;}
nav{display:block;}
nav ul{
display:flex;
flex-direction:column;
justify-content:center;align-items:center;
}
footer{top:105;}
#product-list{display:flex;flex-direction:column;
justify-content:space-evenly;
align-items:center;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Product Landing Page" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header id="header">
<div id="logo">
<img id="header-img"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Bike-icon.svg/2560px-Bike-icon.svg.png"
alt="logo of a bike symbol"
loading="lazy"
class="image-1"
width="42.5px"
height="25px"/>
<h1 id="brand">SuperBike</h1>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link bar_button" href="#Features" accesskey="a">Features</a></li>
<li><a class="nav-link bar_button" href="#How_It_Works" accesskey="b">How It Works</a></li>
<li><a class="nav-link bar_button" href="#Pricing" accesskey="b">Pricing</a></li>
</nav>
</header>
<main>
<form method="post" action='https://www.freecodecamp.com/email-submit'>
<h2>We have the better bikes of the market</h2>
<label for="email"><input id="email" name="email" type="email" required placeholder="Enter your email address" /></label>
<input type="submit" value="GET STARTED" id="button-email" />
</form>
<div id="product_features">
<div class="feature">
<i class="fa fa-bicycle" ></i>
<div class="product_features_text">
<h3>Premium Materials</h3>
<p>Our bikes are made of high quality materials. We only use top of the line brands.</p></div>
</div>
<div class="feature"><i class="fa fa-truck" style="font-size:2rem"></i>
<div class="product_features_text">
<h3>Fast Shipping</h3>
<p>We make sure you recieve your bike as soon as we have finished making it. We also provide free returns if you are not satisfied.</p></div></div>
<div class="feature"><i class="fa fa-battery-full" style="font-size:2rem, color:orange"></i>
<div class="product_features_text">
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults.</p>
</div>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nuqxkz_eo8Y" title="Where Should I Ride?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div id="product-list">
<div class="product-box">
<p class="product-title">picoBike</p>
<p class="product-price">$500</p>
<p class="product-description">Lorem ipsum. Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.</p>
<button type="button">SELECT</button>
</div>
<div class="product-box">
<p class="product-title">Mega Bike</p>
<p class="product-price">$700</p>
<p class="product-description">Lorem ipsum. Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.</p>
<button type="button">SELECT</button>
</div>
<div class="product-box">
<p class="product-title">Giga Bike</p>
<p class="product-price">$1200</p>
<p class="product-description">Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.
Lorem ipsum.
</p>
<button type="button">SELECT</button>
</div>
</div>
<footer>
Privacy Terms
Contact
<p>Copyright 2016, SuperBike</p>
</footer>
</main>
</body>
</html>
I want to know if is normal that my page is getting cutted
I found a better solution, at the HTML section in the Css file I define height:100% or 100vh this limited the size of my page whole page to the size of the screen when I delete this I could make my website without any limit, I know is kind of dumb, but I'm rooky. Thanks to everyone.
Try this:
*,
::before,
::after {
padding: 0;
margin: 0;
border:solid 1px;
}
html {
font-size: 100%;
box-sizing: border-box;
width:100%;height:100%;
}
:root{--color-background:rgb(238,238,238);}
body {
font-family: 'Baskervville', serif;
color: black;
background-color: var(--color-background);
width:800px;
display:block;
margin:0 auto;
align-items:center;
border:solid yellow 3px;
height: -webkit-fill-available;
}
img {
width:100px;height:49px;
object-fit: contain;
}
header{
max-height: 20vh;
position:fixed;
top:0;
display:grid;grid-template-columns: 250px 1fr;
grid-template-rows: 50px ;
z-index:100;
background-color: var(--color-background);
width:800px;
}
#logo{
display:flex;align-items:center;}
#brand{
font-family: 'Raleway', sans-serif;font-size: 2rem;}
nav{
display:flex;justify-content:flex-end;align-items:center;
}
nav ul{
display:flex;align-items:center;list-style-type: none}
.nav-link{
text-decoration: none;color: inherit;
}
nav ul li{margin: auto 2vw;}
form{
display:flex;flex-direction:column;
justify-content:center;align-items:center;}
#email,form input{margin:5px;}
#button-email{background-color:rgb(241,196,15);font-weight:bold;
font-size:1.1rem;padding:2px;}
i{text-align: center;color:rgb(255,127,39);font-size:2rem;
}
.feature{
display:grid;
grid-template-columns: 20% 1fr;grid-template-rows: 100px;
align-items:center;
}
main{
height: auto;
max-height:80vh;
width:100%;
margin:10px 0 0 0;
align-items: center;
position: relative;
top:50px;
overflow: scroll;
overflow-x: auto;
}
#product-list{display:flex;flex-direction:row;
justify-content:space-evenly;
padding-bottom: 20px;
}
.product-box{
height:250px;
width:200px;
margin:10px;
border:solid 1px black;
text-align: center;
}
.product-title{
font-family: 'Raleway', sans-serif;
font-size: 1.5rem;font-weight:bold;
background-color:rgb(221,221,221);
padding:10px;}
.product-price{
font-family: 'sans-serif', serif;
font-size: 1.5rem;
padding:5px;}
.product-description{
padding:30px 2px;
margin:auto;
width:180px;height:70px;
}
.product-box button{
padding:5px;
margin:2px;
background-color:rgb(241,196,15);
}
button, #button-email{cursor:pointer;}
iframe{display:block;margin:10px auto;}
footer{
position: fixed;
bottom: 0;
width: 800px;
margin:1px auto;
background-color: rgb(221,221,221);
text-align: right;
font-size:0.9rem;
font-weight:600;
}
footer p{font-weight:100;font-size:0.75rem;}
#media only screen and (max-width: 800px) {
header {
grid-template-columns: 250px 1fr;
grid-template-rows: 75px ;
z-index:100;
background-color: var(--color-background);
width:100vw;
}
footer{
width: -webkit-fill-available;
}
body{
width: -webkit-fill-available;
padding:7px;
}
iframe {
width: -webkit-fill-available;
}
nav{display:block;}
nav ul{
display:flex;
flex-direction:column;
justify-content:center;align-items:center;
}
#product-list{display:flex;flex-direction:column;
justify-content:space-evenly;
align-items:center;}
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Product Landing Page" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet"/>
</head>
<body>
<header id="header">
<div id="logo">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Bike-icon.svg/2560px-Bike-icon.svg.png" alt="logo of a bike symbol" loading="lazy" class="image-1" width="42.5px" height="25px"/>
<h1 id="brand">SuperBike</h1>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link bar_button" href="#Features" accesskey="a">Features</a></li>
<li><a class="nav-link bar_button" href="#How_It_Works" accesskey="b">How It Works</a></li>
<li><a class="nav-link bar_button" href="#Pricing" accesskey="b">Pricing</a></li>
</nav>
</header>
<main>
<form method="post" action='https://www.freecodecamp.com/email-submit'>
<h2>We have the better bikes of the market</h2>
<label for="email"><input id="email" name="email" type="email" required placeholder="Enter your email address" /></label>
<input type="submit" value="GET STARTED" id="button-email" />
</form>
<div id="product_features">
<div class="feature">
<i class="fa fa-bicycle" ></i>
<div class="product_features_text">
<h3>Premium Materials</h3>
<p>Our bikes are made of high quality materials. We only use top of the line brands.</p>
</div>
</div>
<div class="feature"><i class="fa fa-truck" style="font-size:2rem"></i>
<div class="product_features_text">
<h3>Fast Shipping</h3>
<p>We make sure you recieve your bike as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="feature">
<i class="fa fa-battery-full" style="font-size:2rem, color:orange"></i>
<div class="product_features_text">
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults.</p>
</div>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nuqxkz_eo8Y" title="Where Should I Ride?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div id="product-list">
<div class="product-box">
<p class="product-title">picoBike</p>
<p class="product-price">$500</p>
<p class="product-description">Lorem ipsum. Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.</p>
<button type="button">SELECT</button>
</div>
<div class="product-box">
<p class="product-title">Mega Bike</p>
<p class="product-price">$700</p>
<p class="product-description">Lorem ipsum. Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.</p>
<button type="button">SELECT</button>
</div>
<div class="product-box">
<p class="product-title">Giga Bike</p>
<p class="product-price">$1200</p>
<p class="product-description">Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.Lorem ipsum.
Lorem ipsum.
</p>
<button type="button">SELECT</button>
</div>
</div>
</main>
<footer>
Privacy Terms
Contact
<p>Copyright 2016, SuperBike</p>
</footer>
</body>
You've to close the body tag after you've typed the whole page of yours. With that, the border will cover your whole page.
Related
I made a box containing some information. In this box I used flexbox to position the text and items. The thing is, on the right side I have a up and downside arrow. When making the browser smaller I want that the up and downside arrows will be place below "software engineer" only this does not happen.
I tried using:
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
and flex-grow for this. Please check jsfiddle:
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.profile-box-wrapper{
width:500px;
height:150px;
background:rgb(253, 253, 253);
border-radius:4px;
margin: 10px 10px;
display:flex;
flex-direction: column;
}
.profile-box-header img{
width:70px;
height:70px;
margin:5px 0 0 10px;
}
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
.profile-name{
margin-left:10px;
flex-grow:1;
}
.profile-name h3{
}
.profile-right {
margin:0;
text-align:right;
margin-right:5px;
flex-grow:2;
}
.profile-box-content{
margin:15px 0 0 10px;
}
.profile-right img{
width:25px;
height:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>A cool dude</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Can someone please explain me how to use flexbox to get items under each other when making a browser smaller. Thanks.
You need to change the Flex Direction and set it with the help of the Media Queries, i edited your code check this solution :
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
padding: 10px;
}
.profile-box-wrapper{
width:500px;
background:rgb(253, 253, 253);
border-radius:4px;
padding: 10px;
}
.profile-box-header{
display:flex;
align-items: center
}
.profile-box-header img{
width:70px;
height:70px;
}
.profile-name{
margin-left:10px;
}
.profile-right {
height:70px;
margin-left:auto;
text-align:right;
}
.profile-right img{
width:25px;
height:25px;
}
.profile-box-content{
margin-top:15px;
}
#media(max-width: 520px){
.profile-box-wrapper{
width: calc(100% - 20px);
}
.profile-box-header{
flex-direction: column;
}
.profile-right {
height: inherit;
margin-left: inherit;
margin-top: 10px;
text-align: center;
}
.profile-box-content{
text-align:center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Answer of question 2 :
p{
font-size: 80%;
opacity: .4;
}
div {
border: 5px solid green;
margin: 5px;
padding: 5px;
}
.container {
display: flex;
border-color: blue;
}
.container > div {
border-color: red;
}
.line {
position: relative;
}
.line:before{
content: "";
position: absolute;
margin: auto;
width: 100%;
height: 2px;
top: 0;
bottom: 0;
left: 0;
background-color: grey;
}
<p>// In this state you can see that all children has the same height , no problem</p>
<div class="container">
<div>child 1</div>
<div>child 2</div>
<div>
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's make the height of children diffrent, this will look messy because they aren't centred at the same line</p>
<div class="container line">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's centre the children at the same line this will be perfect add to our parent container <b>align-items: center;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Put the last child to the right using <b>margin-left: auto;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;margin-left: auto;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now our <b>child 3</b> should be at the top of his parent so , it should take the max height of his parent but our parent has default height so it will take the max height of his children , in this state <b>child 2</b> has the max height, so we will set the height of <b>child 3</b> at same height or heigher then <b>child 2</b> wich is in this state <b> child 2 height > 120px</b> </p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:120px; margin-left: auto;">
<div>child of child 3</div>
</div>
</div>
If you want only to wrap the icons without media queries you can try this
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.flex-wrapper{
display:flex;
flex-wrap:wrap;
flex-grow: 1 ;
}
.profile-box-wrapper{
max-width:500px;
height:150px;
background:rgb(253, 253, 253);
border-radius:4px;
margin: 10px 10px;
display:flex;
flex-direction: column;
}
.profile-box-header img{
width:70px;
height:70px;
margin:5px 0 0 10px;
}
.profile-box-header{
display:flex;
}
.profile-name{
margin-left:10px;
flex-grow:1;
}
.profile-name h3{
}
.profile-right {
margin:0;
text-align:right;
margin-right:5px;
}
.profile-box-content{
margin:15px 0 0 10px;
}
.profile-right img{
width:25px;
height:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="flex-wrapper">
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
changed width to max-width in .profile-box-wrapper so the profile-box-wrapper can become smaller than 500px.
added .flex-wrapper around profile-name and profile-right so the icons will be under profile-name when they wrap.
.flex-wrapper is a flexbox, added flex-wrap:wrap; so the icons can wrap.
flex-grow: 1; is used so .flex-wrapper takes the remaining width.
check out this guide for css flex A Complete Guide to Flexbox
Here's a version that scales.
body {
margin: 0;
background: #eee;
font-family: verdana;
}
img {
max-width: 100%;
display: inline-block;
}
.users {
position: relative;
box-sizing: border-box;
min-height: 1px;
vertical-align: top;
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
.users-list-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
position: relative;
float: none;
}
.users-list-card {
background: #fff;
width: calc(33.3% - 60px);
text-align: left;
position: relative;
padding: 10px;
margin: 20px;
}
#media (min-width: 768px) and (max-width: 960px) {
.users-list-card {
width: calc(50% - 60px);
}
}
#media (max-width: 767px) {
.users-list-card {
width: 100%;
display: block;
}
}
.users-list-card-header {
display: flex;
}
.users-list-card-header h2 {
margin: 0;
}
.users-list-card-header img {
width: 50px;
height: 50px;
margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="user-list">
<div class="users-list-wrapper">
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I know I'm not very good at html5 but I am actively learning.I've been having trouble to make my website responsive on mobile browser. I was able to make it responsive on web browser on a computer.
Can anyone tell me how can I made it responsive and explain to me how that function works?
Thank you so much!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cayla.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
</head>
<body>
<div class="img1">
<div class="one">
<div style="width:60%;background-color:#D8D8D8;margin-bottom:3%;">
<!-- <svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="612px" viewBox="0 0 792 612" style="" xml:space="preserve">-->
<svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FDFDFD;}
.st1{fill:none;stroke:#12100B;stroke-width:0.75;}
</style>
<path class="st1 GIfDAJwL_0" d="M864,204"></path>
<path class="st0 GIfDAJwL_1" d="M426.357,291.773c-0.041-12.345-1.707-22.665-4.352-34.209c-8.392,4.478-13.649,40.339-13.631,49.989
c0.034,17.964-1.063,41.607,6.963,56.455c8.124,15.025,19.178,4.285,24.85-7.853c5.971-12.777,7.685-22.798,7.881-37.559
c-1.444,5.259-5.496,8.714-3.049,12.917c1.016-4.619,3.755-6.121,3.922-10.898c-0.027,4.104,0.264,7.119,2.795,9.768
c1.506-5.469,3.623-13.664,3.172-17.732c-0.113,3.707-0.037,7.516,0.22,11.143c3.36-6.947,4.348-16.811,6.454-24.181
c3.606,53.796,0.22,113.64,0.22,166.148c1.091-17.07-3.938-34.533-3.938-51.979c-0.004-25.875,1.787-50.906,3.004-76.584
c1.389-29.324,11.799-55.735,15.406-85.365c3.484-28.619,3.25-56.957,3.25-85.942c0,20.127-3.17,40.157-3.85,60.265
c-0.672,19.88-0.455,43.321,10.324,60.186c4.844,7.576,9.213,12.045,16.535,5.148c3.479-3.277,4.025-6.196,4.052-11.49
c-0.541,3.818-2.303,8.03-1.189,11.883c0.229-3.271-0.647-7.569,1.188-10.189c0.972,3.261,0.131,11.245,5.246,6.779
c3.205-2.798,8.143-3.789,12.846-2.784c2.629,0.561,16.42,6.282,18.992,7.717c13.344,7.443,38.292-0.675,52.428-1.938
c19.37-1.731,18.325-3.814,37.57-6.666"></path>
<style>.GIfDAJwL_0{stroke-dasharray:0 2;stroke-dashoffset:1;animation:GIfDAJwL_draw_0 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}.GIfDAJwL_1{stroke-dasharray:1094 1096;stroke-dashoffset:1095;animation:GIfDAJwL_draw_1 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}#keyframes GIfDAJwL_draw{100%{stroke-dashoffset:0;}}#keyframes GIfDAJwL_fade{0%{stroke-opacity:1;}95.77464788732394%{stroke-opacity:1;}100%{stroke-opacity:0;}}#keyframes GIfDAJwL_draw_0{7.042253521126761%{stroke-dashoffset: 1}36.15023474178404%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}#keyframes GIfDAJwL_draw_1{21.596244131455396%{stroke-dashoffset: 1095}50.70422535211267%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}
</style></svg>
<span class="border">
</span>
</div>
</div>
<section class="section sec1">
<h1>About Me</h1>
<hr size="1" color="#666" align="center" >
<p>
Lorem ipsum dolor sit amet, enim accumsan vim ut, unum noluisse phaedrum ea duo, ne quo voluptaria argumentum. Mel volumus adipisci ne. Eu eos dolorem salutandi euripidis. Vix perfecto deseruisse ex, option scriptorem an ius.
</p>
</section>
<div class="img2">
<div class="txt">
<span class="border trans">
</span>
</div>
</div>
<section class="section sec2">
<h2>Portfolio</h2>
<hr size="1" color="#FFFFFF" align="center">
<div class="row">
<div class="column">
<img src="aki0.png" alt="aki">
</div>
<div class="column">
<video controls>
<source src="OpenVertices.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Lancer.png" alt="Lancer">
</div>
<div class="column">
<img src="Naturalthinker.jpg" alt="NT">
</div>
<div class="column">
<video controls>
<source src="Circleoflife.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Essentiel.png" alt="Es">
</div>
<div class="column">
<img src="Japan.png" alt="Es">
</div>
<div class="column">
<img src="black.jpg" alt="Es">
</div>
<div class="column">
<img src="content.jpg" alt="Es">
</div>
<div class="column">
<img src="icons.jpg" alt="Es">
</div>
<div class="column">
<img src="ss15.png" alt="Es">
</div>
<div class="column">
<img src="mens.jpg" alt="Es">
</div>
</section>
<div class="img3">
</div>
</div>
<section class="section sec3">
<h1> Contact Me</h1>
<hr size="1" color="#666" align="center">
<ul class="fa-ul">
<li><i class="far fa-envelope fa-2x"></i>
<div>info#hello.com</div>
</li>
<li><i class="fas fa-mobile-alt fa-2x"></i>
<div>514.123.4567</div>
</li>
<li><i class="fas fa-map-marker-alt fa-2x"></i></i>
<div>Montreal, Canada.</div>
</li>
</ul>
</section>
<section class="section sec4">
<h3>
Copyright #2017.
</h3>
</section>
</body>
</html>
body, html
{
height: 100%;
margin: 0;
color: #666;
}
.img1,.img2,.img3
{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.img1
{
/*background-image: url('../Images/background.jpg');*/
background-color: #D8D8D8;
min-height:100%;
}
svg.sign {
align-items: center;
margin-top: 50%;
margin-left: 50%;
margin-right:200%;
margin-bottom: 50%;
}
.img2
{
background-image: url('../color.jpg');
min-height:400px;
opacity:0.70;
}
.img3
{
background-image: url('../me.jpg');
min-height:400px;
opacity:0.70;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.sec1
{
background-color: #f4f4f4;
color: #666;
min-height:200px;
min-width: 300px;
align-content: center;
margin-left: auto;
margin-right: auto;
}
.sec2
{
background-color: #282e34;
color: #ddd;
min-height:2250px;
}
.sec3{
background-color: #f4f4f4;
color: #666;
min-height:200px;
align-content: center;
}
.sec4{
background-color: #f4f4f4;
color: #666;
min-height:20px;
align-content: center;
}
h1{
text-transform: uppercase;
font-family:futurastf;
font-size:1.25em;
font-family:sans-serif;
letter-spacing: 3px;
color:#666;
text-align: center;
}
h2{
text-transform: uppercase;
font-family:futurastf;
font-size:18px;
font-family:sans-serif;
letter-spacing: 3px;
color:#FFFFFF;
text-align: center;
}
h3{
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
align-content: center;
margin-right: auto;
margin-left:auto;
text-align: center;
}
p{
overflow:auto;
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
line-height: 30px;
text-align:center;
margin-right: auto;
margin-left:auto;
}
.txt
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.txt .border
{
background-color: #111;
color: #fff;
padding: 20px;
}
.txt .border.trans{
background-color: transparent;
}
/* Three image containers (use 25% for four, and 50% for two, etc)*/
.column {
display:inline-block;
float: center;
width: 48%;
padding: 5px;
}
/* NEW */
.column img{
max-width:100%;
height:auto;
}
/* NEW */
.column video{
max-width:100%;
height:auto;
}
hr{
width: 40%;
}
.fa-ul{
list-style-type: none;
padding-left: 0;
margin-left:0;
}
/* NEW */
#media only screen and (max-width: 900px) {
.column {
display:inline-block;
float: center;
width: 100%;
padding: 5px;
}
hr{
width: 100%;
}
.sec2
{
background-color: #282e34;
color: #ddd;
min-height:900px;
}
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.img-wrapper {
width: 49.75%;
}
.img-wrapper2 {
margin-left:.5%;
}
.img-wrapper3 {
margin-top:.5%;
}
.img-wrapper4 {
margin-top:.5%;
margin-left:.5%;
}
.img-wrapper5 {
width: 49.75%;
}
.img-wrapper6 {
width: 49.75%;
}
.img-wrapper7 {
width: 49.75%;
}
ul {
list-style-type: none;
color: #666;
margin-left: auto;
margin-right: auto;
align-content: center;
}
li {
clear:both;
}
li i{
font-size:40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
li div{
float:center;
margin-left: auto;
margin-right: auto;
line-height: 60px;
text-align: center;
}
My recommendation is, use the css framework like bootstrap.
https://getbootstrap.com/docs/4.1/getting-started/introduction/
or
If you do not want to use framework, can use media queries.
/* Mobiles - 320x480px */
#media screen and (max-width: 480px) {
h1{
color: blue;
}
}
/* Tablets - 768x1024px */
#media screen and (max-width: 1024px) {
h1{
color: red;
}
}
And try to check responsive view using
http://ami.responsivedesign.is/
You can use two things to make website responsive.
Bootstrap Framework to make it responsive for all big and small
devices. See their documentation Link
Media Queries Link
You can make the website responsive by using screen Media queries and add meta tag in the head of the html document.
media queries works like this: you add the screen size and then the styles inside of it
#media only screen and (max-width: **your screen size here**) {
div {
color: green;
}
}
you can read more about it here:
Responsive Design
Using Media Queries
some Screen sizes
I'm having a couple of bugs with my layout and was wondering if anyone could help me out. I need to have the white space removed above the nav bar and below the footer. Secondly, I'd like to have all of the footer elements on the same line, instead of being slightly staggered. I've attached a picture of the site, as well as the HTML and CSS that goes with it. Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; padding:10px; border-radius:20px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
</head>
<body>
<header>
<div id="header-content">
<img src="../website/images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:20px;" />
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<nav>
<ul>
<li>About</li>
<li>DIY Projects</li>
<li>Dad Tech</li>
<li>Kid Stuff</li>
<li>Ask a Dad</li>
<li>Dad Jokes</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<img src="../website/images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<img src="../website/images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<img src="../website/images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Activity / Meal of the Week</h1>
<img src="../website/images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<img src="../website/images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<img src="../website/images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;">
</div>
</div><!-- end container -->
</main>
<footer>
<div id="footer">
<p class="left">
21stcenturydad#gmail.com
<p class="right">
<a href="https://www.facebook.com/">
<img src="../website/images/Facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../website/images/Snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../website/images/Instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div>
</footer>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Kanit:200,300,500');
body {
background-color: #FFF;
background-image:url(../website/images/background.png);
font-size: 13px;
font-family: 'Kanit', sans-serif;
font-weight: 200;
color: #363636;
}
p {
line-height: 140%;
}
header {
background-color: #D1E751;
width: 960px;
z-index:1000;
margin-right:auto;
margin-left:auto;
}
#header-content {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 130px;
position:relative;
left:0px;
top:0px;
}
nav {
background-color: #26ADE4;
color: #fff;
width: 100%;
text-align: center;
font-size: 16px;
font-weight:bold;
}
nav ul {
display: block;
padding:14px 0 14px;
}
nav li {
display: inline-block;
}
nav a {
padding: 5px 30px 5px;
}
nav a:link {
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #D1E751;
color: #FFF;
}
nav a:visited{color:#FFF;}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
padding-top:60px;
}
.container{width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;}
.blocks{display:inline-block;
width:300px;
padding-left:5px;
padding-right:5px;
}
h1 {
font-size: 20px;
color: #26ADE4;
font-weight: 500;
margin-bottom: 2px;
}
h2 {
font-weight:500;
font-size: 60px;
color: #fff;
position:absolute;
left:-2px;
bottom:-9px;
}
footer {
background-color: #D1E751;
color: #fff;
font-size: 10px;
padding: 12px;
font-weight:bold;
clear: both;
}
.left{text-align:left;
font-size:14px;
float:left;
padding-top:8px;
padding-bottom:8px;
}
.right{float:right;
text-align:right;
}
.centered{text-align:center;
font-size:14px;
padding-top:8px;
padding-bottom:8px;
max-width:300px;
margin-left:auto;
margin-right:auto;}
Screenshot
take out margin:auto to the body to get rid of surrounding whitespace
For a simple footer, you can position the element fixed to the screen
For elements in the footer, You can use a display flex property on the div with id footer
CSS rules below and pen is here
body {
margin: auto;
}
.left,
right,
.centered {
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/