Probleme bewegen mein css image slider

Ich habe ein Tutorial auf youtube gefolgt, wie eine CSS-Bild Schieber zu machen. Ich habe es geschafft, es zu zentrieren, aber ich habe Probleme, es hochzuziehen und die Grenze um das Bild herum zu machen. Wie kann ich das machen. Vielen Dank.

.sidebar { 
 
\t position: fixed; 
 
\t height:100%; 
 
\t left: 0; 
 
\t top: 0px; 
 
\t width: 300px; 
 
\t background:#808080; 
 
\t border: 3px solid #555; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t font-size: 50px; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
\t color:#f2f2f2; 
 
} 
 

 
h2 { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t margin-top:30px; 
 
\t color:#e6e6e6; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
} 
 

 

 
.sideimage { 
 
\t text-align: center; 
 
\t padding-top: 30px; 
 
} 
 

 
.con { 
 
\t border: 5px solid red; 
 
\t width: 700px; 
 
\t height: 500px; 
 
\t margin: 300px auto; 
 
\t overflow: hidden; 
 
\t padding-left: 300px 
 
} 
 

 
.img { 
 
\t position: absolute; 
 
\t width: 700px; 
 
\t height: 500px; 
 
\t animation: mm 15s infinite; 
 
\t -webkit-animation: mm 15s infinite; 
 
\t opacity: 0; 
 
} 
 
\t 
 
@keyframes mm{ 
 
\t 10%{opacity:1} 
 
\t 45%{opacity:0} 
 
} 
 

 
@-webkit-keyframes mm{ 
 
\t 10%{opacity:1} 
 
\t 45%{opacity:0} 
 
} 
 

 

 
img:nth-child(0){animation-delay: 0s;-webkit-animation-delay: 0s;} 
 
img:nth-child(1){animation-delay: 5s;-webkit-animation-delay: 5s;} 
 
img:nth-child(2){animation-delay: 10s;-webkit-animation-delay: 10s;} 
 

 

 
.main_image { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t margin-top: 100px; 
 
} 
 

 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    background-color: #66b3ff; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
