Beiträge von Sailor

Indem du in der Zeile, in der die Datei gespeichert wird, statt

$ort . '.html'

einfach

'Stadt-' . $ort . '.html'

einfügst.

Versuche es doch mal mit IFrame - hatte mal so ein ähnliches Problem und konnte es damit lösen.

<div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; border: 0px; margin: 0px; padding: 0px; overflow: hidden;">
<iframe style="width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #ffffff; border: 0px;" src="http://....." name="haupt" scrolling="auto">
<div style="text-align: center;"><p>Ihr Browser unterstützt keine Frames!</p></div>
</iframe>
</div>

Weiß zwar nicht mehr so genau, warum ich da noch ein DIV außen rum gesetzt habe, aber so funktionierte es bei mir.

Arne Drews
Das müsste/sollte der Fragesteller wissen, ob es Textpassagen im HTML Dokument gibt, die ausgeschlossen werden sollen - ansonsten hast du natürlich Recht. Meine Methode ändert alle Vorkommnisse der Platzhalter. Aber ohne nähere Informationen über die fragliche .html und die zugehörige . xls sind das alles nur akademische Betrachtungen. Nur wenn man es ausprobiert, weiß man sicher, ob es funktioniert oder nicht.

Die Problemstellung ist hier so individuell, dass nach meiner Meinung auch am ehesten eine individuelle, maßgeschneiderte Lösung zum Erfolg führt.
Die notwendigen Parameter sind doch (zumindest dem Fragesteller) bekannt.
Es existiert eine HTML Datei, in der Wörter/Begriffe enthalten sind, die durch Wörter/Begriffe zu ersetzen sind, die in einer Excel-Tabelle vorgegeben sind.
Die zu ersetzenden Wörter/Begriffe (Platzhalter) aus der HTML Datei sind dem Fragesteller bekannt.
Vorausgesetzt, dass die Excel-Tabelle eine 'sinnvolle' Struktur hat - zb zeilenweise Auflistung der Ersatzwörter - dann können diese bekannten Platzhalter auch in Zeile 1 der Tabelle aufgelistet werden...
[TABLE='class: grid, width: 700, align: left']

Platzhalter 1

Platzhalter 2

Platzhalter 3

Platzhalter 4

usw...

Ersatzbegriff 1

Ersatzbegriff 2

Ersatzbegriff 3

Ersatzbegriff 4

usw..

Ersatzbegriff 1

Ersatzbegriff 2

Ersatzbegriff 3

Ersatzbegriff 4

usw...

Ersatzbegriff 1

Ersatzbegriff 2

Ersatzbegriff 3

Ersatzbegriff 4

usw...

...

...

...

...

...

[/TABLE]

Man kann diese Dateien also programmgesteuert einlesen (Excel-Tabelle vorher in eine CSV Datei umwandeln) und in den Arrays $html und $csv zur weiteren Verarbeitung nutzen.
Mit einer Schleife über alle Elemente von $html (Startwert n=0)

$html[n] = str_replace($csv[n], $csv[n+1], $html[n]);

erfolgt dann der Tausch Platzhalter gegen Ersatzbegriff.
Wobei ich mir nicht sicher bin, wie str_replace auf das multidimensionale Array $csv reagiert und ob man nicht vorher aus den Zeilen eindimensionale Arrays erzeugen sollte.
Damit ist das komplette HTML Dokument geändert und kann unter dem gewünschten Namen, der ja auch in der Tabelle angegeben ist, gespeichert werden.

Die obige Schleife über alle Elemente von $csv wiederholen... fertig!

- - - Aktualisiert - - -

Ich sehe es gerade... kleiner logischer Fehler!
In der ersten Schleife muss natürlich der 'Zähler' für das Array $csv konstant bleiben - also...

$html[n] = str_replace($csv[x], $csv[x+1], $html[n]);

Wobei sich dann 'x' erst in der nächsten Schleife über die Anzahl der Elemente von $csv jeweils um 1 erhöht.

