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)
edit: Thanks to you awesome people the webpage finally looks awesome!
I couldn't choose the best answer because all of them helped me a lot :p
here's the result if anyone's interested http://i.imgur.com/RABpT9u.png
I'm trying to make a simple website with a site "logo" on the top, a navbar on the left, content in the center and some footer at the bottom.
At the same time I'm trying to make it responsive, which, obviously isn't a job for me yet :D
I'm pretty new to html and css so any advice would help a ton!
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
max-width:100%;
background-color:grey;
border: 2px solid green;
}
footer {
width:100%;
margin-top:auto;
border: 2px dashed red;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
<footer>
<h1>footer</h1>
</footer>
</main>
</body>
</html>
You can try use;
width:100vw;
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
background-color:grey;
border: 2px solid green;
width:86vw;
}
footer {
position: absolute;
width:100%;
border: 2px dashed red;
bottom:0;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
I'm not sure if this is exactly what you're looking for, but have you tried using the flex property?
try to have a look here, see if this is what you're looking for https://jsfiddle.net/jg2sjrL5/4/
<div id="container">
<div id="navigation">navigation</div>
<div id="content"></p>content</p></p>content</p></p>content</p>
</p>content</p></div>
</div>
<div id="footer">footer</div>
html, body {width: 100vw, height: 100vh}
#container {
display:flex;
align-items: center;
flex-direction:row;}
#main, #footer {
width: 100vw;
}
#main{
display: flex;
flex-direction: row;
}
#content {
background-color:red;
width: 80vw;
}
#navigation {
background-color:white;
width: 20vw;
}
#footer {
background-color:green;
}
you can eventually set the height of the different elements with vh to make them fit your page
Here's some guidance. Hope it helps.
html {
box-sizing: border-box; /* 1 */
height: 100%; /* 2 */
}
*, *:before, *:after {
box-sizing: inherit; /* 1 */
}
body {
margin: 0; /* 3 */
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
border: 0.5vw ridge #888;
background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
text-align: center;
font-size: 1.4vw;
}
header h1, h2 {
color: #DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main { /* 4 */
flex: 1; /* consume remaining space in column */
display: flex;
background-color: #DDD;
border: 2px solid #F0F;
}
nav {
background: linear-gradient(90deg, #5BF, #29E);
border: 0.5vw ridge #888;
}
nav ul {
margin: 0;
padding: 0.5vw;
list-style-type: none;
}
nav li {
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border: 0.2vw outset white;
border-radius: 0.5vw;
background: linear-gradient(180deg, #AAA 60%, #777);
}
nav a {
margin: 0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration: none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
flex: 1; /* consume remaining space in row */
background-color: grey;
border: 2px solid green;
}
footer {
border: 2px dashed red;
}
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome</li>
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<div id="content">
<h1>Content Content Content</h1>
<h1>Content Content Content</h1>
</div>
</main>
<footer>
<h1>footer</h1>
</footer>
https://css-tricks.com/box-sizing/
https://stackoverflow.com/a/31728799/3597276
https://stackoverflow.com/a/36219088/3597276
https://stackoverflow.com/a/35820454/3597276
Note that in your original code you made use of CSS positioning and floats, and the HTML <center> element. You don't need position: absolute, position: relative or float: left to make this layout work when you have flexbox. And the <center> element is being phased out. You shouldn't use it and you don't need it.
In this snippet, you can see the code.
I want to put mid_left and mid_right in the same div tag mid. but I can' position mid_right right, either out of the mid tag or not in the same level as mid_left. I tried float:left and display:inline-block, but none of them are working, how could I fix it?
/* CSS Document */
body {
margin:0 auto;
padding: 0;
background: url(../img/7_092641_2_meitu_1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 15px;
color: #E2E2E2;
line-height: 24px;
font-family: '微软雅黑';
}
.logo {
width: 400px;
hight: 380px;
margin: -610px auto 0 -40px;
position:fixed;
}
.wrapper {
width: 1100px;
height: auto !important;
margin: 0 auto;
background-color:#F7F7F7;
}
.header {
width: 1050px;
height: 100px;
margin: 0 auto;
border: 1px;
/*background-image: url(../../../Stockholm-Sweden.jpg);*/
}
.header h1 {
font-size: 40px;
font-weight: 900;
font-family: '仿宋_GB2312';
margin: 0 auto;
padding-top: 18px;
}
/*------------------ NAV ------------------------*/
.container {
width: 1090px;
height:50x;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 50px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
}
ul.menu li {
list-style: none;
float:left;
height: 49px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 49px;
font-size: medium;
font-weight: bold;
color: #FFF;
font-family: '微软雅黑';
text-decoration:none;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
/*------------ slider ---------------*/
.slider_1 {
height: 400px;
width: 1090px;
margin: 20px auto 0 auto;
overflow: hidden;
}
/*----------- mid ------------------*/
.mid {
height:auto;
width:1000px;
margin:0 auto;
font-family:'仿宋_GB2312';
border: solid 1px #CCCCCC;
}
.mid a {
text-decoration: none;
}
.mid_span {
height:45px;
line-height:45px;
color:#004276;
font-size:18px;
font-weight:bold;
margin-right:6px;
}
.mid_left {
height: auto;
width: 490px;
margin: 0 auto 0 5px;
border-right: dashed #F2F2F2;
diaplay: inline-block;
}
.mid_right {
height: auto;
width: 480px;
margin: 0 10px 0 auto;
}
.mid_left_1 {
width: 100%;
height: auto;
margin: 0 auto;
}
.date {
color: #CECECE;
line-height:22px;
font-size: 12px;
}
.detail {
color:#BA2636;
}
.brif {
color:#454545;
line-height:22px;
margin-top: -5px;
}
.tittle {
height:80px;
width:1050px;
margin: 20px auto 10px auto;
text-align: center;
}
.tittle h2 {
font-family:'微软雅黑';
font-size: 24px;
font-weight: bold;
color: #292c2f;
display: inline-block;
}
.tittle_line{
background: url(../img/title_line.png) no-repeat;
width: 350px;
height: 8px;
margin: 0 10px 5px 10px;
display: inline-block;
}
footer {
width:1050px;
height:auto;
margin: 0 auto;
posion: absolute;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 10px 25px 5px 25px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
margin-left: 40px;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 12px;
margin-bottom: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div><!-- header -->
<div class="container">
<ul class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!--navigation -->
<div class="tittle">
<div class="tittle_line"></div>
<h2>EXAMPLE</h2><div class="tittle_line"></div>
</div><!-- tittle -->
<div class="mid">
<div class="mid_left">
<div class="mid_left_1">
<a target="_blank" href="#" title="投资移民瑞典能享受欧盟待遇吗？" class="mid_span">投资移民瑞典能享受欧盟待遇吗？</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">投资移民瑞典能享受欧盟待遇吗？获得欧盟成员国的国籍，也意味着被整个欧盟接纳，直接成为欧盟公民，享受整个欧盟范围内的各种优待，包括经商，接受教育，找工作，都能够享受欧盟优先的原则。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="一步到位获得瑞典移民身份享福利" class="mid_span">一步到位获得瑞典移民身份享福利</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">一步到位获得瑞典移民身份享福利。瑞典移民者在获得身份的同时，就能即刻享受福利，而一些国家规定则没有这么宽松，比如澳洲商业移民，在获得4年期的临时商务签证的期间，必须成功经营企业才能进一步申请转为移民，而...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="瑞典移民福利“一辈子都很幸福”" class="mid_span">瑞典移民福利“一辈子都很幸福”</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">瑞典移民申请材料有哪些，如果您计划到瑞典与您的丈夫、妻子、同居伴侣或者您的孩子或者其他近亲属长期居住，那么就应当了解申请居留许可之前要准备哪些申请材料。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="欧洲各国移民福利大比拼 " class="mid_span">欧洲各国移民福利大比拼 </a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">欧洲各国移民福利大比拼。2015年，欧洲移民政策将更加成熟稳定，也将受到市场更广泛的认可。下面就随小编来看看欧洲各国移民福利吧！看看有没有适合您的那一款。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
</div><!--mid left -->
<div class="mid_right">
23t2erse452
</div>
</div><!--mid-->
<footer class="footer-distributed"><!--footer-->
<div class="footer-left">
<h3>Feito<span>AB</span></h3>
<p class="footer-company-name">Feito AB © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Mejerigatan 29</span> Göteborg</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
</div>
<!--
<div class="footer-right">
<div>
<i class="fa fa-envelope"></i>
<p>support#company.com</p>
</div>
</div>
-->
<div class="footer-right">
<div class="footer-icons">
<a href="#">
<img src="img/footer/1.jpg" alt="facebook">
</a>
<img src="img/footer/2.jpg" alt="facebook">
<img src="img/footer/3.jpg" alt="linkedin">
<img src="img/footer/4.jpg" alt="mewo">
</div>
</div>
</footer><!--footer-->
</div><!--wrapper-->
</body>
</html>
set .mid position to relative, and mid_left and mid_right position to absolute. Then mid_left and mid_right will stack on top of each other, with mid_right being on top since it appears later in the HTML.
Make sure you understand how the box model works.
http://www.w3schools.com/css/css_boxmodel.asp
When you add attributes like border and padding, it effectively adds to the width of your box.
So, having a container div with 1000px, you need to make sure of 2 things:
If you want to have 2 divs inside that container with 500px width (one left, one right) ensure that your width + border + padding does not exceed the 500px limit.
When using inline-blocks, there might be the scenario where a white space renders between your two blocks, effectively pushing the 2nd one right by a few pixels. If you have control over the HTML, make sure no white spaces exist between your left and right div. If you cannot control this, you can give the containing element font-size: 0px; and then just reset your font size inside the left and right elements (for instance 16px).
adding display: inline-block; for both .mid_left and .mid_right classes works perfectly for me. Also check, if you didn't have space between these two divs.
To use your current code, make these adjustments:
Correct the spelling of display from diaplay:
.mid_left {
display: inline-block;
}
And then add display: inline-block; to .mid_right.
Here is an example: JSFiddle.
Hope this solves your issue.
you have a couple of options
flexbox . depending on browser support . if you have IE10+ then this is the way to go
display: table on parent and display: table-cell on left/right container
keep the container with the biggest height in the page flow and position: absolute the second container . then add height: 100% on the positioned container
I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>
</title>
<div class="heading">
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">
<form>
Search:
<input type="search" name="Search" style="float:right;">
</form>
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>
<div class="table">
<table style+"width:100%">
<tr>
<td>Phones & Tablets</td>
<td>Computers & Laptops</td>
<td>Internships</td>
<td>Troubleshooting</td>
<td>Product Ratings & Reviews</td>
</tr>
</table>
</div>
</head>
<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>
</body>
<div class="Footer">
<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">
Copyright 2014 # TEC 319 Group <br/> Illinois Sate University
</div>
</html>
heres the CSS. I only need to edit the .Footer tag i believe
html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}
.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}
.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;
}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;
}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;
}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}
form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}
You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.
Demo
Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Footer stuff</p>
</div>
body {
margin:0;
padding:0;
}
#content {
height:1200px;
width:100px;
background-color:#eee;
position:relative;
margin:0;
padding:0;
border:1px solid black;
}
#footer {
width:100px;
position:relative;
/* bottom:0; */
background-color:#eee;
margin:0;
padding:0;
border:1px solid black;
}
Hi there I've been doing research on the site for some time now and i haven't been able to find an answer that correct my problem. I'm looking to expand my body div to fill 100% while maintaining my footer at the bottom of my page. As you'll see in my code the footer is a bit problematic since I'm using a "Banner" and below the contact info for the site. (See provided image).Anyway I've tried some solutions found on other questions but i haven't been able to apply the solution to my code correctly. If someone could point me in the right direction id deeply appreciate it. Also id like to maintain the code with html and css only if at all possible.
The page should not be scrollable on regular sized displays as i have very little content
to put on the website.Here i have provided a jsfiddle to further illustrate my problem. On it you'll see that what i want is my body(green) to dinamically change height to always fill the screen. taking into account that my footer(blue) should also be displayed on screen as well.
[My JSFiddle]http://jsfiddle.net/yuyocollores/3aJBP/2/
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">#2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
And here is my current CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
hey do you mean......
#container div{
background-color:#fff;
margin:10px;
}
http://jsfiddle.net/kisspa/QFN9U/