Как выровнять элемент слайд-шоу под заголовком?

Я пытаюсь установить слайд-шоу на своем сайте. В imgur ниже вы можете увидеть, как выравнивание слайд-шоу на несколько пикселей выключено с обеих сторон. Я играю с шириной CSS, пытаясь ее исправить, но он остается статичным. Как я могу это исправить? Какие-нибудь советы? благодаряКак выровнять элемент слайд-шоу под заголовком?

им пытаются сделать слайд-шоу имеет такую же ширину меню и нижний колонтитулы

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; 

    }

источник

2016-11-25 A.J.W

Не совсем уверен, что это работает из-за того, что jsfiddle не загружает ваши локальные изображения, но ваш заголовок (.fadein, я считаю) не закрыт. Это может быть проблемой, но также может быть, что ваши изображения слайд-шоу не такие большие, как .container. – vladdobra

Это вызвано вашей границей от класса .fadein. Удалите строку 131 из jsfiddle.

источник

2016-11-25 18:20:32 davidatthepark

спасибо, что исправил его, мне было интересно, что это было lol –

Нет проблем! Я смог быстро найти проблему с хромовым инспектором. Что-то посмотреть, когда у вас есть время! Кроме того, я иногда добавляю разные цветовые границы, чтобы увидеть, где может быть проблема. – davidatthepark

Как выровнять слайд-шоу под заголовком. Ну, я не нашел элемент с именем header. В любом случае, если вы хотите, чтобы элемент был выше других элементов, вам нужно установить z-index этому элементу.

Что-то вроде:

header{ 
    z-index:100; 
} 

.all other elements to be below{ 
    z-index:1; // As long as an element z-index is below 100 or not set header stays on the top 
}

Успехов!

источник

2016-11-25 18:18:36

Это называется .fadein, для справки. Парень спрашивает, как исправить несоосность изображения и заголовка над ним, а не z-index. – vladdobra

Как выровнять элемент слайд-шоу под заголовком?

ответ

Смежные вопросы