AJ Online AJ Online - 9 days ago 5
CSS Question

How to align slideshow element below header?

I'm trying to fix the slideshow on my site. In the imgur below you can see how the alignment of the slideshow is a few pixels off on both sides. I have been playing with the CSS width trying to fix it, but it remains static. How can I fix this? Any tips? thanks

im trying to make the slideshow the same width of the menu and footer

https://jsfiddle.net/e52ygwez/

http://imgur.com/a/3rb5u

<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<link rel="stylesheet" href="index.css" type="text/css"/>

</head>

<div class="container">
<div class="logo">
<h1 align="center">
<img src="logo2.png" height="110" width="500" alt="A.Willi A.G" />
</h1>
</div>

<div class="menu_div"> <!--MENU DIV-->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Bewerber</a>
<div class="dropdown-content">
<a href="info.html">Info</a>
<a href="jobs.html">Jobs</a>
</div>
</li>

<li class="dropdown"> <!--DRPDWN CLIENTS-->
<a href="#" class="dropbtn">Kunde</a>
<div class="dropdown-content">
<a href="personnel.html">Personalverleih</a>
<a href="rental.html">Werkzeuge Mieten</a>
<a href="refrences.html">Referenzen</a>
<a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</ul>
</li>
</div>

<div class="fadein"> <!--SLIDESHOW-->
<img src="panorama.jpg">
<img src="panorama.jpg">
<img src="panorama.jpg">
</div>
<p style="text-align:left;">
Die A.Willi A.G</b> ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tatig mit über 30-jahrige Erfahrung in dieser Sparte. </p>

<footer class="footer-distributed"> <!--LEFT LOGO FOOT-->
<div class="footer-left">
<img src="awlogoblue.png" height="50" width="250" alt="A.Willi A.G" />
<p class="footer-links"> <!--LINKS-->
<a href="#">Home</a>·
<a href="#">Zertifikate</a>·
<a href="#">Datenschutz-Bestimmungen</a>·
<p class="footer-company-name">&copy;2016 A.Willi A.G</p>
</div>

<div class="footer-center"> <!--CENTER-->
<div>
<i class="fa fa-map-marker"></i>
<p><span>Wasgenring 94</span> CH-4055 Basel</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>
</a>
</p>
</div>
</div>

<div class="footer-right"> <!--RIGHT-->
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</footer>

</body>
</div>
</html>



CSS


body

/* font & back clr */

{ font-family: verdana; background:whitesmoke ; color:black; }


.menu_div{

background: black;
width:100%;}


ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}

.logo {
height:
bottom: 0;
position: relative;





}




li {
float: left;
}


/* DROPDOWN Txt Color */

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


/* DROPDOWN Txt BOX Color */


li a:hover, .dropdown:hover .dropbtn {
background-color: #33383b;
}



li.dropdown {
display: inline-block;
}


/* DROPDOWN content clr */

.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}

/* DROPDOWN TEXT CLR */

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}


/* DROPDOWN COL BOX */
.dropdown-content a:hover {background-color: white}



.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; }
}

/* MENU COL */

.menu_div {
position: relative;
z-index: 0;
height: 2.9em;
margin-bottom: -0.4em;
margin-top: 0em;
z-index:1000;

background-color:#33383b;
}



/* slideshow header */



.fadein {
position: relative;
z-index: ;
width: 100%;
top: 0em;
box-sizing: border-box;
border: 3px solid white;
height: 250px;
max-width: 100%;
}

.fadein img{
margin:0 auto;
width: 100%;
max-height: 100%;
}



.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; }



/* page container */



.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}



/* article from jobs */


.article {
text-align: left;
height: 200px;
margin-bottom:11px
}




/* body of text */



textinfo {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;



/* footer opts */



}

.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;

padding: 30px 30px;
margin-top: 100px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}

/* footer left */

.footer-distributed .footer-left{
width: 40%;
}

/* the company logo */

.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}

.footer-distributed h3 span{
color: #5383d3;
}

/* footer links */

.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}

.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}

/* footer center */

.footer-distributed .footer-center{
width: 35%;
}

.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}

.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}

.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}

.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}


/* footer right */

.footer-distributed .footer-right{
width: 20%;
}

.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}

.footer-distributed .footer-icons{
margin-top: 25px;
}

.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;

font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;

margin-right: 3px;
margin-bottom: 5px;
}

/* un responsive rmoval */

@media (max-width: 880px) {

.footer-distributed{
font: bold 14px sans-serif;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}

.footer-distributed .footer-center i{
margin-left: 0;
}


logo {

margin-bottom:100px;

}

Answer

It's being caused by your border from the .fadein class. Remove line 131 from your jsfiddle.

Comments