\t font-size: 30px; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
\t border-bottom: 3px solid #555; 
 
} 
 

 

 
li a:hover { 
 
    background-color:#27C0FD; 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 
<link rel="stylesheet" type="text/css" href="index.css"> 
 
<html> 
 
<body bgcolor="#3399ff"> 
 

 
<h1> Informational Tech Site</h1> 
 

 
<h2>This website is the place in which you can find all the information about what building games actually looks like in a workplace environment. 
 
</h2> 
 

 
<div class="con"> 
 
<img src="images/image slider1.png" class="img"> 
 
<img src="images/image slider 2.png" class="img"> 
 
<img src="images/image slider 3 .png" class="img"> 
 
</div> 
 

 

 
<body> 
 
<div class="sidebar"> 
 
\t <ul> 
 
\t <div class="sideimage"><img src="images/website logo draft.png" height="70" width="110"/></div> 
 
\t 
 
\t <li><a href="index.html">Home</a> </li> 
 
\t <li><a href="page 2.html">page 2</a></li> 
 
\t <li><a href="page 3.html">page 3</a></li> 
 
\t <li><a href="page 4.html">page 4</a></li> 
 
\t <li><a href="page 5.html">page 5</a></li> 
 
</ul> \t 
 
</div> 
 

 

 

 

 
</body>

Quelle

2016-03-28 Droid2

Hier ist der Code Ich möchte den Bildregler im blauen Bereich zentrieren. https: // jsfiddle.net/wcek0eo5/ – Droid2

Um das zu tun, was Sie wollen, nur das ändern:

.con { 
    border: 5px solid red; 
    width: 700px; 
    height: 500px; 
    margin-left: 300px; /* Change 1 */ 
    overflow: hidden; 
    /* padding-left: 300px; Change 2 */ 
}

Änderung 1: ich links nur margin-left, weil es der einzige Rand war, den Sie brauchten, denken Sie daran, dass Sieverwendengesetzt margin: top/bottom left/right; so würde es wie folgt aussehen:

margin-top: 300px; 
margin-right: auto; 
margin-bottom: 300px; 
margin-left: auto;

Change 2: I Polsterung entfernt, weil es Ihre Grenze weg schob. Halten Sie dieses Bild im Kopf, die Nutzung und die Unterschiede zwischen Marge und Polsterung zu verstehen: sind

Die CSS-Marge Eigenschaften verwenden Raum um Elemente zu erzeugen. Die Randeigenschaften legen die Größe des Leerraums OUTSIDE der Grenze fest.

Die CSS-Padding-Eigenschaften werden verwendet, um um den Inhalt herum Platz zu schaffen. Die Padding-Eigenschaften legen die Größe des Leerraums zwischen dem Elementinhalt und dem Elementrahmen fest.

Meine Meinung

Ich kann sehen, dass Sie Web lernen zu entwickeln, so lassen Sie mich vorschlagen Bootstrap verwenden und zu lernen.

Bootstrap:http://getbootstrap.com/getting-started/

Sie erfahren, wie ein Raster zu verwenden, besser organisiert und ansprechende Themen zu erstellen, und Sie werden die Macht haben, es Javascript bereit ist, Komponenten zu verwenden.

Sie von Grund auf neu hier lernen können: http://www.w3schools.com/bootstrap/

Plus hat es auch ein Karussell und es ist toll! http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Quelle

2016-03-28 05:37:57 xWaZzo

Hallo, danke für deine Hilfe. Ich habe diese Änderungen vorgenommen und das ist das Ergebnis. https://imgur.com/LDD1Yo2 Wie kann ich den Bildregler im blauen Bereich zentrieren? – Droid2

Hier ist der Code Ich habe gerade ein anderes Bild verwendet. https://jsfiddle.net/wcek0eo5/ Ich möchte den Bildregler im blauen Bereich zentrieren. – Droid2

Sie müssen einen neuen Wrapper hinzufügen, damit Sie den Schieberegler zentrieren können. Dein Ex. aktualisiert: https://jsfiddle.net/xwazzo/fc1u3xpf/2/ Ich empfehle wirklich Bootstrap lernen, weil dies wirklich unordentlich wird und wir lösen, aber nicht mit guten Praktiken. Bitte wählen Sie meine Antwort Wenn es Ihnen gefallen hat. – xWaZzo

Bitte versuchen Sie dies:

div.con img{border:5px solid red}

Quelle

2016-03-28 05:18:30 satya

Verwenden Sie das folgende modifizierte HTML und CSS Ihre erforderliche Ausgabe zu erhalten.

HTML ::

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"></head> 
<body bgcolor="#3399ff"> 
<div class="main-container"> 
<h1> Informational Tech Site</h1> 
<h2>This website is the place in which you can find all the information about what building games actually looks like in a workplace environment. 
</h2> 
<div class="con"> 
<img src="images/image slider1.png" class="img"> 
<img src="images/image slider 2.png" class="img"> 
<img src="images/image slider 3 .png" class="img"> 
</div> 
</div> 

<div class="sidebar"> 
<ul> 
<div class="sideimage"><img src="images/website logo draft.png" height="70" width="110"/></div> 

<li><a href="index.html">Home</a> </li> 
<li><a href="page 2.html">page 2</a></li> 
<li><a href="page 3.html">page 3</a></li> 
<li><a href="page 4.html">page 4</a></li> 
<li><a href="page 5.html">page 5</a></li> 
</ul> 
</div> 
</body> 
</html>

CSS ::

.sidebar { 
position: fixed; 
height:100%; 
left: 0; 
top: 0px; 
width: 300px; 
background:#808080; 
border: 3px solid #555; 
} 

.main-container{ 
float: right; 
width: 75%; 
} 

h1 { 
text-align: center; 
/*padding-left: 300px;*/ 
font-size: 50px; 
font-family: "Verdana", Geneva, sans-serif; 
color:#f2f2f2; 
} 

h2 { 
text-align: center; 
/*padding-left: 300px;*/ 
margin-top:30px; 
color:#e6e6e6; 
font-family: "Verdana", Geneva, sans-serif; 
} 


.sideimage { 
text-align: center; 
padding-top: 30px; 
} 

.con { 
border: 5px solid red; 
width: 700px; 
height: 500px; 
margin: 0 auto; 
overflow: hidden; 
/*padding-left: 300px*/ 
} 

.img { 
position: absolute; 
width: 700px; 
height: 500px; 
animation: mm 15s infinite; 
-webkit-animation: mm 15s infinite; 
opacity: 0; 
} 

@keyframes mm{ 
10%{opacity:1} 
45%{opacity:0} 
} 

@-webkit-keyframes mm{ 
10%{opacity:1} 
45%{opacity:0} 
} 


img:nth-child(0){animation-delay: 0s;-webkit-animation-delay: 0s;} 
img:nth-child(1){animation-delay: 5s;-webkit-animation-delay: 5s;} 
img:nth-child(2){animation-delay: 10s;-webkit-animation-delay: 10s;} 


.main_image { 
text-align: center; 
/*padding-left: 300px;*/ 
margin-top: 100px; 
} 


ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 300px; 
background-color: #66b3ff; 
} 

li a { 
display: block; 
color: #000000; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
font-size: 30px; 
font-family: "Verdana", Geneva, sans-serif; 
border-bottom: 3px solid #555; 
} 


li a:hover { 
background-color:#27C0FD; 
color: #000000; 
}

Quelle

2016-03-28 05:24:42 WisdmLabs

Probleme bewegen mein css image slider

Antwort

Verwandte Themen