.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.
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>
So i'm trying to have a div with text appear on a parent div when a mouse hovers the parent, all was going well and good until I encountered a problem where the text ("VISIT") was no longer centering when the font size is changed to be larger.
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
As you can see, the text "VISIT" is aligned properly horizontally, but not vertically. Anyone know a solution?
Try using a <span> element instead of a <p> element. So modify your code to this:
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<span class="visit">VISIT</span>
</div>
</div>
</div>
That should help center it or at least get you in the right direction. I tested this on jsfiddle here. You may need to play around with the margin or padding a bit, but the problem you're having is because of the <p> element.
Set a line-height=0 on .visit
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
bottom:0;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height:0;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
Add top:50%; and transform: translateY(-50%); to .slidein-content, erase the bottom:0 from it and add amargin: 0 to .visit (I don't know from where, but it has a 32px top- and bottom-margin, which you have to reset to 0 that way.)
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
top:50%;
transform: translateY(-50%);
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height: 2em;
margin: 0;
}
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
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.
I am in the beginning stages of learning web development. I think of layouts and try to come up with a code for it.
I want to set up social media navigation on the top right of the website. I came up with the following html.
<nav class="snav">
<img src="../desktop/linked.png" height="32px" width="32px">
<img src="../desktop/fb.png" height="32px" width="32px">
<img src="../desktop/twitter.png" height="32px" width="32px">
<img src="../desktop/google.png" height="32px" width="32px">
</nav>
And the css
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}
but, only google + icon is appearing on screen.
Here is the complete code for the website.
body {
background-image: url('../desktop/image.jpg');
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #fcfcfc;
opacity: 0.5;
max-width: 100%;
height: 120px;
border-bottom: 0.4px solid #bd0000;
position: relative;
top: 0;
}
.bar_1 {
position: absolute;
left: 0px;
margin-left: 5%;
margin-top: 80px;
height: 50vh;
width: 25%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_2 {
position: absolute;
left: 38.33%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_3 {
position: absolute;
left: 71.66%;
margin-right: 5%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_1:hover {
background-color: #bd0000;
}
.bar_2:hover {
background-color: #bd0000;
}
.bar_3:hover {
background-color: #bd0000;
}
#footer {
position: relative;
top: 100vh;
background-color: #fcfcfc;
max-width: 100%;
height: 70px;
border-top: 0.4px solid #bd0000;
}
* {
box-sizing: border-box;
}
.search_bar {
position: absolute;
top: 650px;
left: 29%;
right: 33.33%;
}
#search {
border: 2px solid #bd0000;
background-color: #fff;
opacity: 0.5;
font-color: #fcfcfc;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
width: 600px;
height: 50px;
border-radius: 2px;
}
#search:hover {
background-color: #f0f0f0;
font-color: #000;
opacity: 50;
}
img {
position: absolute;
top: 10px;
left: 30px;
}
.mnav {
position: absolute;
top: 30px;
right: 515px;
}
.mnav a {
font-family: Tahoma;
font-size: 18px;
font-weight: bolder;
color: #000;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}
<!Doctype html>
<html>
<head>
<title>Two Website</title>
<link rel="stylesheet" href="two-website.css">
</head>
<body>
<div class="body_con">
<div class="header">
</div>
<nav class="mnav">
Home
Page 1
Page 2
Page 3
</nav>
<img src="../desktop/logo.png">
<nav class="snav">
<a href="https://www.linkedin.com/uas/login">
<img src="../desktop/linked.png" height="32px" width="32px">
</a>
<a href="https://www.facebook.com/">
<img src="../desktop/fb.png" height="32px" width="32px">
</a>
<a href="https://twitter.com/">
<img src="../desktop/twitter.png" height="32px" width="32px">
</a>
<a href="https://plus.google.com/">
<img src="../desktop/google.png" height="32px" width="32px">
</a>
</nav>
<div class="bar_1">
</div>
<div class="bar_2">
</div>
<div class="bar_3">
</div>
<form action="\" method="get" class="search_bar">
<input type="text" name="search" placeholder="Search" id="search">
</form>
</div>
<footer id="footer">
</footer>
</body>
</html>
Please help me with it.
Thank You
the width of snav is:
5 * (32 + 5 + 5) = 5 * 42 = 210
so:
.snav {
position: absolute;
top: 50px;
right: 50px;
width: 210px;
height: 32px;
}
p.s. as it is said in a comment, it is better to consider relative positioning instead of absolute positioning.
Add position: relative in snav a and increase the padding.
.snav a {
position: relative;
padding-right: 15px;
padding-left: 15px;
}
First off, I keep trying to make the boxes move down so you can see the shadows (if there's an easier way, I'd love to hear it), but when I put them all down, they are right under one another again, so you can't see them.
Second, and this is the most important, the fifth div box stacks right on top of the fourth. I have NO clue why. I did the fifth just like the fourth. I really hope it isn't a stupid question, but I've scoured my code to find it, and I just can't.
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
h1, h2, h3, body {
font-family: "Arial", Helvetica, sans-serif;
}
.topp {
margin-right: 500px;
background-image: url('gamerbeta.jpg');
background-color: fff;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.second {
position: relative;
top: 10px;
background-color: #white;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.secondword {
position:absolute;
top: -30px;
left: 435px;
font-size: 50px;
}
.secondp {
position:absolute;
top: 80px;
left: 1000px;
text-align: center;
font-size: 40px;
}
.secondimage {
position: absolute;
top: 190px;
left: 1230px;
}
.secondwordtwo {
position:absolute;
top: 300px;
left: 1180px;
font-size: 30px;
font-style: italic;
}
.arrow {
position: absolute;
top: 370px;
left: 900px;
}
.third {
position: relative;
top: 10px;
background-color: #D8D8D8;
width: 100%;
height: 430px;
box-shadow: 1px 1px 4px black;
}
.thirdword {
position:absolute;
top: 130px;
left: 350px;
font-size: 38px;
}
.thirdp {
position:absolute;
top:200px;
left:350px;
font-size: 26px;
width: 670px;
}
.thirdpic {
position:absolute;
top: 25px;
left:1150px;
}
.fourth {
position: relative;
top: 10px;
height: 430px;
width: 100%;
background-color: white;
box-shadow: 3px 3px 4px black;
}
.fourthpic {
position: absolute;
top: 10px;
left: 460px;
}
.fourthword {
position: absolute;
top: 100px;
left: 540px;
font-size: 38px;
width: 500px;
}
.fourthp {
position: absolute;
top: 170px;
left: 540px;
font-size: 26px;
width: 650px;
}
.fifth {
position: relative;
top: 10px;
height: 430px;
width: 100%;
background-color: #D8D8D8;
box-shadow: 3px 3px 4px black;
}
</style>
</head>
<body>
<div class=topp></div>
<div class=second>
<div class=secondword><h1>BETA</h1></div>
<div class=secondp>EXCLUSIVE ACHIEVEMENT<br>FOR JOINING BETA</div>
<div class=secondimage><img src="test.png" alt=""></div>
<div class=secondwordtwo>Beta Tester</div>
<div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
</div>
<div class=third>
<div class=thirdword>FIND GAMERS JUST LIKE YOU...</div>
<div class=thirdp>test here to show you</div>
<div class=thirdpic><img src="gamer.png" alt="" height="375"
width="394"></div>
</div>
<div class=fourth>
<div class=fourthpic><img src="dream.jpg" alt="" height="420" width="420"
</div>
<div class=fourthword>STAY CONNECTED...</div>
<div class=fourthp>test here to show you</div>
</div>
<div class=fifth>
</div>
</body>
As Adrei mentioned, the class names need to be between double quotes.
Also, you were missing an ending triangle bracket (>) on line 145 for your image tag.
<img src="dream.jpg" alt="" height="420" width="420">