I have simple webpage with header and footer.
This is roughly the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("HtmlHeadTags", false)
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#RenderSection("Analytics", false)
#RenderSection("NortonSafe", false)
</head>
<body>
<div id="page-wrapper">
<header>
<div id="header-navbar">
<div id="header-navbar-active">
<a id="websiteLogo" href="/">
<img src="/Content/ankol-logo.png" alt="logo" />
</a>
<div class="clearfix"></div>
</div>
</div>
</header>
<div id="body-content">
#RenderSection("scripts_body", required: false)
#RenderBody()
</div>
<footer>
<p id="footer-links">
about
terms
contact
</p>
<p id="footer-copyright">2017 ©</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
</body>
</html>
with following (relevant) css parts:
#header-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
color: #FFF;
font-family: Arial;
font-size: large;
position: fixed;
z-index: 1000;
margin-bottom: 20px;
border: 1px solid transparent;
}
#footer-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
color: #FFF;
font-family: Arial;
font-size: large;
margin-top: 70px;
padding-top: 5px;
padding-bottom: 5px;
}
Now, while in pc browser both header and consume 100% of the width of the window, in mobile browser the header and the footer consume only part of the width (I have Android, but checked it on several emulators on Edge and all show the same results)
The red box is the header and the green box is the footer.
What might be the reason for that?? can anyone refer me to a good tutorial about the differences between pc browser and mobile browser? thanks.
Try adding this style:
body {
width: 100%;
height: 100%;
margin: 0;
}
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.
It's supposed to look like this:
[1]: https://i.stack.imgur.com/OADQ6.png
How it looks in a browser:
[2]: https://i.stack.imgur.com/uKHV8.png
I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
}
h1 {
font-size: 32px;
margin: 0;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader
Then using margin to adjust the spacing between the h1 and h2.
Thank you, Damien Puaud!
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin: 120px;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: -100px;
width: 360px;
background: #457b9d;
padding: 7px 25px;
border-radius: 5px;
}
#activities {
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<h3>Top three activities to do at Alver</h3>
<img src="images/le5lrhfv5dygds5nzacn.jpg" />
<img src="images/last ned.jpg" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I did some changes on your code. You can do this also like this:
I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
vertical-align: middle;
display: table-cell;
}
.vertical {
display: table;
margin: 0 auto;
}
h1 {
font-size: 32px;
margin: 15px auto;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
width: 350px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div class="vertical">
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I want to go to the about section without needing to link to another .html file. Originally, I tried a href = "About.html" but when clicking on the About Button it just links to that page ignoring the index.html page where all the main content is. Next, I tried a href = #About which did nothing when the about button was pressed.
section{
padding: 39px 0;
}
.container{
width: 100%;
max-width: 1225px;
margin: 0 auto;
padding: 0 24px;
}
.headline-description h5{
color: #ffffff;
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 4px;
}
.Content{
width: 100%;
background-color: bisque;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
.about-button{
text-decoration: none;
color: #225522;
border: 1px solid #225522;
padding: 10px 50px;
font-size: 20px;
transition: all 1s;
}
.the-life-of-a-chef{
background-color: #2255cc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHEF</title>
<link rel="stylesheet" href="asdf.css">
</head>
<body>
<section class="Content" id="Content">
<div class="container">
<!--Website Name-->
<h1 class="headline">C H E F</h1>
<div class="headline-description">
<div class="seperator">
<!--Underline Chef / Cutlery Icon in middle-->
<div class="line line-left"></div>
<div class="cutlery"><i class="fa fa-cutlery"></i></div>
<div class="line line-right"></div>
</div>
<h5>Life of a chef</h5>
About
</div>
</div>
</section>
</body>
</html>
<section class="the-life-of-a-chef">
<div class="container">
<div class="rest-button">
<div class="Lorem-text">
<div class="LifeOfChefHeadline">
<h2 class="AboutHeadline">
<span class="About">About</span>
</h2>
<h1 class="headline headline-gold">The Life Of A Chef</h1>
</div>
Just add id="About" to the section you want to scroll to.
See example here: https://jsfiddle.net/ud3k2ztv/
I cannot keep the footer at the bottom of the page for both desktop and mobile. can someone please go over my code and tell me how to fix it?
The issue is it keeps going back to the center of the page and i am unable to move it down and have it stay there for most browsers and devices.
I have looked around for fixes and there are a few but the ones iv tried just ruin the entire page and push it all out of alignment. I am looking for the smallest amount of code possible to do this i don't want a giant chunk of code for this. i wanna keep it simple. I am new to web development. This is my first website.
This is the index.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
To simplify a bit the problem, say your HTML code looks like this:
<div id="wrapper">
<div class="header">HEADER</div>
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Now that's how the CSS code could look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
width: 100%;
position: relative;
}
.header {
background: blue;
}
.container {
background: red;
padding-bottom: 100px;
}
.footer {
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: yellow;
}
Note that you need to add a bottom padding of exactly the height of your footer (100px here) to your container to make it work.
The magic here happens because you set the min-height of your wrapper to be always equal to 100%, which forces your div to fit the view port height.
And your footer will be at the bottom of the page no matter what.
Hope this helps !
Try this
.footer {position: absolute; bottom: 0; width: 100%;}
I've got a footer that works fine, but when the size of content in the page is shorter than the page size, the footer is rendered below the content not in the bottom of the page, here is an image:
Here is my code (jsbin snippet):
.footer {
position: absolute;
width: 100%;
margin-bottom: 0;
background-color: #2D2D2D;
height: 100px;
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design</p>
</div>
</body>
</html>
What can I do to fix this problem, and always keep the footer in the bottom of the page?
you can use this sticky footer:
html,
body {
height: 100%;
margin: 0
}
.contentBody {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px
}
.contentBody:after {
content: "";
display: block
}
.footer,
.contentBody:after {
height: 100px
}
.footer {
width: 100%;
background-color: #2D2D2D;
text-align: center;
color: white
}
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design
</p>
</div>
</body>
Add this to your css
html, body {
min-height: 100%;
}
and on .footer change
margin-bottom: 0;
to
bottom: 0;
you can use
html,body {
position:absolute;
bottom: 0px;
}