So etwas ließe sich sicherlich mit vertretbarem Aufwand mit zB PHP realisieren.
csv Datei aus Excel Tabelle erzeugen - mit PHP in ein Array einlesen - Ursprungs-HTML Datei zeilenweise einlesen und danach sollte es nur noch eine paar for- bzw while- Schleifen bedürfen, um die 'Platzhalter' durch die Daten aus der csv auszutauschen und entsprechend zu speichern. Problem könnte da nur die Laufzeit der Routine machen, denn das könnte bei 700 Dateien eine ganze Weile brauchen und mitunter ist die zulässige Laufzeit auf dem Server (Localhost) limitiert.

Dann musst du bitte die komplette Seite posten, denn mit dem Teil, der in deinem Link enthalten ist, geht das genau so!

Versuche es doch mal mit
width: 100%;

Mit HTML und CSS könnte man das hinbekommen - wenn da nicht diese 'Bootstrap Theme Min' CSS Stylesheets und Java Scripte wären!
Das ist was für ein Bootstrap Hilfe Forum - was sollen wir hier machen? Erst mal diese 'fremden' CSS Formate alle auf Null setzen?

Warum das so ist, durchschaue ich auch nicht, denn eigentlich wird die Größe (Höhe) durch den Inhalt bestimmt, wenn es nicht durch andere Angaben eingeschränkt wird. Vielleicht zählen leere <div>'s nicht als Inhalt - aber so geht es.

.content{
    width:                    100%;
    min-height:                700px;
    background-color:        yellow;
    overflow: auto;
}

Die von dir angesprochenen Buttons sind Links (<a..></a>), die irgendwie verschachtelt und eingepackt in <div>'s je in einer <section> liegen.
Section ist in HTML ein Block Element, dass sich richtiger Weise untereinander anordnet. Um das zu verhindern, musst du der zweiten Section das CSS-Attribut 'inline-block' geben.
Da ich mich mit 'Dreamweaver' überhaupt nicht auskenne, kann ich aber leider nicht sagen, wie das zu machen ist.
Händisch könnte man ein style="display: inline-block;" als Tag Ergänzung in den Section Tag schreiben.
Oder im Stylesheet die Klasse .well__ins4 um das Attribut display: inline-block; erweitern, was dann allerdings auf alle Elemente der Klasse wirken würde und ob das dann so funktioniert, wie es soll?
Am besten wäre aber, du erzeugst mit CSS eine neue Klasse (zB .button_inline)
.button_inline {
display: inline-block;
}

Und in den Section Tag ergänzt du dann...
<section class="well__ins4 button_inline">

Wie du das machst, musst du mit deinem Dreamweaver ausfechten.

Zitat aus deinem Link...

Zitat

Beachten Sie:

Die Angabe zur Zeilenhöhe ist nur wirksam, wenn der Inhalt in jeder Spalte der Zeile kleiner ist, so daß leerer Raum entsteht. Wenn der Inhalt größer ist, wird die Angaben außer Kraft gesetzt. Die Zeile wird in diesem Fall so dimensioniert, daß der gesamte Inhalt angezeigt wird. Das ist beispielsweise der Fall, wenn in der Zeile eine Grafik vorkommt, die höher ist als die angegebene Zeilenhöhe.

Ich weiß zwar nicht was du mit dieser 'Zwangsjacke' für deine Tabelle anstellen willst, aber wenn es um das Seitenlayout geht, dann solltest du dir besser eine Alternative dazu suchen. Tabellenlayout ist 'out'! Versuche es mit <div>'s, da kannst du die Größe pixelgenau festlegen.

... freut mich, wenn ich helfen konnte, auch wenn mein Lösungsansatz alles andere als perfekt ist - aber du schaffst das :)!

Ich denke, dieses Verhalten ist genau das, was zu erwarten ist! Die Größe einer Tabellenzelle ist abhängig von deren Inhalt - wenn der den vorgegebenen Rahmen (width: / height:) überschreitet, dann werden die Vorgaben ignoriert!

Hallo und Willkommen,
so ganz habe ich nicht verstanden, was exakt deine Vorstellungen sind. Aber vielleicht habe ich eine Idee, die dir bei weiteren Experimenten mit deinem Layout helfen könnte.
Zunächst scheint mir deine <div>-Verschachtelung etwas unglücklich gewählt, denn HTML arbeitet den Code sequentiell ab und wenn dann die beiden Div's, die du positionieren willst, durch andere Elemente getrennt sind, dann sind Probleme vorprogrammiert.
Habe deinen Code mal etwas modifiziert - zum weiterbasteln.

