Wie kann ich die Höhe eines HTML Elementes bestimmen?

Hey, ich habe mir Gestern eine Vorlage für einen Flexslider heruntergeladen und auf meiner Webseite integriert. Mit viel Hilfe habe ich es geschafft. Jedoch gibt es nun Probleme mit der Grösse http://projektarbeit-webseite.de/. Jetzt möchte ich die Grösse dieses Sliders ändern und verstehe den Code der Vorlage nicht wirklich (Vorlage: http://flexslider.woothemes.com/).

Die Grösse sollte ca 1000px breit sein und 500px hoch (wenn möglich)

Die Wichtigen HTML Teile:

<link href="design.css" rel="stylesheet">
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<div class="flexslider"> <ul class="slides">  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li> </ul> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.flexslider-min.js"></script> <script src="javascript.js"></script>

Mein CSS Code:

body {
background-image: url("http://projektarbeit-webseite.de/Unbenannt.png");
background-size: 100%;
margin: 0pt;
}
.title { font-size: 35pt; font-family: Stencil; color: black; text-align: center; background-color: #81DAF5; background-size: 2000px; height: 80px; display: flex; align-items: center; justify-content: center; }


.navigation { background-color: white; font-size: 25px; text-align: center; height: 80px; display: flex; align-items: center; justify-content: center; }


.t { color: gray; font-size: 35px; font-weight: bold; text-align: center; }


a:link, a:active, a:visited { color: gray; }


a:hover { color: black; }

hr {
width: 100%;
border: 0;
height: 5pt;
background-color: #CEECF5;
}

Code der Vorlage:

http://projektarbeit-webseite.de/flexslider.css

Javascript der Vorlage:

$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "slide"
 });
})
Internet, Software, Website, HTML, IT, Programmieren, CSS, Wordpress, JavaScript, slider, Woocommerce
4 Antworten
Javascript Slider funktioniert nicht richtig?

Hallo Leute,

habe heute mit Javascript angefangen und will einen Slider machen, bei dem man auf einen button klickt und sich dann rechts text und links ein Foto ändert. Das Foto wird hier als Background Image eingefügt und der Textbereich besteht aus drei Teilen (Text, Autor und Position). Ich weiß, dass dieser Code viel zu kompliziert ist, aber so ist das eben als Anfänger ^^ Wenn ihr wisst, woran es liegt und wie man es verkürzen kann freue ich mich über eure Antwort.

Vielen Dank!

Hier mein Code:

//Testimonial Slider

function testimonialSlider() {

 //[0] = Slide 1

 //[1] = Slide 2

 //[2] = Slide 3

 //[3] = Slide 4

 //[4] = Slide 5

 var img = ['url("Slide1") no-repeat center center', 'url("Slide 2") no-repeat center center', 'url("Slide 3") no-repeat center center', 'url("Slide 4") no-repeat center center', 'url("Slide 5") no-repeat center center', ];

 var text = ['Text Slide 1', 'Text Slide 2', 'Text Slide 3', 'Text Slide 4.', 'Text Slide 5', ];

 var author = ['Author Slide 1', 'Author Slide 2', 'Author Slide 3', 'Author Slide 4', 'Author Slide 5', ];

 var pos = ['Position Slide 1', 'Position Slide 2.', 'Position Slide 3', 'Postition Slide 4', 'Position Slide 5', ];

 var tIMG = document.getElementById('t_img');

 var tTEXT = document.getElementById('t_testimonial');

 var tNAME = document.getElementById('t_name');

 var tPOS = document.getElementById('t_position');

 var next = document.getElementById('next_button');

 var prev = document.getElementById('prev_button');

 var i = 0;

 next.addEventListener('click', function () {

  tIMG.style.background = img[i];

  tIMG.style.backgroundSize = 'cover';

  tTEXT.innerHTML = text[i];

  tNAME.innerHTML = author[i];

  tPOS.innerHTML = pos[i];

  if (i = 4) {

   i = 0;

  } else {

   i++;

  }

 });

 prev.addEventListener('click', function () {

  tIMG.style.background = img[i];

  tIMG.style.backgroundSize = 'cover';

  tTEXT.innerHTML = text[i];

  tNAME.innerHTML = author[i];

  tPOS.innerHTML = pos[i];

  if (i = 0) {

   i = 4;

  } else {

   i--;

  }

 });

}

Programmieren, JavaScript, Programmierung, JavaScript-Code, slider
3 Antworten

Meistgelesene Fragen zum Thema Slider