I will show you with this example:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 820px;
height: 110px;
border-radius: 70px;
top: 11px;
left: 115px;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 210px;
height: 60px;
border-radius: 30px;
position: fixed;
left: 135px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 215px;
height: 60px;
border-radius: 30px;
z-index: 1;
top: 40px;
left: 140px;
position: fixed;
}
#home-text {
font-family: Comfortaa;
text-align: center;
top: 10px;
left: 145px;
font-size: 30px;
color: #FFFFFF;
}
#clan-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 505px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 512px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 90px;
height: 45px;
border: 2px white solid;
left: 597px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 610px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 712px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 723px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
<div id="clan-div">
<p id="clan-text">Thing<br>Button</p>
</div>
<div id="clan-div-2">
<p id="clan-text-2">Hello <br>World</p>
</div>
<div id="games-div">
<p id="games-text">Stuff</p>
</div>
</div>
</div>
</body>
</html>
The navbar is set to fixed so that the it will stay when the user scrolls down or up. The problem is that if the user's screen is small then when they scroll sideways the navbar will stay with them.
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 100%;
height: 110px;
border-radius: 70px;
top: 11px;
background-color: rgba(255,255,255, .2);
z-index: 1;
}
#home-div {
background-color: rgb(249, 162, 100);
width: 40%;
height: 60px;
border-radius: 30px;
position: fixed;
left: 5px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white;
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 40%;
height: 60px;
border-radius: 30px;
z-index: 1;
left: 8px;
top: 40px;
}
#home-text {
font-family: Comfortaa;
text-align: center;
width: 40%;
left: 10px;
font-size: 18px;
color: #FFFFFF;
}
#clan-div {
width: 16%;
height: 45px;
border: 2px white solid;
left: 250px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 275px;
width: 9%;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 15%;
height: 45px;
border: 2px white solid;
left: 342px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 365px;
top: 35px;
width: 9%;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 445px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#hello {
width: 100%;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 468px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background">
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
</div>
</div>
</div>
</body>
</html>
See if this helps, you should look into Bootstrap or Foundation as well.
Related
Is there any simple way that I could efficiently make use of one textbox/container and use it for all of my pages?
I am new to HTML/CSS, so I had been duplicating the same code every time in CSS for the same style, but just different positioning.
Is there a way I could make just one container & one textbox in CSS that gives a fixed style, but the positioning could be changed?
.container-2 {
position: relative;
top: 230px;
left: 1166px;
}
.textbox1 {
background: rgb(172, 221, 232);
border: 3.5px solid black;
width: 900px;
height: 215px;
padding: 15px 25px;
position: absolute;
right: 467px;
top: 385px;
margin: 0;
}
.textbox2 {
background: rgb(45, 110, 125);
border: 3.5px solid black;
width: 900px;
height: 45px;
padding: 15px 25px;
position: absolute;
right: 1625px;
top: 71px;
margin: 0;
}
.container-3 {
position: relative;
top: 550px;
left: 1166px;
}
.textbox3 {
background: rgb(45, 110, 125);
border: 3.5px solid black;
width: 900px;
height: 45px;
padding: 15px 25px;
position: absolute;
right: 1625px;
top: 0px;
z-index: 0.9;
}
.textbox4 {
background: rgb(172, 221, 232);
border: 3.5px solid black;
width: 900px;
height: 290px;
padding: 15px 25px;
position: absolute;
right: 467px;
top: 630px;
margin: 0;
}
.textbox1 p {
color: black;
text-align: justify;
font-weight: bold;
}
.textbox2 p {
color: white;
position: relative;
font-size: 50px;
bottom: 62px;
left: 370px;
}
.textbox3 p {
color: white;
position: relative;
font-size: 50px;
bottom: 64px;
left: 150px;
}
.textbox4 p {
color: black;
text-align: center;
font-weight: bold;
width: 302px;
left: 90px;
position: relative;
}
<section class="textbox1">
<p>#
<p>
<em>#</em>
</section>
<section class="container-2">
<section class="textbox2">
<p>#
<p>
</section>
</section>
<section class="container-3">
<section class="textbox3">
<p>#
<p>
</section>
</section>
<section class="textbox4">
<p>'#'</p>
</section>
.header {
position: relative;
top: 1px;
left: 589px;
padding-top: 20px;
padding-bottom: 10px;
}
.subtitle {
position: relative;
right: 26px;
letter-spacing: 2px;
padding-top: 5px;
font-size: 21px;
font-family: arial;
font-weight: bold;
color: #6b6b6b;
text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}
/* Menu*/
nav {
position: relative;
left: 210px;
height: 70px;
border-radius: 60px;
background: #dc67e9;
width: 1000px;
}
ul {
margin-left: 17%;
}
ul li {
display: inline-block;
line-height: 80px
}
ul li a {
text-decoration: none;
font-family: 'Coiny', cursive;
font-size: 19px;
color: white;
padding: 0 20px
}
ul li a:hover {
color: black;
}
.bannerimage {
margin-left: 5px;
margin-top: 4px;
}
.banner {
margin-top: 4px;
background-color: #dc67e9;
width: 100%;
height: 589px;
}
.bannerpromo1 {
position: relative;
bottom: 500px;
margin-left: 60px;
font-family: 'Lobster', cursive;
color: black;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 70px;
}
.bannerpromo2 {
position: relative;
bottom: 470px;
margin-left: -780px;
font-family: 'Lobster', cursive;
color: #585656;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 50px;
text-align: center;
}
.subscribebanner {
width: 250px;
height: 50px;
background-color: #dc67e9;
position: relative;
left: 190px;
bottom: 430px;
border: 4px solid white;
}
.subscribebannertext {
margin-left: 30px;
margin-top: 15px;
font-family: 'Coiny', cursive;
word-spacing: 2px;
font-size: 30px;
}
.howitworks {
font-size:60px;
font-family: 'Lobster', cursive;
text-shadow: #a8a8a8 4px 6px;
margin-top: 50px;
position: relative;
left: 555px;
}
.subheaderbox1{
position: relative;
margin-top: 20px;
right: 315px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox2{
position: relative;
bottom: 100px;
left: 65px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox3{
position: relative;
bottom: 200px;
left: 450px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaders {
position: relative;
bottom: 275px;
font-size: 40px;
margin-left: -265px;
word-spacing: 250px;
letter-spacing: 3px;
color: white;
}
.box1{
position: relative;
right: 370px;
bottom: 225px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box2{
position: relative;
right: -15px;
bottom: 500px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box3{
position: relative;
right: -405px;
bottom: 780px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.step1{
position: relative;
right: 932px;
bottom: 219px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step2{
position: relative;
right: 546px;
bottom: 493px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step3{
position: relative;
right: 153px;
bottom: 766px;
color: #666666;
font-size: 30px;
text-align: center;
}
.section1{
position: relative;
margin-top: 20px;
bottom: 660px;
background-color: #adcae1;
margin-left: -570px;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section2{
position: relative;
left: 149px;
bottom: 660px;
background-color: #adcae1;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section1title{
padding-top: 80px;
font-size: 70px;
}
.section1text{
font-size: 40px;
line-height: 50px;
text-shadow: none;
color: #f0f0f0;
position: relative;
bottom: 10px;
}
.section2title{
padding-top: 100px;
font-size: 70px;
}
.section2text{
font-size: 35px;
line-height: 40px;
text-shadow: none;
color: #f0f0f0;
padding-left: 1px;
position: relative;
bottom: 20px;
}
.imgsect1{
margin-left: 148px;
position: relative;
bottom: 1660px
}
.imgsect2{
position: relative;
bottom: 1668px;
right: 571px;
}
.examples{
font-size: 50px;
text-align: center;
line-height: 180px;
position: relative;
bottom: 1670px;
right: 550px;
}
.examplesdesign1{
position: relative;
bottom: 2580px;
right: 320px;
width: 980px;
height: 8px;
background-color: #dc67e9;
}
.examplesdesign2{
position: relative;
bottom: 1730px;
right: 325px;
width: 980px;
height: 8px;
background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
<head>
<title>SweetVie-Home-Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="indexstyle.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link rel="stylesheet" href="indexstyle.css">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="topfiller"></div>
<div class="header">
<img src="images/logo.jpg" height="90" alt="SweetVieLogo">
<h2 class="subtitle">Vegan Baking Made Easy</h2>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COMMUNITY</li>
<li>FAQ</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
<div class="banner">
<img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
<h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
<h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
<div class="subscribebanner">
<h3 class="subscribebannertext"> SUBSCRIBE</h3>
</div>
</div>
<div class="howitworks">
<h1>How It Works</h1>
<div class="subheaderbox1"></div>
<div class="subheaderbox2"></div>
<div class="subheaderbox3"></div>
<div class="subheaders">
<h2>Click Prepare Enjoy</h2>
</div>
<div>
<img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
</div>
<h3 class="step1">Select one of the three<br>subscription options</h3>
<div>
<img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
</div>
<h3 class="step2">Get involved and play<br>with your food</h3>
<div>
<img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
</div>
<h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>
<div class="section1">
<h2 class="section1title">Food Time<br> Family Time</h2>
<br>
<p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
</div>
<div class="section2">
<h2 class="section2title">The Next Step</h2>
<br>
<p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
</div>
<div class="imgsect1">
<img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
</div>
<div class="imgsect2">
<img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
</div>
<div class="examples">
<h2>Showcasing a collection of our most classic recipes</h2>
<img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
</div>
<div class="examplesdesign1"></div>
<div class="examplesdesign2"></div>
</body>
</html>
I'm confused as to why there is a large white space at the bottom of my website. I'm not too experienced with html/css, but I inspected the website's elements and it seems to be the div class'howitworks' that is creating the extra space.
I don't see a problem within the css styling of the div that could result this issue, but then again I'm very unfamiliar with the interactions between css properties and their respective elements. Any help would be appreciated
You are consistently using position:relative in conjunction with bottom: length in order to reposition your elements.
The above method only repositions the rendered layer of your element not the actual element in DOM. Which means that, technically, your element is still at the same position it was before applying bottom to it, so it occupies the same space.
The quick and dirty fix for it would be to give the last of your elements a big negative bottom margin, to make up for the extra space.
On second thought, the fastest way to fix it would be to replace all bottom: value with margin-top: -value.
Here's how your layout looks with bottoms replaced with negative top margins:
.header {
position: relative;
top: 1px;
left: 589px;
padding-top: 20px;
padding-bottom: 10px;
}
.subtitle {
position: relative;
right: 26px;
letter-spacing: 2px;
padding-top: 5px;
font-size: 21px;
font-family: arial;
font-weight: bold;
color: #6b6b6b;
text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}
/* Menu*/
nav {
position: relative;
left: 210px;
height: 70px;
border-radius: 60px;
background: #dc67e9;
width: 1000px;
}
ul {
margin-left: 17%;
}
ul li {
display: inline-block;
line-height: 80px
}
ul li a {
text-decoration: none;
font-family: 'Coiny', cursive;
font-size: 19px;
color: white;
padding: 0 20px
}
ul li a:hover {
color: black;
}
.bannerimage {
margin-left: 5px;
margin-top: 4px;
}
.banner {
margin-top: 4px;
background-color: #dc67e9;
width: 100%;
height: 589px;
}
.bannerpromo1 {
position: relative;
margin-top: -500px;
margin-left: 60px;
font-family: 'Lobster', cursive;
color: black;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 70px;
}
.bannerpromo2 {
position: relative;
margin-top: -470px;
margin-left: -780px;
font-family: 'Lobster', cursive;
color: #585656;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 50px;
text-align: center;
}
.subscribebanner {
width: 250px;
height: 50px;
background-color: #dc67e9;
position: relative;
left: 190px;
margin-top: -430px;
border: 4px solid white;
}
.subscribebannertext {
margin-left: 30px;
margin-top: 15px;
font-family: 'Coiny', cursive;
word-spacing: 2px;
font-size: 30px;
}
.howitworks {
font-size:60px;
font-family: 'Lobster', cursive;
text-shadow: #a8a8a8 4px 6px;
margin-top: 50px;
position: relative;
left: 555px;
}
.subheaderbox1{
position: relative;
margin-top: 20px;
right: 315px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox2{
position: relative;
margin-top: -100px;
left: 65px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox3{
position: relative;
margin-top: -200px;
left: 450px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaders {
position: relative;
margin-top: -275px;
font-size: 40px;
margin-left: -265px;
word-spacing: 250px;
letter-spacing: 3px;
color: white;
}
.box1{
position: relative;
right: 370px;
margin-top: -225px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box2{
position: relative;
right: -15px;
margin-top: -500px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box3{
position: relative;
right: -405px;
margin-top: -780px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.step1{
position: relative;
right: 932px;
margin-top: -219px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step2{
position: relative;
right: 546px;
margin-top: -493px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step3{
position: relative;
right: 153px;
margin-top: -766px;
color: #666666;
font-size: 30px;
text-align: center;
}
.section1{
position: relative;
margin-top: 20px;
margin-top: -660px;
background-color: #adcae1;
margin-left: -570px;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section2{
position: relative;
left: 149px;
margin-top: -660px;
background-color: #adcae1;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section1title{
padding-top: 80px;
font-size: 70px;
}
.section1text{
font-size: 40px;
line-height: 50px;
text-shadow: none;
color: #f0f0f0;
position: relative;
bottom: 10px;
}
.section2title{
padding-top: 100px;
font-size: 70px;
}
.section2text{
font-size: 35px;
line-height: 40px;
text-shadow: none;
color: #f0f0f0;
padding-left: 1px;
position: relative;
bottom: 20px;
}
.imgsect1{
margin-left: 148px;
position: relative;
margin-top: -1660px
}
.imgsect2{
position: relative;
margin-top: -1668px;
right: 571px;
}
.examples{
font-size: 50px;
text-align: center;
line-height: 180px;
position: relative;
margin-top: -1670px;
right: 550px;
}
.examplesdesign1{
position: relative;
margin-top: -2580px;
right: 320px;
width: 980px;
height: 8px;
background-color: #dc67e9;
}
.examplesdesign2{
position: relative;
margin-top: -1730px;
right: 325px;
width: 980px;
height: 8px;
background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
<head>
<title>SweetVie-Home-Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="indexstyle.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link rel="stylesheet" href="indexstyle.css">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="topfiller"></div>
<div class="header">
<img src="images/logo.jpg" height="90" alt="SweetVieLogo">
<h2 class="subtitle">Vegan Baking Made Easy</h2>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COMMUNITY</li>
<li>FAQ</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
<div class="banner">
<img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
<h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
<h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
<div class="subscribebanner">
<h3 class="subscribebannertext"> SUBSCRIBE</h3>
</div>
</div>
<div class="howitworks">
<h1>How It Works</h1>
<div class="subheaderbox1"></div>
<div class="subheaderbox2"></div>
<div class="subheaderbox3"></div>
<div class="subheaders">
<h2>Click Prepare Enjoy</h2>
</div>
<div>
<img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
</div>
<h3 class="step1">Select one of the three<br>subscription options</h3>
<div>
<img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
</div>
<h3 class="step2">Get involved and play<br>with your food</h3>
<div>
<img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
</div>
<h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>
<div class="section1">
<h2 class="section1title">Food Time<br> Family Time</h2>
<br>
<p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
</div>
<div class="section2">
<h2 class="section2title">The Next Step</h2>
<br>
<p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
</div>
<div class="imgsect1">
<img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
</div>
<div class="imgsect2">
<img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
</div>
<div class="examples">
<h2>Showcasing a collection of our most classic recipes</h2>
<img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
</div>
<div class="examplesdesign1"></div>
<div class="examplesdesign2"></div>
</body>
</html>
But this, along with how you've built your layout is not a good design practice (especially because you don't know how much you need make up for, as your elements will likely have different heights on different devices). You'll therefore have considerable problems displaying the contents reasonably on devices of various widths or devices with variable width (think rotating a phone or a tablet).
A better approach would be to rethink your layout, probably to use containers/sections and allow the contents to occupy their space in DOM and size their parents accordingly.
Note: the position:relative; left|top|bottom|right: length; is a technique intended for animations, specifically because it doesn't actually move the actual element from DOM, thus not triggering re-renders on subsequent elements in DOM, making animations very light on the browser (which doesn't need to repaint the rest of the document at each frame). It's not a technique intended for layouts.
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}
I have this image and I need to reply it.
I already did most of the code, however I'm having some trouble doing the black box.
It needs to be:
- on top of "redbox"
- behind the "bluebox"
- on top of "blueinbox"
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>
Done.
body {
font: 500 16px 'Open Sans', Arial, sans-serif;
color: #fff;
}
.container {
position: relative;
max-width: 400px;
height: 200px;
margin: 2rem auto;
border: 1px solid #000;
background-color: #eee;
}
.box-red, .box-blue-light, .box-blue-dark, .box-black {
position: absolute;
}
.box-red {
top: 20px;
right: 20px;
width: 120px;
height: 120px;
border: 1px solid red;
border-radius: 5px;
}
.box-black {
top: 40px;
right: 40px;
width: 60px;
height: 60px;
background-color: #000;
}
.box-blue-light {
top: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #05adeb;
}
.box-blue-light::before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background-color: #000;
}
.box-blue-light h5 {
margin-top: 2rem;
font: 500 1rem 'Open Sans';
letter-spacing: 2px;
text-align: center;
}
.box-blue-dark {
top: 60px;
right: 60px;
width: 120px;
height: 120px;
border: 1px solid blue;
border-left-style: dashed;
background: #fff url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
}
.box-blue-dark::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(170,50,90,.25)
}
<body>
<div class="container">
<div class="box-red"></div>
<div class="box-black"></div>
<div class="box-blue-dark"></div>
<div class="box-blue-light"><h5>NINJA!<h5></div>
</div>
</body>
Add z-index:1; to .bluebox.
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.blackbox {
background-color: #000;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
<div class="blackbox"></div>
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>
I am practicing html and css and want to make a website, but the text isn't scaling properly.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
</head>
<body>
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home</p>
</div>
<div id="home-div-button"></div>
</div>
</body>
</html>
css:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
background-size: cover;
}
html, body {
height: 100%;
}
#huge {
width: 85.8%;
height: 100%;
position: relative;
background-color: rgba(255, 103, 48, 0.5);
left: 7%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 77.5%;
height: 22.5%;
border-radius: 70px;
top: 2.5%;
left: 11%;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 19.5%;
height: 12%;
border-radius: 30px;
color: #FFFFFF;
position: fixed;
left: 12%;
top: 6%;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 20%;
height: 12%;
border-radius: 30px;
z-index: 1;
top: 8%;
left: 12.5%;
position: fixed;
}
#home-text {
font-size: 3.3em;
font-family: Comfortaa;
text-align: center;
line-height: 1.3em;
top: 2.3%;
left: 13%;
}
When I resize my browser everything scales except the text, which starts going out of the button that it is on top of.
I can't find an easy answer for this anywhere. All I need is a technique that I can repeat for other situations that will make the text scale with everything else.
body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>
If you put the snippet to a full page, then the text will be in the right spot.