<!doctype html>
<html>
<head>
<style type="text/css">
<!--
article {
    display: flex;
    flex-direction: column;
}


.source {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}


.floating1 {
    float: left;
}


.floating2 {
    position: relative;
    top: 195px;
}


.source {
        font-size: 12px;
        border: 1px solid lightgray;
        border-radius: 4px;
        margin: 2em .8em;
        padding: .8em 0 .8em 0;
}


ul {
        margin-left: -3em;
        margin-top: 0;
        margin-bottom: 0;
}


@media  screen and (max-width: 550px) {
        .floating1 {
           float: none;
           text-align: center;
           margin: 0px auto 0px auto;
   }


         .floating2 {
            position: static;
            diplay: inline-block;
            top: 0px;
   }
}
-->
</style>
</head>
<body>
<article>
   <h3>1. Teil</h3>
   <p>kurze Beschreibung hier</p>


   <div class="row" style="border: 1px solid #00aa00;">


      <div class="col-sm-6 floating1" style="border: 1px solid #000000;">
         <img src="http://via.placeholder.com/328x336">
      </div>


      <div class="col-md-12 source floating2">
         <div class="col-sm-8">
            Quelle:<br>
            <ul>
               <li>Text text text</li>
               <li><a href="#">link</a></li>
               <li>text text text</li>
            </ul>
         </div>
         <div class="col-sm-4">
            <img src="http://via.placeholder.com/100x100">
         </div>
      </div>


      <br clear="all">


      <div class="col-sm-6">
         <div class="row">
            <div class="row text-flex">
               <div class="col-sm-12">
                  <a href="#">Verlinkung zu Teil 2</a>
                  <p>
                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</article>
</body>
</html>

Was hier definitiv noch nicht wirklich passt, ist die vertikale Positionierung von .floating2 (top: 195px; ). Das passt nur zufällig, denn wenn mehr Text im Div steht, wird das natürlich größer und verrutscht entsprechend.
Außerdem wird das Div (.floating2) irgendwann umbrechen, wenn der Bildschirm kleiner wird.
Also Lösungsidee hab ich ein @media screen... im CSS eingefügt - man könnte allerdings auch alternativ den Div .row mit einer maximalen Breite ausstatten, um ein Umbrechen zu verhindern.
Viel Spaß beim weiterbasteln.

Hättest du eine bessere Lösung parat, wenn die Frage lautet - Bildwechsel... 8 Bilder... ohne Java(Script)?
Ein paar Zeilen PHP, um das dynamische Einfügen des notwendigen Codes (CSS + HTML Code zum Einfügen der Bilder) bei einer beliebigen Anzahl von Bildern zu bewerkstelligen, sind sicherlich in überschaubarer Zeit zu generieren.

Ich denke, du meinst ein Favicon. Google mal nach 'Favicon Generator' und in der Regel kannst du auf diesen Seiten nicht nur ein Favicon selbst erstellen (bzw ein geeignetes Bild hochladen), du bekommst da auch gleich den passenden Code zum Einfügen in deine Seite.

Molto bene... lass mich wissen, wenn das fertige Produkt zu bewundern ist!

Das Problem lag wie immer zwischen den Ohren... zwischen meinen Ohren .
Das @keyframe wirkt auf alles, was #gallery figure heißt, nur eben zeitlich versetzt durch den die delay Anweisung zu den nth-of-type(x) Elementen.
Der Trick ist jetzt das Timeing... weil gemäß dem @keyframe ist das Element bei 0% der Gesamtdauer der Animation (40 Sekunden) unsichtbar.
Bei 8% der Zeit sichtbar und bleibt sichtbar bis 13%.
Verblasst dann bis 18% und bleibt unsichtbar bis zum Ende, 100% der Animation.
Und weil das jeweils mit 5 Sekunden Abstand durch deine Liste geschieht, wird dieser Effekt erzielt... und wenn das Timeing stimmt, dann wiederholt sich das auch unendlich.
Probier es aus!

<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}


#gallery {
        position: relative;
        background: none;
        border: none;
}


#gallery figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.0;
        -webkit-animation: wechseln 40s infinite;
        animation: wechseln 40s infinite;
}


