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">
Related
I need again help about create rounded caps on my element that have a gap.
I want to do something like this :
[rectange with gap and round cap][1]
[1]: https://i.stack.imgur.com/O781h.png
After some research and trying, I ended up doing this (e.g my code). I'm happy with it, but I'd like to create more aesthetic rounded caps like in my exemple. Can anyone help me, thank you in advance.
span {
font-size: 20px;
background: #fff;
position:absolute;
top: -20px;
right: 10px;
left: 10px;
padding:4px;
}
p{
border-radius: 25px;
width: 250px;
height: 150px;
border:10px solid #000;
background-color:white;
position:relative;
padding-top:15px;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<p><span>Title will come here</span></p>
</div>
</body>
You can add some cricles to the ends of the lines. It may need slight adjusting.
span {
font-size: 20px;
background: #fff;
position: absolute;
top: -20px;
right: 10px;
left: 10px;
padding: 4px;
}
p {
border-radius: 25px;
width: 250px;
height: 150px;
border: 10px solid #000;
background-color: white;
position: relative;
padding-top: 15px;
}
p::after {
content: "";
position: absolute;
top: -9.3px;
left: 5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
p::before {
content: "";
position: absolute;
top: -9.3px;
left: 235px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<span id="cap"></span>
<p><span>Title will come here</span></p>
</div>
</body>
.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.
I'm making a webpage as a product for my presentation in school. Now, this isn't the first time I've experienced this problem, but my scrollbars seems to cut a little off the top and on the side. On top of that the scrollbar is only HALF visible.
(Note that the black task bar in the top should fill out all the way from left to right and should be right up against the top.)
<head>
<style type="text/css">
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
left: -0.5%;
top: -8px;
width: 100.9%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #111;
}
textarea {
resize: none;
position: fixed;
left: 35%;
top: 1%;
width: 30%;
font-size: 160%;
height: 35px;
padding: 3px;
}
p {
font-size:20px;
font-family: arial;
position: absolute;
}
.underline {
border-bottom: 0.5px solid black;
display: inline-block;
line-height: 0.85;
}
</style>
<script type="text/javascript">
function clearContents(element) {
element.value = '';
}
</script>
</head>
<body>
<ul>
<li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
</ul>
<img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->
<textarea placeholder="Search for jobs"></textarea>
<img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">
<p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>
<img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">
<p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p>
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">
</body>
You probably just need to reset the margin on in you body tag.
So try changing:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
To:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
margin: 0px;
}
From the CSS, remove
html, body {
**overflow-x: hidden;**
}
The overflow-x part. This fixes the problems you mentioned. Let me know if this helped.
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;
}
Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo