Guten Morgen Leute,
[bin durch einen Freund der momentan auf einer Fachschule ist auf eine seiner Aufgaben gestoßen....
Konnte ich mir schon denken, dass die Aufgabe nicht von Deinem Kumpel ist.
Guten Morgen Leute,
[bin durch einen Freund der momentan auf einer Fachschule ist auf eine seiner Aufgaben gestoßen....
Konnte ich mir schon denken, dass die Aufgabe nicht von Deinem Kumpel ist.
Du solltest die Aufgabe wie gefordert umsetzen. Das mit JS kannst du zum Schluss machen.
Am einfachsten mit JQuery. Es geht auch zur Not mit CSS Only. Google einfach und du wirst mit Sicherheit fündig werden.
Möglicherweise wurde die Datei bereits als .html Datei abgespeichert und du hast somit zwei Dateierweiterungen. Beispiel. index.html.html. Oder auch mit .htm.htm. Lass dir mal im Dateimanager die Dateierweiterungen anzeigen.
@edit: Muss mich korrigieren. Wenn es ein normaler Texteditor ist, werden die Dateien mit der Erweiterung .txt abgespeichert. In deinem Fall sollte die Deitei vielleicht Dateiname.HTM.txt lauten.
Da fällt mir ein, dass es mit einem Float/Margin-Layout gehen könnte, die leeren Elemente zu umgehen. Werde es mal probieren.
Auch wenn es mit Flexbox geht, würde ich für einen Kalender eine normale Tabelle(table) nehmen. Und wenn der Kalender dynamisch erzeugt wird, sind leere Elemente nicht zu vermeiden.
So, nun gebe ich auch noch einen dazu.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flexboxkalender</title>
<style>
body {
counter-reset: b;
}
section {
display:flex;
}
.kalender {
margin:10px;
width:33.334%;
display:flex;
flex-wrap:wrap;
border-top:1px solid #000;
border-right:1px solid #000;
}
.kalender h3 {
margin:0;
padding:5px;
flex-basis:100%;
border-left:1px solid #000;
border-bottom:1px solid #000;
background:#0c9;
}
.kalender b {
flex-basis:14.28%;
box-sizing:border-box;
padding:5px;
text-align:right;
border-left:1px solid #000;
border-bottom:1px solid #000;
}
.kalender b:nth-child(1n+1) {
background:#eee;
}
.kalender b:nth-child(1n+9) {
font-weight:normal;
background:#fff;
}
.kalender b:nth-child(7n+8) {
color:red;
}
.kalender b:before {
content:"";
padding:5px;
}
/* Dynamik simulieren*/
.kalender:nth-of-type(1) b:nth-child(1n+14):before {
counter-increment: b;
content:counter(b);
}
.kalender:nth-of-type(1) b:nth-child(1n+45):before {
content:"";
}
.kalender:nth-of-type(2) b:nth-child(1n+10):before {
counter-increment: b;
content:counter(b);
}
.kalender:nth-of-type(2) b:nth-child(1n+40):before {
content:"";
}
.kalender:nth-of-type(3) b:nth-child(1n+12):before {
counter-increment: b;
content:counter(b);
}
.kalender:nth-of-type(3) b:nth-child(1n+43):before {
content:"";
}
.reset {
counter-reset: b;
}
</style>
</head>
<body>
<section>
<div class="kalender">
<h3>Oktober 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>
<div class="kalender reset">
<h3>November 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>
<div class="kalender reset">
<h3>Dezember 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>
</section>
</body>
</html>
Alles anzeigen
So?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button</title>
<style>
* {
margin:0;
padding:0;
}
/* Optional, ist aber besser */
.kontakt {
float:left;
width:100%;
background-color: #eef;
}
button:nth-of-type(1) {
float:left;
border:none;
margin-left:20%;
cursor: pointer;
}
button:nth-of-type(2) {
float:right;
border:none;
margin-right:20%;
cursor: pointer;
}
</style>
</head>
<body">
<div class="kontakt">
<button onclick="phoneNumber()" type="submit">
<img src="images/phone.jpg" width="200px" height="200px" alt="Telefonisch" />
</button>
<button onclick="mailCLient()" type="submit">
<img src="images/mail.jpg" width="200px" height="200px" alt="per Mail" />
</button>
</div>
</body>
</html>
Alles anzeigen
Ich glaube du suchst eine Bildergalerie. Suche mal im Netz, ob du dort etwas für dich findest. Oder, wenn du dich etwas mit PHP auskennst, kannst du dein Verzeichnis nach deinen Vorstellungen auslesen und die Bilder anzeigen.
Kopiere dir mal die zwei Seiten und probier mal.
Hauptseite.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ankertest</title>
<style>
</style>
</head>
<body>
<a href="unterseite.html#footer">Hier geht's zum Footer der Unterseite</a>
</body>
</html>
Alles anzeigen
Unterseite.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unterseite</title>
<style>
hr {
height:50px;
}
:target {
background:#a33;
color:#fff;
}
</style>
</head>
<body>
<h1>Hier ein paar Linien zum Auffüllen.</h1>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<footer id="footer">Seitenende</footer>
</body>
</html>
Alles anzeigen
Was ist dein Problem? bekommst du das Verzeichnis nicht angezeigt? Poste hier mal den gesamten Code.
Ich vermute mal, dass er es so meint.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
ul {
margin:0;
padding:0;
list-style:none;
}
li {
margin:3px;
border:1px solid #000;
float:left;
}
li a , li img {
padding:5px;
display:inline-block;
vertical-align:middle;
background:#eee;
}
</style>
</head>
<body>
<ul>
<li><a href="Archiv_Bilder/026/"">16.03.2013 6. Internationaler – Siegfried F. Hübner Gedächtnis CUP 2013 in Philippsburg.<img src="bild.jpg" height ="75"></a></li>
<li><a href="Archiv_Bilder/026/"">16.03.2013 6. Internationaler – Siegfried F. Hübner Gedächtnis CUP 2013 in Philippsburg.<img src="bild.jpg" height ="75"></a></li>
<li><a href="Archiv_Bilder/026/"">16.03.2013 6. Internationaler – Siegfried F. Hübner Gedächtnis CUP 2013 in Philippsburg.<img src="bild.jpg" height ="75"></a></li>
</ul>
</body>
</html>
Alles anzeigen
Ach und wenn auf die DVD's noch mehr solche Tabellentricks drauf sind, dann hau die weg.
Zur Sicherheit solltest du hier mal ein Blick dauf werfen.
http://www.gipspferd.de/forumhilfe/outline_2.htm
http://www.gipspferd.de/forumhilfe/outline_3.htm
Du bist der Lösung schon sehr nah. Du brauchst nur dein ClearDiv unmittelbar vor dem schließenden #linksDiv einfügen. Allerdings reicht hier auch ein
aus. Somit ist #links immer die längste Spalte.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#container {
width:960px;
background:#aaa ;
margin:0 auto;
}
#header {
height:100px;
background:#09c;
color:#fff;
}
#navi {
float:right;
width:200px;
}
#inhalt {
margin-right:200px;
background:#adf;
}
#footer {
background:#09c;
color:#fff;
height:100px;
clear:both;
}
p { padding:10px;}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Homepage</h1></div>
<div id="navi">
<p>Navigation</p><p>Navigation</p><p>Navigation</p>
</div>
<div id="inhalt">
<p>Inhalt</p>
<br style="clear:both" />
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Alles anzeigen
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.