@keyframes wechseln {
        0% {opacity: 0;}
        8% {opacity: 1;}
        13% {opacity: 1;}
        18% {opacity: 0;}
        100% {opacity: 0;}
}


@-webkit-keyframes wechseln {
        0% {opacity: 0;}
        8% {opacity: 1;}
        13% {opacity: 1;}
        18% {opacity: 0;}
        100% {opacity: 0;}
}


#gallery figure:nth-of-type(1) {
        animation-delay: 0s;
}


#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}


#gallery figure:nth-of-type(3) {
        animation-delay: 10s;
}


#gallery figure:nth-of-type(4) {
        animation-delay: 15s;
        }


#gallery figure:nth-of-type(5) {
        animation-delay: 20s;
}


#gallery figure:nth-of-type(6) {
        animation-delay: 25s;
        }


#gallery figure:nth-of-type(7) {
        animation-delay: 30s;
}


#gallery figure:nth-of-type(8) {
        animation-delay: 35s;
}


</style>

Poste doch mal den Link zu der Seite, wo dein Animationsscript herkommt! Vielleicht machen die dort ja noch was geheimnisvolles, um die Delayzeit am Ende wieder auf 0 zu setzen.

Aber hier ist der Code, wie er bei mir mit den oben beschriebenen Einschränkungen läuft!

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Gallerie Test</title>
<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}


#gallery {
        position: relative;
        background: none;
        border: none;
}


@keyframes wechseln {
        0% {opacity: 0.0;}
        5% {opacity: 1.0;}
        95% {opacity: 1.0;}
        100% {opacity: 0.0;}


}


@-webkit-keyframes wechseln {
        0% {opacity: 0.0;}
        5% {opacity: 1.0;}
        95% {opacity: 1.0;}
        100% {opacity: 0.0;}
}


#gallery figure {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.0;
        -webkit-animation: wechseln 5s infinite;
        animation: wechseln 5s infinite;
}


#gallery figure:nth-of-type(1) {
        animation-delay: 0s;
}


#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}


#gallery figure:nth-of-type(3) {
        animation-delay: 10s;
}


#gallery figure:nth-of-type(4) {
        animation-delay: 15s;
}


#gallery figure:nth-of-type(5) {
        animation-delay: 20s;
}


#gallery figure:nth-of-type(6) {
        animation-delay: 25s;
}


#gallery figure:nth-of-type(7) {
        animation-delay: 30s;
}


#gallery figure:nth-of-type(8) {
        animation-delay: 35s;
}


</style>


</head>
<body>
<main>
    <div id="gallery">
       <figure> <img src="<?php echo $bild1;?>" alt="bild1"></figure>
       <figure> <img src="<?php echo $bild2;?>" alt="bild2"></figure>
       <figure> <img src="<?php echo $bild3;?>" alt="bild3"></figure>
       <figure> <img src="<?php echo $bild4;?>" alt="bild4"></figure>
       <figure> <img src="<?php echo $bild5;?>" alt="bild5"></figure>
       <figure> <img src="<?php echo $bild6;?>" alt="bild6"></figure>
       <figure> <img src="<?php echo $bild7;?>" alt="bild7"></figure>
       <figure> <img src="<?php echo $bild8;?>" alt="bild8"></figure>
   </div>
</main>
</body>
</html>

Hallo,
ich glaube nicht, dass das wirklich das erzeugt, was du haben möchtest.
Du erzeugst mit @keyframes eine Animation, die sich unendlich wiederholt.
dann weist du den #gallery figure:nth-of-type(x) (das müsstest du im Übrigen für alle 8 deiner Bilder machen) ein Delay zu, getaktet in 5s Schritten... aber irgendwann ist dann der Delay für das letzte Bild abgelaufen und deine Animation würde weiter laufen und immer nur das letzte Bild anzeigen.
Außerdem müssen alle deine Bilder die selbe Größe haben, denn mit dieser Variante werden eigentlich immer alle Bilder, bei denen die Delayzeit abgelaufen ist eingeblendet und wenn da unterschiedlich große Bilder sind, dann schaut das größere Bild unter dem Kleineren raus!

Ist zwar nicht ganz das was du suchst... keine Animation.. aber schau mal hier
https://www.forum-hilfe.de/threads/54061-…alerie-mit-CSS3
ob das nichts für dich wäre?