so i've tried to make this website the past two days with my friend. Everyone has been going smooth and we have gotten a lot of help from here. Though we are having a problem about the scaling on the website. When our website is in fullscreen everything is okay but if you have the window open so that it only covers half the monitor there is a white block under the website.
You can see what i mean here: https://gyazo.com/103cf6b312512a2ce9fdac7e23788fdf
Thank you
<style>
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
text-shadow: 2px 2px grey;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
h1 {
font-size: 400%;
color: Plum;
text-shadow: 4px 4px Black;
}
body {
background-image: url("lightning.gif");
background-repeat: no-repeat;
-webkit-transform: rotateX(0);
background-size: cover;
background-position: center center;
}
a:link, a:visited {
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Our Future</title>
</head>
<body background="lightning.gif">
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed>
<center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/>
<br></br>
<br></br>
</picture>
Add min-height: 100vh to body so it extends to the bottom of the window if the content is shorter than the browser viewport. You might also add margin: 0 so the default margin doesn't make the window vertically scroll if the browser is taller than the content.
<style>
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
text-shadow: 2px 2px grey;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
h1 {
font-size: 400%;
color: Plum;
text-shadow: 4px 4px Black;
}
body {
background-image: url("http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg");
background-repeat: no-repeat;
-webkit-transform: rotateX(0);
background-size: cover;
background-position: center center;
min-height: 100vh;
}
a:link, a:visited {
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Our Future</title>
</head>
<body background="lightning.gif">
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed>
<center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/>
<br></br>
<br></br>
</picture>
Related
This question already has answers here:
What is a clearfix?
(10 answers)
background color in css not showing up
(2 answers)
Closed 1 year ago.
There is a logo in the bottom right, which I removed the link because it will not get the image due to where its located. Aside from that, the background behind it and the <div class="green"></div>is supposed to be colored with #104723; but it will not apply it?? Why is that?
I applied the color style as well as the background-color style and nothing happens, even if I include the !important tag.
.green{ color: #104723;}
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
padding: 0px auto;
margin: 0px auto;
height: auto;
min-height: 10%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#MSOZone {
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
line-height: 0;
font-size: 0;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
display: block;
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.ms-wpContentDivSpace {
height: auto !important;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.ms-webpartPage-root{
border-spacing:0px!important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
#contentRow {
width: 101%;
}
.flexbox-container {
margin-top: -30px;
width: 100%;
height: 100%;
}
html, body {margin: 0; height: 100%; overflow-x: hidden !important; overflow-y: hidden !important;}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Projects Landing Page</title>
<link rel="stylesheet" href="css/site.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Active Projects Site</h1>
<h1 class="gold">Going Beyond</h1>
<div class="selector">
<a href="" target="_blank" class="btnselect">USMC Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">Army Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
Contract 5
Contract 6
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">DoD Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
</div>
</div>
</div>
</div>
<div class="green">
<img src="" class="logo"/>
</div>
</body>
<script>
document.getElementsByTagName('title')[0].innerText = "Projects Landing";
</script>
</html>
.green{ color: #104723;}
sets the text color to green. There's no text in that div, so you don't see a change.
.green{ background-color: #104723; }
sets the background color to green, which is probably what you want.
Additionally, if the div takes up no space, none of this will make a difference. You'll want to make sure there's visible content in it too -- an img with no source is not that.
Use backgound-color to apply color in backgrounds.
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
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've tried to make an About Us page for my website but it doesn't seem like I can make the pictures go side by side. And by the way, I have looked at other posts but I don't really understand it.
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
padding: 10px 25px;
text-align: center;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
text-color: black;
text-shadow: 2px 2px grey;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
h1 {
font-size: 400%;
color: Plum;
text-shadow: 4px 4px Black;
}
pre {
font-size: 100%;
color: Plum;
text-shadow: 2px 2px Black;
}
body {
background-image: url("lightning.gif");
background-repeat: no-repeat;
-webkit-transform: rotateX(0);
background-size: cover;
background-position: center center;
min-height: 100vh;
}
a:link,
a:visited {
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
.img-with-text {
text-align: justify;
width: [400px];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
pret {
font-size: 200%;
color: Plum;
text-shadow: 2px 2px Black;
}
<body background="background.jpg">
<form action="selve websiten.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">Frontpage</button>
<button type="button" class="Button">Buy now</button>
</div>
<font size=6>
<pre style="font-family:kenyan coffee;">
Hello, our names is William and Emal.
We've made this website for our own interest and trying to make a future for us.
We are 14 and 15 years of age and, we both live in southern Denmark.
On this website we will mostly be selling steam items, games and etc.
But in the future its possible we are going to be selling other stuff like clothing, cups and etc.</pre>
</font>
<div class="img-with-text">
<img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
<center>
<pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p>
</center>
</div>
<div class="img-with-text">
<img src="william.jpg" alt="William" style="width:400px;height:400px;" />
<center>
<pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p>
</center>
</div>
</body>
Let's try that :
.container_img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
and
<div class="container_img">
<div class="img-with-text">
<img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
<center><pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p></center>
</div>
<div class="img-with-text">
<img src="william.jpg" alt="William" style="width:400px;height:400px;" />
<center><pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p></center>
</div>
</div>
You mean <img src="emal.png"> and <img src="william.jpg"> go side by side?
try put them into inline-block element
<div>
<span class="imgWrapper"><img src="emal.png"></span>
<span class="imgWrapper"><img src="william.jpg"></span>
</div>
<style>
.imgWrapper{
display:inline-block;
width:///;
height:///;
}
.imgWrapper img{
width:100%;
}
</style>
I just recently fixed, thanks to you guys, how to get my header to not overlap my content when the size of page changes. Now, I was told to group my nav bar, with my h1 header, so that they can be in a fixed position together, but when I do that, it messes everything up. So now I'm looking to get some help into making my nav bar stay right under my header in a fixed position without overlapping content. It can be seen when you view my website, in a full page, how I want it. You can also see how the nav bar gets messed up when you change the size of the webpage.
first of my webpage is hosted here: https://knox-enterprise-inc.herokuapp.com/About.html
second here is my code for this page:
<!DOCTYPE html>
<html lang="en-us">
<link rel="stylesheet" href="normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
Home
About
Contact
</div>
</header>
<div class="content">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
header {
height: 220px;
}
#about-header{
height: 100px;
}
#contact-header{
height: 100px;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
/*Nav Menu/Home Page*/
.nav {
position: fixed;
top: 78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
/*About Page*/
.about, .about-description {
text-align: center;
color: white;
font-family: helvetica;
letter-spacing: 2px;
}
.about-description {
padding-top:100px;
}
.about-description p {
font-family: helvetica;
letter-spacing: 2px;
margin:0 auto;
width: 40%;
color:white;
}
.about img {
position: relative;
top: 80px;
margin-left:0 auto;
margin-right:0 auto;
padding-top: 30px;
padding-bottom: 30px;
transform: rotate(90deg);
}
#last{
padding-bottom: 40px;
}
.contact {
text-align:center;
padding-top:125px;
color:white;
font-family: helvetica;
letter-spacing: 2px;
}
#phone-contact img{
border-radius:100%;
}
#email-contact img{
border-radius: 30%;
}
The main problem that your position: fixed is on your <h1> tag instead of your header itself. To rectify this, first shift all of your h1 styling to #about-header instead:
#about-header {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
Next, remove the pre-existing heights of 100px and 220px in #about-header and header respectively. These are set on lines 10 and 7 of style.css respectively.
Also remove top: -40px, and lower the font-size to 0.9em (you may want a media query to modify that font at different sizes).
Finally, you need to make use of z-index so that your header appears on top of any content that it scrolls over:
#about-header {
z-index: 1;
}
Your final #about-header should end up as:
#about-header {
position: fixed;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url(header.jpg);
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
This will cause the sub-header to 'attach` to main header for both desktops and mobiles, and both headers will overlap all other content on all resolutions.
Hope this helps! :)