Beiträge von djheke

djheke

Zitat von EADMRW

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.

djheke

Du solltest die Aufgabe wie gefordert umsetzen. Das mit JS kannst du zum Schluss machen.

djheke

Am einfachsten mit JQuery. Es geht auch zur Not mit CSS Only. Google einfach und du wirst mit Sicherheit fündig werden.

djheke

Nein.

djheke

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.

djheke

Da fällt mir ein, dass es mit einem Float/Margin-Layout gehen könnte, die leeren Elemente zu umgehen. Werde es mal probieren.

djheke

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.

HTML

<!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

djheke

So?

HTML

<!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

djheke

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.

djheke

Kopiere dir mal die zwei Seiten und probier mal.

Hauptseite.html

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

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

djheke

Was ist dein Problem? bekommst du das Verzeichnis nicht angezeigt? Poste hier mal den gesamten Code.

djheke

Ich vermute mal, dass er es so meint.

HTML

<!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.

djheke

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

djheke

Du suchst outline:none.

Code

a:active , a:focus {
 outline:none;
 font-weight:bold;
}




<a href="#" ><img src="bild.jpg" alt="bild" width="100" height="75"></a>

djheke

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

Code

<br style="clear:both;" />

aus. Somit ist #links immer die längste Spalte.
Beispiel:

HTML

<!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

Beiträge von djheke

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Simple Grafik-Slideshow

Zellenwert in Tabellen gleichsetzen

Probleme bei Speichern in HTML

Kalender mit Flexbox?

Kalender mit Flexbox?

div-Container 20% von der rechten Seite anordnen?

Verlinkung Bilder in Unterordner

Problem mit Anker zur externen Webseite

Verlinkung Bilder in Unterordner

Verlinkung Bilder in Unterordner

Verlinkte Grafik erhält ungewollten " Linkrahmen"

Verlinkte Grafik erhält ungewollten " Linkrahmen"

2 divs nebeneinander gleich hoch ohne absolute werte