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;
}
Related
.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.
here is a fiddle link
.authorTag {
float: right;
position: absolute;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.DateTag {
float: right;
position: relative;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.DivTitle {
float: left;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
width: 100%;
}
.contentContainer {
position: relative;
width: 300px;
height: 300px;
/* top:0;
left:0;*/
border: 1px solid black;
margin: 5px;
}
<div class="contentContainer">
<div class="tag">Featured</div>
<div class="authorTag">authorTag</div>
<div class="DateTag">Time</div>
<img src="https://dummyimage.com/100/000000/fff" width="100%">
<div class="DivTitle"> Title </div>
</div>
Fiddle Link
the scenario
a container div
image fill the container div (No Problem if it is background of the container div)
Title div at the bottom of the container
four div in every corner in the remaining space
Note : the Title div with dynamic text which means it might be one or more lines
image of the desired output
Hope the following code helps. I made the image as the background image with background-size: cover;. Also I separated the tags into top and bottom section, and used float left and right to position the tags.
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
background: url('https://dummyimage.com/100/000000/fff') no-repeat center center;
background-size: cover;
}
.topTags {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bottomTags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.tag {
width: auto;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
.divTitle {
width: 100%;
clear: both;
}
<div class="contentContainer">
<div class="topTags">
<div class="tag left">Featured</div>
<div class="tag right">authorTag</div>
</div>
<div class="bottomTags">
<div class="tag left">Time</div>
<div class="tag right">Bottom Left</div>
<div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
</div>
</div>
Solution 2, image as <img>
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
}
.bgImage {
position: absolute;
width: 100%;
height: 100%;
}
.topTags {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.bottomTags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.tag {
width: auto;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
.divTitle {
width: 100%;
clear: both;
}
<div class="contentContainer">
<div class="topTags">
<div class="tag left">Featured</div>
<div class="tag right">authorTag</div>
</div>
<img class="bgImage" src="https://dummyimage.com/100/000000/fff" />
<div class="bottomTags">
<div class="tag left">Time</div>
<div class="tag right">Bottom Left</div>
<div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
</div>
</div>
Here is an alternate solution. By placing the bottom tags in the title bar we can position them relative to it.
.background {
position: absolute;
top: 0px;
left: 0px;
z-index: 999;
}
.topLeft {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.topRight {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomLeft {
position: absolute;
bottom: 100%;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomRight {
position: absolute;
bottom: 100%;
right: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomBar {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
/* Remove padding left and right from width*/
width: calc(100% - 10px);
}
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
}
<div class="contentContainer">
<img class="background" src="https://dummyimage.com/100/000000/fff" width="100%">
<div class="tag topLeft">Featured</div>
<div class="authorTag topRight">authorTag</div>
<div class="bottomBar">
<div class="otherTag bottomLeft">Other</div>
<div class="dateTag bottomRight">Time</div>
<div class="divTitle">Title - this can be any amount of text, bottom tags will move up.</div>
</div>
</div>
Here you go. Your issue was that the image should be a background image set to the container div. Then you need to add a background size to "cover" to get it to fit. Next you had some screwed up css. Your "Divtitle" class had a padding set so it forced it to go out of bounds. If you want padding top or left or bottom use "padding-left", "padding-right", ect. I also added an extra container div with a set height and width so that way "contentContainer" can be set to 100% width and height with the image but nor screwing anything up.
Here is your fiddle with the corrections: https://jsfiddle.net/32vg2466/1/
HTML:
<div style="width: 250px; height: 250px;">
<div class="contentContainer" >
<div class="tag">Featured</div>
<div class="authorTag">authorTag</div>
<div class="DateTag">Time</div>
<div class="DivTitle"> Title </div>
</div>
</div>
CSS:
.authorTag
{
float: right;
position: absolute;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.DateTag
{
float: right;
position: relative;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.DivTitle {
float: left;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 1000;
background-color: #92AD40;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
width: 100%;
}
.contentContainer{
position:relative;
width:100%;
height:100%;
/* top:0;
left:0;*/
border:1px solid black;
margin:5px;
**background-image: url("https://dummyimage.com/100/000000/fff");
background-position: center;
background-size: cover;**
}
How can I make buttons and images that are placed over a banner be responsive, as in when the browser is made smaller the image gets smaller however buttons and images and text do not shrink with the banner. What can i add to my code to make this all shrink correctly. here is part of my css and html code below. any help on this would be very appreciated, thanks!
#putimage {
display: inline-block;
position: relative;
}
#button1 {
position: absolute;
bottom: 25%;
right: 38%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button2 {
position: absolute;
bottom: 25%;
right: 22%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button3 {
position: absolute;
bottom: 25%;
right: 3.4%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#text1 {
position: absolute;
bottom: 25%;
right: 75%;
}
.headshot {
position: absolute;
top: 60px;
left: 47px;
z-index: 3;
}
.name {
position: absolute;
top: 71%;
left: 7.8%;
}
.photos {
position: absolute;
top: 38%;
left: 51.6%;
font-size: 220%;
}
.photoscount {
position: absolute;
top: 28%;
left: 55.8%;
font-size: 220%;
}
<div id="putimage">
<img src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21875637_167049423848751_1262488588_o.jpg" width="100%" height="500px" />
<input type="button" id="button1" value="Subscribe">
<input type="button" id="button2" value="Message">
<input type="button" id="button3" value="VIP Photos">
<img class="headshot" src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21767500_167049813848712_2048841584_n.png">
<div class="name">
<font size="30" color="white">ELO <strong>KITTY</strong></font>
</div>
<div class="photos">
<font color="white">PHOTOS</font>
</div>
<div class="photoscount">
<font color="white">72</font>
</div>
</div>
You can use #media queries to change style attributes according to screen size.
For instance, change the size of the .headshot image to 20% of its original when the screen has a minimum width of 200px and a maximum width of 700px. Please run the snippet and then switch to fullscreen to see that in action.
Here is a resource with more information on media queries.
#media (min-width: 200px) and (max-width:700px) {
.headshot {
width:20%;
}
}
#putimage {
display: inline-block;
position: relative;
}
#button1 {
position: absolute;
bottom: 25%;
right: 38%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button2 {
position: absolute;
bottom: 25%;
right: 22%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button3 {
position: absolute;
bottom: 25%;
right: 3.4%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#text1 {
position: absolute;
bottom: 25%;
right: 75%;
}
.headshot {
position: absolute;
top: 60px;
left: 47px;
z-index: 3;
}
.name {
position: absolute;
top: 71%;
left: 7.8%;
}
.photos {
position: absolute;
top: 38%;
left: 51.6%;
font-size: 220%;
}
.photoscount {
position: absolute;
top: 28%;
left: 55.8%;
font-size: 220%;
}
<div id="putimage">
<img src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21875637_167049423848751_1262488588_o.jpg" width="100%" height="500px" />
<input type="button" id="button1" value="Subscribe">
<input type="button" id="button2" value="Message">
<input type="button" id="button3" value="VIP Photos">
<img class="headshot" src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21767500_167049813848712_2048841584_n.png">
<div class="name">
<font size="30" color="white">ELO <strong>KITTY</strong></font>
</div>
<div class="photos">
<font color="white">PHOTOS</font>
</div>
<div class="photoscount">
<font color="white">72</font>
</div>
</div>
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">
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