I have the following div which is containing an image:
And here's the HTML and styles to it:
<ul id="noty_centerRight_layout_container" class="i-am-new" style="right: 20px; position: fixed; width: 310px; height: auto; margin: 0px; padding: 0px; list-style-type: none; z-index: 10000000; top: 339.5px;">
<li style="overflow: visible; border-radius: 5px; background-color: rgb(255, 255, 255); border-color: rgb(204, 204, 204); color: rgb(68, 68, 68); width: 310px; cursor: pointer; min-height: 349px;" class="animated bounceIn">
<div class="noty_bar noty_type_alert" id="noty_4752181183881090">
<div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative;">
<div class="noty_text">
<h3></h3>
<p> <button title="Close (Esc)" type="button" class="popup-close">×</button></p>
<p><img style="width: 350px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"></p>
<p></p>
</div>
</div>
</div>
</li>
</ul>
I want to make the image to be equal size as the div with id
noty_677289985142816800
Also, i've added
<ul id="noty_centerRight_layout_container" class="i-am-new" style="right: 20px; position: fixed; width: 310px; height: auto; margin: 0px; padding: 0px; list-style-type: none; z-index: 10000000; top: 339.5px;">
<button title="Close (Esc)" type="button" class="popup-close">×</button>
<li style="overflow: visible; border-radius: 5px; background-color: rgb(255, 255, 255); border-color: rgb(204, 204, 204); color: rgb(68, 68, 68); width: 310px; cursor: pointer; min-height: 349px;" class="animated bounceIn">
<div class="noty_bar noty_type_alert" id="noty_4752181183881090" style="background-color:blue;">
<div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative;">
<div class="noty_text">
<p><img style="width:310px;margin-top:-28px;margin-left:-15px;height:311px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"></p>
<p></p>
</div>
</div>
</div>
</li>
</ul>
try this code.
you can set it as the background image for the above div link below.
<div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative; background: url('https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png'); background-size: 100%; height: 220px;">
<div class="noty_text">
<h3></h3>
<p>
<button title="Close (Esc)" type="button" class="popup-close">×</button>
</p>
<p><!-- <img style="width: 350px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"> --></p>
<p></p>
</div>
</div>
css added:
background: url('https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png');
background-size: 100%;
height: 220px;
Related
I want to add three divs in the same line, but when I add the second div it's displayed below the first div. I don't know how to fix this problem.
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-left: 20%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-left: 60%;
float: left;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
You have multiple errors :
Class name .first-div not .fisrt-div .
Property widthis duplicated.
If you want to add div's in the same line, use Display:inline-block. [I prefer to do it with flexbox or grid, read more about this]
I have noticed that you put margin-left: 50%; on a style, I think you want to center it, just put Display:block and text-align:center to the a or span styles.
float: left; is not necessary here.
You put a very long text inside b, that's why I used overflow-wrap: break-word; to break text.
.first-div {
background-color: rgb(65, 65, 65);
width: 25%;
border-radius: 10px;
height: 30%;
cursor: pointer;
display:inline-block;
overflow-wrap: break-word;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
border-radius: 10px;
height: 30%;
cursor: pointer;
display:inline-block;
overflow-wrap: break-word;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; text-align:center; font-size: 17px; display: block;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
blahblahblah
</div>
The name of your class is written wrong, on the css file.
.fisrt-div
i dont actually get what you're trying to achieve but i hope this helps you.
i removed the float: left
then added display inline-block in css
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.third-div {
background-color: rgb(65, 65, 65);
width: 25%;
margin-top: 10%;
border-radius: 10px;
width: 20%;
height: 30%;
cursor: pointer;
}
.first-div, .second-div, .third-div{
display: inline-block;
}
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a></b>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
<div class="third-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
Make one class for both divs then add the following css
div {
background-color: rgb(65, 65, 65);
margin-left: 20px;
margin-top: 20px;
border-radius: 10px;
width: 210px;
height: 100px;
cursor: pointer;
display: inline-block;
}
If you want the words to wrap use word-wrap: break-word;.
If you want both boxes to be the same width, but don' need them to be the same height, make the height: auto.
If you want the boxes to have the same height but don't care about width, make the width: auto.
<div class="main">
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
.main{
display:flex;
flex-wrap:wrap;
}
.fisrt-div {
background-color: rgb(65, 65, 65);
width: 33.33%;
margin-left: 20%;
margin-top: 10%;
border-radius: 10px;
height: 30%;
cursor: pointer;
}
.second-div {
background-color: rgb(65, 65, 65);
width: 33.33%;
margin-top: 10%;
border-radius: 10px;
height: 30%;
cursor: pointer;
}
<div class="main">
<div class="first-div">
<img class="img1" src="images/androiddev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttext</b><br><br>
<a style="text-decoration: none; color: turquoise; margin-left: 50%; font-size: 17px;" href="">blahblahblah</a>
</p>
</div>
<div class="second-div">
<img class="img2" src="images/webdev.png">
<p style="padding: 5px; color: white;"><b>texttexttexttexttexttexttexttexttexttexttexttexttext</b></p>
<a href="" style="text-decoration: none; color: turquoise; margin-left: 50%; font-size:
17px;">blahblahblah</a>
</div>
<script type="text/javascript">
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div>
</div>
So I am basically trying to get a scrolling parallax effect with multiple background images on my webpage. I will post a link to a website with a perfect example of what I am talking about (look at the first two background images on the webpage). Here is that link: https://www.wix.com/website-template/view/html/1885?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2F1&bookName=&galleryDocIndex=0&category=portfolio-cv
The problem with my webpage however is that once you scroll down to a certain point, the first background image gets cut off (as it should) but the second background image scrolls too soon and leaves this "whitespace" where the background is revealed. I will give a jsfiddle link so you can see what I am talking about. You might have to expand the viewport on jsfiddle to see the first background image for some reason. Thanks in advance.
CSS:
body {
padding: 0;
margin: 0;
background-color: rgb(114, 129, 139);
overflow-x: hidden;
animation: fadein 1s;
}
a {
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
line-height: 300px;
font-size: 90px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
h2 {
position: relative;
bottom: 50px;
font-size: 60px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
#p_in_first_div {
font-size: 20px;
line-height: 120px;
vertical-align: middle;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
}
#first_bg_image {
display: inline-block;
position: relative;
width: 100%;
}
#first_bg_image::after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url(http://pngimg.com/uploads/businessman/businessman_PNG6580.png);
background-position: 49em 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: -1700px;
width: 120%;
height: 3100px;
opacity: 0.8;
pointer-events: none;
transform: scale(.80);
}
#second_bg_image {
display: inline-block;
position: relative;
width: 100%;
}
#second_bg_image::after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url(https://image.freepik.com/free-photo/desktop-with-notebook-smartphone-coffee-and-laptop_1112-253.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: 377px;
height: 1600px;
background-position: center;
z-index: -1;
opacity: 0.7;
transform: scale(1, 0.8);
}
#header_div {
width: 100%;
height: 70px;
box-shadow: 0px 1px 40px;
background-color: rgb(143, 0, 46);
}
#header_nav {
line-height: 70px;
word-spacing: 25px;
font-size: 13.4px;
}
#header_div_icon {
position: relative;
right: 50px;
vertical-align: middle;
width: 40px;
height: 40px;
}
#current_link_home {
color: rgb(190, 226, 231);
}
#first_body_div {
height: 690px;
width: 820px;
background-color: rgb(69, 72, 87);
margin-left: auto;
margin-right: auto;
margin-top: 15%;
margin-bottom: 7%;
box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.5);
position: relative;
}
#icon_in_div {
margin-left: auto;
margin-right: auto;
display: block;
width: 100px;
height: 100px;
padding: 160px 0px 0px 0px;
}
#resume_button {
background-color: Transparent;
border: 2px solid rgb(79, 87, 170);
outline: none;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic,
"AppleGothic", sans-serif;
font-size: 18px;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 45px;
width: 220px;
height: 45px;
transition-duration: 0.4s;
}
#professional_skills_div_1 {
width: 230px;
height: 15px;;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_2 {
width: 230px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_3 {
width: 230px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_4 {
width: 430px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_5 {
width: 280px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_6 {
width: 480px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skills_div_7 {
width: 480px;
height: 15px;
background-color: rgb(79, 87, 170);
}
#professional_skill_percentage_80 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
position: relative;
right: -20px;
top: -4px;
}
#professional_skill_percentage_60 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
position: relative;
right: 130px;
top: -3px;
}
.h2_line_heights {
line-height: 450px;
}
.other_links {
color: rgb(114, 129, 139);
}
.text_align {
text-align: center;
}
.text_color {
color: rgb(190, 226, 231);
}
.h2_subheadings_font {
font-size: 30px;
}
.h2_subheadings_positions {
position: relative;
top: -260px;
}
.professional_divs {
position: relative;
right: 32px;
height: 45px;
top: -210px;
width: 1400px;
margin-left: auto;
margin-right: auto;
}
.professional_outside_divs {
display: inline-block;
width: 35%;
}
.professional_paragraphs {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
position: relative;
right: 40px;
top: -4px;
}
.professional_outside_skill_bar_divs {
width: 29%;
display: inline-block;
position: relative;
right: 1.5vw;
}
.professional_skill_percentages_50 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
position: relative;
right: 180px;
top: -4px;
}
.professional_skill_percentage_90 {
font-size: 15px;
font-family: Tahoma, Geneva, sans-serif;
position: relative;
left: 70px;
top: -3px;
}
HTML:
<body lang="en-US">
<div id="first_bg_image">
<header>
<div id="header_div">
<nav class="text_align" id="header_nav">
<!--
image source:
https://scrapbookalphabet.blogspot.com/2011/08/wood-slat-png-free-scrapbook-letters.html?m=1
-->
<img id="header_div_icon"
src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
alt="Icon 1">
HOME
<a href="#prof_id" class="other_links" id="professional_link">
PROFESSIONAL
</a>
<a href="#exper_id" class="other_links" id="experience_link">
EXPERIENCE
</a>
<a href="portfolio_page.html" class="other_links" id="portfolio_link">
PORTFOLIO
</a>
<a href="#second_body_div" class="other_links" id="contact_link">
CONTACT
</a>
</nav>
</div>
</header>
<div class="text_align">
<h1 class="text_color">
I<span>'</span>m Chad Wilson<span>.</span>
</h1>
</div>
<div class="text_align">
<h2 class="text_color h2_subheadings_font">
Front End Web Developer
</h2>
</div>
</div>
<div id="second_bg_image">
<div id="first_body_div">
<img id="icon_in_div"
src="https://3.bp.blogspot.com/-8Gdu_oKhrdM/Tk_5-lBzZII/AAAAAAAACIU/cw3CLnAXv5k/s1600/1Capital-Letter-C-Wood.png"
alt="Icon 2">
<p class="text_align text_color" id="p_in_first_div">
Click the link below to download my resume.
</p>
<a href="https://drive.google.com/file/d/0B5NM_iPTWudsRzRzS094Ul9pMTQ/view?usp=sharing"
id="resume_button"
class="text_color text_align"
target="_blank">
Download Resume
</a>
</div>
<div class="text_align h2_line_heights" id="prof_id">
<h2 class="text_color">
<span>01</span> Professional
</h2>
</div>
<div class="text_align">
<h2 class="text_color h2_subheadings_font h2_subheadings_positions">
My Knowledge Level in Software
</h2>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Wordpress
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_1">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Drupal
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_2">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Wix
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_3">
</div>
</div>
<div class="professional_outside_divs">
<p class="professional_skill_percentages_50 text_color">
50%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Photoshop
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_4">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color" id="professional_skill_percentage_80">
80%
</p>
</div>
</div>
<div class="professional_divs">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Illustrator
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_5">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color" id="professional_skill_percentage_60">
60%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
Javascript
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_6">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color professional_skill_percentage_90">
90%
</p>
</div>
</div>
<div class="professional_divs remove_bottom_bar">
<div class="professional_outside_divs">
<p class="professional_paragraphs text_color">
HTML & CSS
</p>
</div>
<div class="professional_outside_skill_bar_divs">
<div id="professional_skills_div_7">
</div>
</div>
<div class="professional_outside_divs">
<p class="text_color professional_skill_percentage_90">
90%
</p>
</div>
</div>
</div>
JSFIDDLE link: https://jsfiddle.net/245uqz0p/
I think this link might help you.
w3school parallax effect
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
I've got three images that need to be displayed horizontally with no gaps between them and a link on top of each one they also need to be scalable to the window size. Currently there are gaps between them.
Here is all of the relevant code I've got so far:
.callout-container {
position: relative;
bottom: 480px;
right: 0px;
}
.callout {
position: relative;
float: left;
Width: 33.3%;
}
.button-1 {
position: absolute;
top: 160px;
right: 1420px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
font-size: 20pt;
opacity: 0.9;
}
.button-2 {
position: absolute;
top: 160px;
right: 825px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
.button-3 {
position: absolute;
top: 160px;
right: 220px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
<div class="callout-container">
<div>
<div class="callout-one callout">
<img src="callout_1.png" alt="">
</div>
<div class="callout-two callout">
<img src="callout_2.png" alt="">
</div>
<div class="callout-three callout">
<img src="callout_3.png" alt="">
</div>
</div>
<div>
<div>
<a href="" class="button-1" style="text-decoration:none;">
Property Owner?
</a>
</div>
<div>
<a href="" class="button-2" style="text-decoration:none;">
City Visitor?
</a>
</div>
<div>
<a href="" class="button-3" style="text-decoration:none;">
Teacher?
</a>
</div>
</div>
</div>
Edit: also here is a screenshot of how it is currently displayed.
screenshot
if I understand well, you want the links to be aligned with the images?
I create a jsFiddle to test.
https://jsfiddle.net/mp9007/aL27fxm3/
I think i'm close to want you want:
<div class="callout-container">
<div>
<div class="callout-one callout">
Property Owner?
<!-- image -->
</div>
<div class="callout-two callout">
City visitor?
<!-- image -->
</div>
<div class="callout-three callout">
Teacher?
<!-- image -->
</div>
</div>
And then remove the absolute/right alignement from the css button class
.button-3{
position: absolute;
top: 160px;
//right: 220px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
I have a progress bar that I need to be able to show the percentage text always in the middle of the progress bar. Currently, only the values are not vertically centered inside the progress bar. I need to do this only with html and CSS and not jQuery or javascript
.vertical .progress-bar {
float: left;
height: 100px;
width: 40px;
margin-right: 10px;
}
.vertical .progress-track {
position: relative;
width: 40px;
height: 100%;
background: #fff;
border: 1px solid #ebebeb;
}
.vertical .progress-fill {
position: relative;
height: 50%;
width: 40px;
color: #fff;
text-align: center;
}
<div class="vertical">
<div class="progress-bar">
<div class="progress-track">
<div class="progress-fill" style="height: 100%; top: 0%; background: rgb(191, 231, 178);"></div>
<span style="color: rgb(0, 0, 0);">100%</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<div class="progress-fill" style="height: 80%; top: 20%; background: rgb(248, 231, 153);"></div>
<span style="color: rgb(0, 0, 0);">80%</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<div class="progress-fill" style="height: 60%; top: 40%; background: rgb(248, 231, 153);"></div>
<span style="color: rgb(0, 0, 0);">60%</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<div class="progress-fill" style="height: 2%; top: 98%; background: rgb(248, 138, 138);">
<span style="color: rgb(0, 0, 0);">0%</span>
</div>
</div>
</div>
</div>
Revised answer below; see Fiddle here: https://jsfiddle.net/ybygucn7/
HTML:
<div class="vertical">
<div class="progress-bar">
<div class="progress-track">
<span style="color: rgb(0, 0, 0);">100%</span>
<div class="progress-fill" style="height: 100%; background: rgb(191, 231, 178);"></div>
</div>
</div>
</div>
CSS:
.vertical .progress-bar {
height: 100px;
width: 40px;
display: inline-block;
margin: 0 5px;
font-size: 12px;
text-align: center;
}
.progress-bar .progress-track {
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #ebebeb;
position: relative;
}
.vertical .progress-fill {
width: 100%;
color: #fff;
text-align: center;
position: absolute;
z-index: 0;
bottom: 0;
}
.vertical span {
position: absolute;
z-index: 1;
top: 50%;
width: inherit;
left: 0;
transform: translateY(-50%);
}
I have made changes in your HTML and in CSS .progress-bar overflow has hidden, try this.
.vertical .progress-bar {
float: left;
height: 100px;
width: 40px;
margin-right: 10px;
overflow:hidden;
}
.vertical .progress-track {
position: relative;
width: 40px;
height: 100%;
background: #fff;
border: 1px solid #ebebeb;
//overflow:hidden;
}
.vertical .progress-fill {
position: relative;
height: 50%;
width: 40px;
color: #fff;
text-align: center;
}
<div class="vertical">
<div class="progress-bar">
<div class="progress-track">
<span style="color: rgb(0, 0, 0);top:20%;position:absolute;z-index:1;">100%</span>
<div class="progress-fill" style="background: rgb(191, 231, 178);height:100px; top:0%;"></div>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<span style="color: rgb(0, 0, 0);top:20%;position:absolute;z-index:1;">80%</span>
<div class="progress-fill" style="background: rgb(248, 231, 153);height:80px; top:20%;"></div>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<span style="color: rgb(0, 0, 0);top:40%;position:absolute;z-index:1;">60%</span>
<div class="progress-fill" style="background: rgb(248, 231, 153);height:60px; top:40%;"></div>
</div>
</div>
<div class="progress-bar">
<div class="progress-track">
<span style="color: rgb(0, 0, 0);top:40%;position:absolute;z-index:1;">0%</span>
<div class="progress-fill" style="background: rgb(248, 138, 138);height:5px; top:95%;">
</div>
</div>
</div>
</div>