Beiträge von SCHW4RZ

SCHW4RZ · 28. April 2017

Hi, ich brauche eure Hilfe!
Und zwar müssen wir in einem Projekt in Informatik einen eigenen kleinen Webshop basteln.
Aber da wir erst seit Anfang Dezember HTML lernen, bekomme ich meinen Fehler nicht heraus.
Meine Frage ist: Ich habe am Anfang des Body Bereichs ein Bild eingefügt, dass Logo.png heißt und auf diesem eine Verlinkung angebracht, aber bei mir ist die Verlinkung, wenn ich es im Browser teste immer über dem Bild und ganz an der linken Seite! Ich weiß nicht wie man das behebt!

Das Bild ist hier auch im Beitrag falls ihr mir helfen wollt, die Slideshow könnt ihr ignorieren, die funktioniert nach meinen Vorstellungen.

Bitte um schnelle Hilfe! Danke!

Hier der Code:

HTML

<!doctype html><html><head><meta charset="utf-8"><title>SCHWARZMARKT</title><link href="style.css" rel="stylesheet" type="text/css"></head><body>

<div class="blauesdiv"><a href="Webshop_Hauptseite.html"><img src="Logo.png" style="width: 100px; height: 50px;"></a><div id="Suchfeld" style="width: 90%"><form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"><input type="text" name="suchfeld" id="eingabefeldsuche"> <!-- im css width auf 70% und die kanten abrunden --><input type="submit" value="Suchen"></form> </div><br><table style="width: 100%"><tr><td class="kategorientd">Ego Shooter</td><td class="kategorientd">Stealth</td><td class="kategorientd">Adventure</td><td class="kategorientd">RPG</td><td class="kategorientd">Strategy</td><td class="kategorientd">Jump 'n' Run</td></tr>    </table><br>    </div><div id="inhalt">

<div class="slideshow-container" style="top: 100px"><div class="mySlides fade">

<a href="Webshop_produkseite_csgo.html"><img src="spielebilder/csgo.png" style="width:1000px" height="500px"></a><div class="text">COUNTER STRIKE GLOBAL OFFENSIVE</div></div><div class="mySlides fade">

<img src="spielebilder/playerunknown.png" style="width:1000px" height="500px"><div class="text">PLAYERUNKOWN'S BATTLEGROUNDS</div></div><div class="mySlides fade">

<img src="spielebilder/hitman.png" style="width:1000px" height="500px"><div class="text">HITMAN</div></div></div><br><div style="text-align:center"> <span class="dot" onClick="currentSlide(1)" style="visibility:hidden"></span> <span class="dot" onClick="currentSlide(2)" style="visibility:hidden"></span> <span class="dot" onClick="currentSlide(3)" style="visibility:hidden"></span> </div><script>var slideIndex = 0;showSlides();

function showSlides() {var i;var slides = document.getElementsByClassName("mySlides");for (i = 0; i < slides.length; i++) {slides.style.display = "none";  } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1}  slides[slideIndex-1].style.display = "block";  setTimeout(showSlides, 5000); // Change image every 2 seconds}for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", "");} slides[slideIndex-1].style.display = "block";  dots[slideIndex-1].className += " active"; </script></div><div style="margin-bottom: 0px; position: absolute; text-align: center; width: 99%; font-family: Times New Roman">SCHWARZMARKT - Alle Rechte vorbehalten &ensp; ©2017-2017</div></body></html>

Alles anzeigen

Und hier das CSS:

CSS

@charset "utf-8";
/* CSS Document */
body {background-image:url(jhg.jpg); font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif}


p {font-size:15px;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}


h1 {font-size:150px;
    color:#123;
    background-color:#456;}






.blue {color:#00F}


#wrapper {
width: 610px;
margin: 0 auto;
}


#leftCol {
float: left;
width: 200px;
}


#centerCol {
margin: 0 205px;
}


#Suchfeld {
float: right;
width: 340px;
padding-top: 14px;
}


.blauesdiv {
background-color:#232f3e;
color:#FFF;
position: absolute;
left: 0px;
width: 100%;
margin: 0 auto;
top: 0px;
}


#Suchbutton {
float: right;    
}


.weisdiv {
    background-color:#FFF;
}






.textvertikalzentrieren {min-height: 10em; display: table-cell; vertical-align: middle}


* {box-sizing:border-box}


/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
}


.mySlides {
 display: none;
}


/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 background-color: rgba(0,0,0,0.8);
}


/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}


/* Number text (1/3 etc) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}


/* The dots/bullets/indicators */
.dot {
 cursor:pointer;
 height: 13px;
 width: 13px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}


.active, .dot:hover {
 background-color: #717171;
}


/* Fading animation */
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}


@-webkit-keyframes fade {
 from {opacity: .2} 
 to {opacity: 1}
}


@keyframes fade {
 from {opacity: .2} 
 to {opacity: 1}
}


.kategorientd {
    color: #FFFFFF;
    text-align: center;
    width: 16.6666666666666666666%;
    position: relative;
}


#eingabefeldsuche {
    width: 70%;
    border-radius: 5px;
}


html, body {
    height: 100%;
}


#inhalt {
    min-height: 100%;
    min-width: 100%;
    position: relative;
    margin: 0 auto;
}


#spielbild1 {
    align-self: center;
}


.w3-container{
    position: relative;
    padding-left: 50%;
}


/* Main carousel style */
.carousel {
 width: 600px;
}


/* Indicators list style */
.article-slide .carousel-indicators {
 bottom: 0;
 left: 0;
 margin-left: 5px;
 width: 100%;
}
/* Indicators list style */
.article-slide .carousel-indicators li {
 border: medium none;
 border-radius: 0;
 float: left;
 height: 54px;
 margin-bottom: 5px;
 margin-left: 0;
 margin-right: 5px !important;
 margin-top: 0;
 width: 100px;
}
/* Indicators images style */
.article-slide .carousel-indicators img {
 border: 2px solid #FFFFFF;
 float: left;
 height: 54px;
 left: 0;
 width: 100px;
}
/* Indicators active image style */
.article-slide .carousel-indicators .active img {
 border: 2px solid #428BCA;
 opacity: 0.7;
}

Alles anzeigen