Hallo basti1012
hat sich alles erledigt. Fehler behoben und es funktioniert auch so wie es soll.
Danke nochmal.
LG Michael
Hallo basti1012
hat sich alles erledigt. Fehler behoben und es funktioniert auch so wie es soll.
Danke nochmal.
LG Michael
Hallo basti1012
Da hast du schon recht.
Ich bin auch dankbar für jede Hilfe bzw. nehme sie auch an.
Das mit dem Footer in der index.html hab ich ja jetzt hinbekommen (zumindest so, dass er funktioniert) nur bei meiner zweiten Seite hab ich den auch so eingefügt. Nur ist da das Problem, dass zwar die Schreiberei angezeigt wird nicht aber der Hintergrund. Was ich weiß muss man ja nicht für jeder Seite eine eigene CSS schreiben. Oder täusche ich mich da jetzt.
LG Michael
Ja ich weiß. Brauche trotzdem Hilfe.
Jetzt hab ich schon alle möglichen Varianten des Footers probiert zum erstellen. Nichts hat so funktioniert wie ich es wollte.
Kurz erklärt.
Der Footer soll den gleichen Background wie die Navigation haben, über die ganze Breite gehen, das Copyright, Impressum und den Datenschutz beinhalten. ich dachte an Copy links und die anderen zwei rechts und beide mit der gleichen Schriftfarbe.
Ich hoffe mir kann da wer helfen.
Hier sind meine Codes.
Kopiere den HTML-Code mal hier rein: https://validator.w3.org/#validate_by_input
Hab das mal kontrolliert. Fehler erkannt - Fehler behoben und jetzt passt alles.
Hallo.
ich habe das mit der Flexbox jetzt mal ausprobiert. Funktioniert soweit. Würde einer von euch meine html und css kontrollieren? ich hoffe das passt so.
<!DOCTYPE html>
<html lang="de">
<head>
<title>BIRD VIEW Foto & Film</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#über mich">Über mich</a>
<a href="#fotos">Fotos</a>
<a href="#panoramen">Panoramen</a>
<a href="#videos">Videos</a>
<a href="#contact">Kontakt</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px"></div>
<div class="Headerbild"><img src="images/Headerbild.png" alt="Bild"></div>
<div class="row">
<div class="Bild">
<a href="Bilder/1.jpg" rel="lightbox[bild]" title="Bild 1">
<img src="Bilder klein/1.jpg" alt="Bild1" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/2.jpg" rel="lightbox[bild]" title="Bild 2">
<img src="Bilder klein/2.jpg" alt="Bild2" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/3.jpg" rel="lightbox[bild]" title="Bild 3">
<img src="Bilder klein/3.jpg" alt="Bild3" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/4.jpg" rel="lightbox[bild]" title="Bild 4">
<img src="Bilder klein/4.jpg" alt="Bild4" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/5.jpg" rel="lightbox[bild]" title="Bild 5">
<img src="Bilder klein/5.jpg" alt="Bild5" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/6.jpg" rel="lightbox[bild]" title="Bild 6">
<img src="Bilder klein/6.jpg" alt="Bild6" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/7.jpg" rel="lightbox[bild]" title="Bild 7">
<img src="Bilder klein/7.jpg" alt="Bild7" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/8.jpg" rel="lightbox[bild]" title="Bild 8">
<img src="Bilder klein/8.jpg" alt="Bild8" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/9.jpg" rel="lightbox[bild]" title="Bild 9">
<img src="Bilder klein/9.jpg" alt="Bild9" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/10.jpg" rel="lightbox[bild]" title="Bild 10">
<img src="Bilder klein/10.jpg" alt="Bild10" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/11.jpg" rel="lightbox[bild]" title="Bild 11">
<img src="Bilder klein/11.jpg" alt="Bild11" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/12.jpg" rel="lightbox[bild]" title="Bild 12">
<img src="Bilder klein/12.jpg" alt="Bild12" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/13.jpg" rel="lightbox[bild]" title="Bild 13">
<img src="Bilder klein/13.jpg" alt="Bild13" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/14.jpg" rel="lightbox[bild]" title="Bild 14">
<img src="Bilder klein/14.jpg" alt="Bild14" width="100" height="100">
</a>
</div>
<div class="Bild">
<a href="Bilder/15.jpg" rel="lightbox[bild]" title="Bild 15">
<img src="Bilder klein/15.jpg" alt="Bild15" width="100" height="100">
</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>
Alles anzeigen
.topnav{
background-color:lightslategrey;
overflow: hidden;
margin: 0 auto;
width: 90%;
max-width: 1080px;
margin-top: 20px;
border-radius: 10px;
}
/* Headerbild-Anfang */
.Headerbild{
margin: 0 auto;
width: 90%;
max-width: 1080px;
margin-top: 15px;
margin-bottom: 15px;
}
.Headerbild img{
width: 100%;
border-radius: 10px;
/* Headerbild-Ende */
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.topnav a.active{
background-color: #4CAF50;
color: white;
}
.topnav .icon{
display: none;
}
* {
margin: 0;
padding: 0;
}
@media screen and (max-width: 1080px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1080px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Bilder-Anfang */
.Bild{
display: inline-block;
height: 100px;
width: 100px;
margin: 6px;
padding: 5px;
}
.bild{
text-align: center;
margin: 6px;
padding: 0;
}
Alles anzeigen
Hallo Leute.
Sorry Leute, aber ich habe mich da komplett geirrt. Es ist schon das mit der lightbox. Ich habe es schon hinbekommen, aber ein Problem ist da immer noch. Die Bilder sind schön zentriert, aber wenn ich die Seite verkleinere bleiben die Bilder immer noch in einer Reihe, ohne dass sie nach unten rutschen. Irgendwo fehlt da noch was.
Hier der html-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>BIRD VIEW Foto & Film</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#über mich">Über mich</a>
<a href="#fotos">Fotos</a>
<a href="#panoramen">Panoramen</a>
<a href="#videos">Videos</a>
<a href="#contact">Kontakt</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px"></div>
<div class="Headerbild"><img src="images/Headerbild.png" alt="Bild"></div>
<div class="flex">
<a href="Bilder/1-groß.jpg" rel="lightbox[land]" title="Land 1">
<img src="Bilder klein/1.jpg" alt="Bild1" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/2-groß.jpg" rel="lightbox[land]" title="Land 2">
<img src="Bilder klein/2.jpg" alt="Bild2" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/3-groß.jpg" rel="lightbox[land]" title="Land 3">
<img src="Bilder klein/3.jpg" alt="Bild3" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/4-groß.jpg" rel="lightbox[land]" title="Land 4">
<img src="Bilder klein/4.jpg" alt="Bild4" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/5-groß.jpg" rel="lightbox[land]" title="Land 5">
<img src="Bilder klein/5.jpg" alt="Bild5" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/6-groß.jpg" rel="lightbox[land]" title="Land 6">
<img src="Bilder klein/6.jpg" alt="Bild6" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/7.jpg" rel="lightbox[land]" title="Land 7">
<img src="Bilder klein/7.jpg" alt="Bild7" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/8.jpg" rel="lightbox[land]" title="Land 8">
<img src="Bilder klein/8.jpg" alt="Bild8" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/9.jpg" rel="lightbox[land]" title="Land 9">
<img src="Bilder klein/9.jpg" alt="Bild9" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/10.jpg" rel="lightbox[land]" title="Land 10">
<img src="Bilder klein/10.jpg" alt="Bild10" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/11.jpg" rel="lightbox[land]" title="Land 11">
<img src="Bilder klein/11.jpg" alt="Bild11" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/12.jpg" rel="lightbox[land]" title="Land 12">
<img src="Bilder klein/12.jpg" alt="Bild12" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/13.jpg" rel="lightbox[land]" title="Land 13">
<img src="Bilder klein/13.jpg" alt="Bild13" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/14.jpg" rel="lightbox[land]" title="Land 14">
<img src="Bilder klein/14.jpg" alt="Bild14" width="100" height="100">
</a>
<div class="flex">
<a href="Bilder/15.jpg" rel="lightbox[land]" title="Land 15">
<img src="Bilder klein/15.jpg" alt="Bild15" width="100" height="100">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>
Alles anzeigen
und hier das CSS:
.topnav{
background-color:lightslategrey;
overflow: hidden;
margin: 0 auto;
width: 90%;
max-width: 1080px;
margin-top: 20px;
border-radius: 10px;
}
/* Headerbild-Anfang */
.Headerbild{
margin: 0 auto;
width: 90%;
max-width: 1080px;
margin-top: 15px;
margin-bottom: 15px;
}
.Headerbild img{
width: 100%;
border-radius: 10px;
/* Headerbild-Ende */
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.topnav a.active{
background-color: #4CAF50;
color: white;
}
.topnav .icon{
display: none;
}
* {
margin: 0;
padding: 0;
}
@media screen and (max-width: 1080px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1080px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Bilder-Anfang */
.flex{
display: flex;
justify-content: center;
align-items:center;
margin: 5px;
}
Alles anzeigen
Nein ist es nicht. Die von dir gepostete Seite hab ich schon gefunden. Das mit den Pfeilen (rechts/links) hab ich hinbekommen.
Nur das mit den Bildern in einer Box krieg ich nicht hin. Also zum leichteren Verständnis: ein Rahmen --> drinnen die Bilder übereinander (man kann nur ein Vorschaubild sehen) --> beim Anklicken des Rahmens kommen dann alle Bilder und dann kann man die Pix anklicken und mit den vorwärts Tasten durchblättern.
Das steht in der Doku von LightBox
Wo ist die Doku zu finden?
Hallo Leute.
Jetzt hab ich das mal versucht mit der Lightbox in der HTML. Funktioniert auch soweit, Nur wie bekomme ich die jeweiligen Bilder in in eine Box rein bzw. wie bekomme ich die Pfeile rechts/links beim Anklicken auf den Bildern hin?
Hier ist mal der html-Code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="css/lightbox.min.css">
</head>
<body>
<a href="Bilder/1-groß.jpg" rel="lightbox[land]" title="Land 1">
<img src="Bilder klein/1.jpg" alt="Bild1" width="133" height="200">
</a>
<a href="Bilder/2-groß.jpg" rel="lightbox[land]" title="Land 2">
<img src="Bilder klein/2.jpg" alt="Bild2" width="200" height="133">
</a>
<a href="Bilder/3-groß.jpg" rel="lightbox[land]" title="Land 3">
<img src="Bilder klein/3.jpg" alt="Bild3" width="200" height="133">
</a>
<a href="Bilder/4-groß.jpg" rel="lightbox[land]" title="Land 4">
<img src="Bilder klein/4.jpg" alt="Bild4" width="200" height="133">
</a>
<script src="js/lightbox-plus-jquery.min.js"></script>
<div id="lightboxOverlay" class="lightboxOverlay" style="width: 1680px; height: 917px; display: none;"></div>
</body>
</html>
Alles anzeigen
Ach ja. So heißt das. Hab's eh schon mal gehört und auch gesehen. Ist nur schon sehr lange her.
Ja ich weiß. Diese Angaben die ich meine sind seeeehr wage bzw schlecht erklärt. Klick mal diese Webseite an und geh dann auf Bilder. Dort kann man das sehen was ich meine. Wenn man die einzelnen Boxen anklickt. https://www.luftbilder-innviertel.at/index.php/bilder
Nicht fragen.... ausprobieren ;)!
Ich hab´s hinbekommen und auch der Abstand wird mir brav angezeigt.
Mal eine ganz andere Frage. Gibt es sowas wie Boxen wo man Bilder usw. reinsetzen kann? Wenn man die anklickt öffnet sich so ein ähnliches Popup-Fenster öffnet?
Oh nein... jetzt zum mitschreiben
Hi.
Danke für den Code. Es funktioniert. Wenn ich einen kleinen Abstand zwischen Navi und Bild haben möchte brauch ich ja nur beim .headerbild noch das margin-top einsetzen?
Wo ist da die Klasse .Headerbild, die du im CSS für das Div mit dem Bild definiert hast? Außerdem .. das .div .Headerbild geht gar nicht! Eine Klasse .div gibt es nicht!!!
Also 1. das leere Div löschen... 2. dem Div mit mit dem Bild die Klasse Headerbild geben... 3. dem Bild eine Klasse geben und die mit width: 100%; im CSS formatieren.
Stimmt das jetzt in der css?
Das mit der html sollte eigentlich richtig sein.
Kuck mal was da steht , das sollte dich schon weiter bringen
Das hab ich doch so gemacht! Oder sehe ich das falsch?
Hier ist der Code. Ich hab da sicher was übersehen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#über mich">Über mich</a>
<a href="#fotos">Fotos</a>
<a href="#panoramen">Panoramen</a>
<a href="#videos">Videos</a>
<a href="#contact">Kontakt</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px"></div>
<div>
<img src="images/Headerbild.png" alt="Bild">
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Alles anzeigen
.topnav{
background-color:lightslategrey;
overflow: hidden;
margin: 0 auto;
width: 90%;
max-width: 1080px;
}
.div .Headerbild{
margin: 0 auto;
width: 90%;
max-width: 1080px;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.topnav a.active{
background-color: #4CAF50;
color: white;
}
.topnav .icon{
display: none;
}
@media screen and (max-width: 1080px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1080px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Alles anzeigen
Hallo Sailor.
Jetzt hab ich das Ganze mal so probiert, wie du es mir gestern geschrieben hast. Aber leider schaut das alles noch immer sch...... aus.
Hier mal ein Bild davon.
Genau... und dem Div noch eine Klasse geben, damit es vom CSS angesprochen werden kann.
Dem img-Tag auch noch eine Klasse zuweisen, dann das willst du ja auch formatieren.
OK danke erstmal. Mal gleich morgen versuchaen.
Hallo Sailor.
Danke für deine Infos und Tipps.
Ich werde mir das morgen gleich mal anschauen am PC.
Ich habe die HTML Datei bzw das dazugehörige CSS von der Seite W3 School da irgendwie zusammen gestellt.
Ich bin in der Beziehung noch sehr neu. Alslo das mit der div meinst du z. B. So?
<div>
<img src="headerbild. png" alt="Bild" >
</div>
Und das in die html-datei rein?
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.