I am a beginner in CSS3 and HTML5, and right now I'm trying to create a HTML5 and CSS3 website in order to code a PSD mock-up.
The problem came once I started with the slider. Normally it should be a carousel slider with 2 images, a progress bar in the bottom and an animation to make it work in a loop.
So, first I have created a main div with two other divs inside containing radio inputs, that way I could get the next and previous arrows working in order to pass from one slide to another.
Then, in my css file, I've created the #keyframes with the opacity effect to proceed with the fade animation. Unfortunately this is not working as I thought, just the arrows but not the fade animation.
Could someone help me and have a look at my code? I'll really appreciate it!
HERE IS MY HTML5 CODE:
#keyframes click{
0%{ opacity:.4;}
100%{opacity:1;}
}
#keyframes fade{
0% {opacity:1}
45% { opacity: 1}
50% { opacity: 0}
95% {opacity:0}
100% { opacity: 1}
}
#keyframes fade2{
0% {opacity:0}
45% { opacity: 0}
50% { opacity: 1}
95% { opacity: 1 }
100% { opacity:0}
}
#i1, #i2{ display: none;}
.slider{
width: 100%;
height: 550px;
margin: 20px auto;
position: rela
}
#first, #second{
position: absolute;
width: 100%;
height: 100%;
}
.previous{
width: 35px;
height: 70px;
position: absolute;
top:40%;
left:0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 0px 50px 50px 0px;
}
.next{
width: 35px;
height: 70px;
position: absolute;
top:40%;
right: 0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 50px 0px 0px 50px;
}
.prev:hover, .next:hover{
transition: .3s;
background-color: rgba(99, 99, 99, 1);
}
.fas.fa-chevron-left{
position: absolute;
left : 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right{
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}
.slider div#first {
background: url('img1.jpg') no-repeat center;
background-size: cover;
animation:fade 30000s infinite linear;
-webkit-animation:fade 30000s infinite linear;
}
.slider div#second{
background: url('img2.jpg') no-repeat center;
background-size: cover;
animation: fade2 30000ms infinite linear;
-webkit-animation: fade2 30000ms infinite linear;
}
.slide{z-index:-1;}
#i1:checked ~ #first,
#i2:checked ~ #second
{z-index: 10; animation: click 1s ease-in-out;}
<body>
<div class="slider">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<div class="slide" id="first">
<h1>WEBAGENCY: L'AGANCE DE TOUS <br> VOS PROJETS !</h1>
<p>Vous avez un projet ? La WebAgency vous aide à les realiser !</p>
<label class="previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slide" id="second">
<label class="previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i1"><i class="fas fa-chevron-right"></i></label> </div>
</div>
</body>
Unfortunately, I'm not sure if it's possible to combine:
Progress in the bottom
Working buttons on the sides
Auto-advance
Just using CSS/HTML. You need to store your state as radio buttons, but if you advance using a linear animation, what will happen if the user wants to go back? How do you synchronize the state?
You CAN have both progress and working buttons. I have made an example based on your code on how to achieve that, with ability to add 2+ slides.
.radio {
display: none;
}
.slider {
width: 100%;
height: 175px;
position: absolute;
left: 0;
top: 0;
}
.slider__slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: 1s opacity;
}
.slider__slide:nth-of-type(1) {
background: IndianRed;
}
.slider__slide:nth-of-type(2) {
background: Cornsilk;
}
.slider__slide:nth-of-type(3) {
background: PaleTurquoise;
}
.button {
width: 35px;
height: 70px;
position: absolute;
top: 40%;
background-color: rgba(70, 70, 70, 0.6);
}
.button--previous {
left: 0;
border-radius: 0px 50px 50px 0px;
}
.button--next {
right: 0;
border-radius: 50px 0px 0px 50px;
}
.button:hover {
transition: 0.3s;
background-color: rgba(99, 99, 99, 1);
}
.radio:nth-of-type(1):checked ~ .slider__slide:nth-of-type(1),
.radio:nth-of-type(2):checked ~ .slider__slide:nth-of-type(2),
.radio:nth-of-type(3):checked ~ .slider__slide:nth-of-type(3){
opacity: 1;
pointer-events: auto;
}
.progress {
margin: 0;
padding: 0;
position: absolute;
top: 175px;
left: 0;
right: 0;
text-align: center;
list-style-type: none;
}
.progress__item {
position: relative;
display: inline-block;
margin: 1px;
border: 3px solid black;
width: 16px;
height: 16px;
}
.radio:nth-of-type(1):checked ~ .progress .progress__item:nth-of-type(1):before,
.radio:nth-of-type(2):checked ~ .progress .progress__item:nth-of-type(2):before,
.radio:nth-of-type(3):checked ~ .progress .progress__item:nth-of-type(3):before{
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
content: '';
background: black;
}
.fas.fa-chevron-left {
position: absolute;
left: 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right {
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}
<body>
<div class="slider">
<input id="i1" class="radio" name="images" type="radio" checked />
<input id="i2" class="radio" name="images" type="radio" />
<input id="i3" class="radio" name="images" type="radio" />
<div class="slider__slide">
<h1>FIRST SLIDE</h1>
<p>First Subtitle</p>
<label class="button button--previous" for="i3"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>SECOND SLIDE</h1>
<p>Second Subtitle</p>
<label class="button button--previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i3"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>THIRD SLIDE</h1>
<p>Third Subtitle</p>
<label class="button button--previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i1"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="progress">
<label class="progress__item" for="i1"></label>
<label class="progress__item" for="i2"></label>
<label class="progress__item" for="i3"></label>
</div>
</div>
</body>
Related
***Dear all,
for a signup form, i tried to apply media queries rules in order that this flexbox form will appears center and fit the screeen. i have tried different option but i cannot find the solution.
can anyone help please?``
i leave as well my git repository.github project***
how can i make the login form apprearing in center and shrink in case of the screen is small?
<style lang="css" scoped>
.grp-login__grandParentContainer{
display: table;
height: 100%;
background-color:#d7ffd9;
font-size:25px;
margin: 0 auto;
}
.grp-login__parentContainer {
display:table-cell;
background-color:#eaffd7;
background-image: url('~#/assets/logosansnom.png');
height: 50px;
vertical-align: middle;
}
.grp-login__form {
border-style: solid;
border-color: black;
padding: 50px;
}
.grp-login__form__login__button {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: red;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
margin: 50px;
font-size: 25px;
}
.grp-login__form__login__button:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.grp-login__form__login__button:active {
color: red;
}
.grp-login__form__login__button:active:after {
background: transparent;
}
.grp-login__form__login__button:hover:before {
opacity: 1;
}
.grp-login__form__login__button:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: orange;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
#media only screen and (max-width : 1024px) {
.grp-login__grandParentContainer {
display: table;
height: 150px;
background-color:#d7ffd9;
font-size:20px;
margin: 50px;
width: 60%;
}
.grp-login__parentContainer{
text-align:center;
}
}
</style>
<div class="grp-login__grandParentContainer">
<div class="grp-login__parentContainer">
<form class="grp-login__form">
<div class="grp-login__form__email">
<label class="">Email </label>
<input v-model="email" type="email" class="">
</div>
<div class="grp-login__form__password">
<label class="">Mot de passe </label>
<input v-model="password" type="password" class="">
</div>
<div class="grp-login__form__login">
<button #click= "goLogin" type= "button" class="grp-login__form__login__button">Login</button>
</div>
</form>
<div v-if="isError">Erreur de connexion</div>
</div>
</div>
I have two slideshows made in pure CSS in an html page, each one is inside its own tooltip but one of them (Piediluco) doesn't work properly because its images doesn't slide correctly.
body {
background-color: #000000;
}
.tooltip, .tooltip2 {
position: relative;
display: inline-block;
padding: 400px 0 0 0;
margin: 0;
cursor: pointer;
color: #5790ce;
}
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info, .info2 {
box-sizing: border-box;
position: absolute;
bottom: -380px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before, .info2:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after, .info2:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
#i1, #i2, #i3, #i4,
#i12, #i22, #i32, #i42 {
display: none;
}
.container, .container2 {
margin: 0;
position: relative;
width: 100%;
height: 120px;
padding-bottom: 38%;
user-select: none;
background-color: #1c1c1c;
}
.container .slide_img,
.container2 .slide_img2 {
position: absolute;
width: 100%;
height: 100%;
}
.container .slide_img .img,
.container2 .slide_img2 .img2 {
width: inherit;
height: inherit;
}
.container .slide_img .caption,
.container2 .slide_img2 .caption2 {
position: relative;
display: inline-block;
width: 100%;
bottom: 46px;
text-align: center;
padding-top: 5px;
padding-bottom: 14px;
background-color: rgba(242,242,242,.5);
color: #FFFFFF;
}
.lblp, .lbln, .lblp2, .lbln2 {
width: 12%;
height: 22%;
position: absolute;
top: 40%;
background-color: rgba(242,242,242,.3);
z-index: 99;
transition: background-color 1s;
cursor: pointer;
}
.lbln, .lbln2 {
right: 0;
border-radius: 5px 0 0 5px;
}
.lblp, .lblp2 {
left: 0;
border-radius: 0 5px 5px 0;
}
.lblp:hover, .lbln:hover,
.lblp2:hover, .lbln2:hover {
background-color: rgba(242,242,242,.1);
}
.prev, .prev2 {
position: absolute;
font-family: Arial, sans-serif;
color: rgba(244, 244, 244,.9);
font-size: 40pt;
padding: 0 0 15px 20px;
margin: 0;
top: 25%;
transition: color 1s;
}
.next, .next2 {
position: absolute;
font-family: Arial, sans-serif;
color: rgba(244, 244, 244,.9);
font-size: 40pt;
padding: 0 0 15px 25px;
margin: 0;
top: 25%;
transition: color 1s;
}
.prev:hover, .next:hover,
.prev2:hover, .next2:hover {
color: rgba(244, 244, 244,1);
}
.slide_img, .slide_img2 {
z-index: -1;
}
#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four,
#i12:checked ~ #one2,
#i22:checked ~ #two2,
#i32:checked ~ #three3,
#i42:checked ~ #four2 {
z-index: 9;
animation: scroll 1s ease-in-out;
}
#keyframes scroll{
0%{ opacity:.4;}
100%{opacity:1;}
}
.text, .text2 {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more, .more2 {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover, .more:focus,
.more2:hover, .more2:focus {
background-color: green;
color: #FFFFFF;
}
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="container">
<input type="radio" id="i1" name="images" checked>
<input type="radio" id="i2" name="images">
<input type="radio" id="i3" name="images">
<input type="radio" id="i4" name="images">
<div class="slide_img" id="one">
<img class="img" src="https://i.imgur.com/W5E69l9.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i4"><span class="prev">‹</span></label>
<label class="lbln" for="i2"><span class="next">›</span></label>
</div>
<div class="slide_img" id="two">
<img class="img" src="https://i.imgur.com/eGbNeOB.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i1"><span class="prev">‹</span></label>
<label class="lbln" for="i3"><span class="next">›</span></label>
</div>
<div class="slide_img" id="three">
<img class="img" src="https://i.imgur.com/hp2OiNB.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i2"><span class="prev">‹</span></label>
<label class="lbln" for="i4"><span class="next">›</span></label>
</div>
<div class="slide_img" id="four">
<img class="img" src="https://i.imgur.com/MHZj0eb.jpg">
<span class="caption">...................</span>
<label class="lblp" for="i3"><span class="prev">‹</span></label>
<label class="lbln" for="i1"><span class="next">›</span></label>
</div>
</div>
<div class="text">...................................................</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>
<div onclick="void(0);" class="tooltip2">Piediluco
<div class="info2">
<div class="container2">
<input type="radio" id="i12" name="images2" checked>
<input type="radio" id="i22" name="images2">
<input type="radio" id="i32" name="images2">
<input type="radio" id="i42" name="images2">
<div class="slide_img2" id="one2">
<img class="img2" src="https://i.imgur.com/S12ZVXY.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="two2">
<img class="img2" src="https://i.imgur.com/3JcEZp7.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="three2">
<img class="img2" src="https://i.imgur.com/kayLkDW.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
<div class="slide_img2" id="four2">
<img class="img2" src="https://i.imgur.com/gfRwbU2.jpg">
<span class="caption2">.....................</span>
<label class="lblp2" for="i32"><span class="prev2">‹</span></label>
<label class="lbln2" for="i12"><span class="next2">›</span></label>
</div>
</div>
<div class="text2">...................................................</div>
<a class="more2" href="#" target="_blank">More</a>
</div>
</div>
How can I find the error/s?
.box {
width: 40%;
margin: 0 auto;
padding: 35px;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
display: inline-block;
}
.button {
font-size: 1em;
padding: 10px;
color: #222;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
z-index: 999 !important;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
This is my css on a button which will trigger a popup window. However, some of the elements under(supposed to be) the popup showed up and covered the text on the popup window. I have already tried to set the z-index to 99999 but it doesn't work at all. Any idea?
Below is the html code as suggested
<div class="box">
<a class="button" href="#popup1">News</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Upcoming event</h2>
<a class="close" href="#">×</a>
<div class="content">
Christmas is coming! The first ever Christmas tour to Australia is coming soon. We are looking forward to see you.
</div>
</div>
</div>
Edited:
I guess I need to provide more to explain. The input field below and the iframe element will covered my pop up window, not just simply appear behind the popup due to the transparent property. The background will be in a little of gray after the popup triggered, but the element will be shown in background color of white which the default color of my webpage. And the below element showed up without being covered....
<div class="container">
<div class="row">
<div class="col-lg-6">
Youtube Playlist
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
Youtube Single Video
</div>
</div>
<form class="form-horizontal" method="POST">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('yttt') .style.display=='none') {document.getElementById('yttt') .style.display=''}else{document.getElementById('yttt') .style.display='none'}">Show/Hide</button></span>
<input type="text" class="form-control" id="ytlistbox"><span class="input-group-btn"><button class="btn btn-default" id="listclick">Preview</button></span>
<span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confirm</button></span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('ytt') .style.display=='none') {document.getElementById('ytt') .style.display=''}else{document.getElementById('ytt') .style.display='none'}">Show/Hide</button></span>
<input type="text" class="form-control" id="ytsinglebox"><span class="input-group-btn"><button class="btn btn-default" id="singleclick">Preview</button></span>
<span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confrim</button></span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</form>
<br />
<?php
$query2 = mysql_query("SELECT listurl, singleurl FROM tbluser WHERE user_Id = '$userid'");
$row2 = mysql_fetch_assoc($query4);
?>
<div id="yttt" class="col-lg-6" style="display: ;">
<iframe id="ytlist" src="https://www.youtube.com/embed/videoseries?list=<?php echo $row2['$listurl']?>&autoplay=1&loop=1" name="ytlist" width="550" height="400" frameborder="0" allowfullscreen></iframe>
</div>
<div id="ytt" class="col-lg-6" style="display: ;">
<iframe id="ytsingle" src="" name="ytsingle" width="550" height="400" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I know quite a few of the advantage for using mysqli, strip_tag() and real_escape_string() function for security purpose. Please don't mention them again.
add top property 0
.overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:999;
}
May be you should give z-index to .overlay
.overlay{
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:999;
}
or
This is happening because you have used semi transparent background-color for .overlay
background: rgba(0, 0, 0, 0.7);
If you don't want to show background element then use solid color #000 or #888 etc.
.box {
width: 40%;
margin: 0 auto;
padding: 35px;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
display: inline-block;
}
.button {
font-size: 1em;
padding: 10px;
color: #222;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background: #888;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
z-index: 999 !important;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
<div class="box">
<a class="button" href="#popup1">News</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Upcoming event</h2>
<a class="close" href="#">×</a>
<div class="content">
Christmas is coming! The first ever Christmas tour to Australia is coming soon. We are looking forward to see you.
</div>
</div>
</div>
<h1><center>User profile</center></h1>
You need z-index to control divs/elements layers position.
FYI: z-index needs position property to work, like relative, absolute, fixed...
I want to make borders to be consistent throughout the pages. What do you think is the best method to do this? I have added an image below, I had in mind to have the red areas blank, cutting the menu borders and all the rest on the sides so it all looks aligned and centered. thanks a mil
https://jsfiddle.net/q97kob5b/
HTML
body {
font-family: verdana;
background: white;
color: black;
}
.menu_div {
background-color: #333;
width: 100%;
}
ul {
list-style-type: none;
margin: 0 auto;
display: table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
#keyframes fade {
0% {
opacity: 0;
}
11.11% {
opacity: 1;
}
33.33% {
opacity: 1;
}
44.44% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.fadein {
position: absolute;
height: 102px;
width: 50px;
outline: 1px solid blue;
}
.fadein img {
position: absolute;
left: 0;
right: 0;
opacity: 0;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
}
.fadein img:nth-child(1) {
animation-delay: 0s;
}
.fadein img:nth-child(2) {
animation-delay: 3s;
}
.fadein img:nth-child(3) {
animation-delay: 6s;
}
.menu_div {
position: relative;
z-index: 0;
border: dashed;
height: 2.9em;
margin-bottom: 0em;
margin-top: 0em;
z-index: 1000;
}
.fadein {
position: relative;
z-index: 3;
background:;
width: 100%;
left: 1px;
top: 0em;
}
.fadein img {
margin: 0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 500%;
}
.tech-slideshow {
height: 200px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
opacity: 1;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
form {
background-color: #f7f7f7;
border: 2px solid black;
/* Just to center the form on the page */
margin: auto;
width: 1000px;
height: 500px;
/* To see the limits of the form */
padding: 7em;
border: 400px solid white;
border-radius: 10em;
}
div + div {
margin-top: 0.5em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 130px;
text-align: left;
}
input, textarea {
/* To make sure that all text field have the same font settings
By default, textarea are set with a monospace font */
font: 0.9em verdana;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid;
}
input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text field with their label */
vertical-align: top
/* To give enough room to type some text */
height: 20em;
/* To allow users to resize any textarea vertically
It works only on Chrome, Firefox and Safari */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 400px; /* same size as the label elements */
}
button {
/* This extra magin represent the same space as the space between
the labels and their text fields */
margin-left: .4em;
}
<!DOCTYPE html>
<html>
<head>
<title>Bewerbungsformular</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<h1 align="center"> <img src="logo.png" alt="A.Willi A.G" /> </h1>
<div class="menu_div">
<ul>
<li>Home</li>
<li class="dropdown"> Bewerber
<div class="dropdown-content"> Info Jobs </div>
</li>
<li class="dropdown">Kunde
<div class="dropdown-content"> Personalverleih Werkzeuge Mieten Referenzen Qulität, Sicherheit und Weiterbildung </div>
</li>
<li>Kontakt</li>
</ul>
</div>
<div class="fadein"> <img src="welder1.png"> <img src="welder2.png"> <img src="welder3.png"> </div>
<div class="fadein img"> </div>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
<div>
<h2>Bewerbungsformular</h2>
<label for="name">Vorname*</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">Nachname*</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">E-Mail*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Telefon*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Nationalität*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Alter*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="msg">Beruf*</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<form action="upload.php" method="post" enctype="multipart/form-data">
Lebenslauf oder Bewerbung und Beilagen*
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</body>
</html>
The best way to do this would be to wrap your content within a container, and set the max-width for this (70%) or so, then if you want to add borders to this container you can do so.
Add <div class="container"> before any content you want to be centered/contained, then close the div at the end, and add the following to your css:
.container {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
Wrap your page inside a
<div id="wrapper">
your content here
</div>
/* add this to css */
#wrapper {
width:960px; /*put here the width you want*/
margin: 0 auto;
}
/*-----*/
I have a problem with my slider.
Currently on my homepage it works fine. But when i resize it to a mobile version (max: 480px), the image dissapears while resizing from 1920px to 480px. The slider itself (the buttons and border) stay the same, it's basically only the image itself. Jsfiddle: https://jsfiddle.net/s8jotqj3/2/
/* slider test*/
#Slider {
width: 100%;
max-width: 1940px;
height: 470px;
margin-top:-150px;
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
height: 470px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slide img {
width: 25%;
float:left;
}
That's the code for the normal desktop screen.
This is my HTML code:
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href=""><img class="testshow" src="images/slide3.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide4.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide2.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide1.jpg" /></a>
</div>
</div>
</div>
So the main issue you were facing is that by using <img> tags your images were scaling proportionately and disappearing upwards out of view. The reason you couldnt see this was because of the margin-top:-150px that was on the outermost container <div>.
By switching to divs with background-image styles you can use the css property background-size to make sure the image stays visible (I have selected cover as the background-size attribute, but feel free to use contain instead, you will just see some of the background grey color in doing so). I have added comments to the HTML and CSS where necessary to mark important changes, and show you what i removed.
CSS
/* slider test*/
#SliderVanbuiten {
width: 100%;
max-width: 1940px;
// height: 470px;
// margin-top:-150px; // why is this here?
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
position:relative;
//height: 470px;
//position: absolute;
//top: 0;
//left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size:0; // fixes inline-block spacing
}
.slide {
position:relative;
width:25%;
padding-bottom:440px; // must match bgslide margin-top
height:0;
display:inline-block;
}
.slide > div {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background-size:cover;
background-position:center center;
}
HTML
<body>
<main class="home">
<div class="wallpaper1">
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
</div>
</div>
</div>
</div> <!-- missing a closing </div> -->
</main>
</body>
UPDATED JS FIDDLE
JS Fiddle