Beiträge von Sempervivum

Sempervivum

Zitat

Auf der Startseite stehen die Farbkleckse untereinander

Man kann das aber sehr einfach beheben:

Code

<h2>Herzlich Willkommen.<br>Erfahren Sie mehr über mich als:</h2>
    <section id="ckleckse">
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/erziehungsberatung.html"><img src="./Elke Meiners - Start_files/rot-e.jpg" alt="Erziehungsberatung" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/verfahrensbeistand.html"><img src="./Elke Meiners - Start_files/lila-v.jpg" alt="Verfahrensbeistand" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/berufsvormund.html"><img src="./Elke Meiners - Start_files/gelb-b.jpg" alt="Berufsvormund" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/umgangspflege.html"><img src="./Elke Meiners - Start_files/blau-u.jpg" alt="Umgangspflege" width="95%" height="95%"></a>
        </aside>
    </section>

    <div id="filler"></div>
    
    <footer>
        <img src="./Elke Meiners - Start_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
        <a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
    </footer>

Alles anzeigen

Code

/* Kopfzeile, für Banner */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    display: block;
    margin: 0px auto;
}

/* Navigation, mittig, */
nav {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 5px;
    font-size: 1.2em;
    color: #7B4487;
}

/* Fußzeile, zentriert */
footer {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 8px;
    width: 99%;
    text-align: center;
}

/* Links die Kleckse */
#kleckse {
    align-self: flex-start;
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    height: auto;
    flex-basis: 170px;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Paragraphenzeichen */
#paragraf {
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    border: 0;
    width: 10%;
    height: auto;
}

/* Inhalt zentriert */
#imp {
    overflow-y: scroll;
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: justify;
    margin-right: 1%;
    margin-left: 21%;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Inhalt zentriert */
main {
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: center;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Zitatenbox */
#zitate {
    font-family: "Times New Roman", Times, serif;
    font-size: medium;
    font-style: italic;
    color: #7B4487;
    text-align: center;
    margin: 0;
    padding: 1%;
    border-color: #7B4487;
    border-style: dotted;
    margin-top: 30px;
    overflow-y: auto;
    max-height: calc(100% - 30px);
}

#wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
}

#filler {
    flex-basis: 0px;
    flex-grow: 1;
}
/* Überschriften */
h2 {
    font-size: x-large;
    color: #7B4487;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 10px;
}

/* Inhaltstext */
h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: left;
    font-size: medium;
}

/* Impressumschrift */
h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: left;
    font-size: small;
}
/* Kleckse für Index.html */
#ckleckse {
    display: flex;
    flex-direction: row;
}
/* Elkes Foto auf "Über mich" */
#foto {
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    border: 0;
    width: 30%;
    height: auto;
}

/* Inhalt von "Über mich" */
#ich {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: center;
    margin-right: 47%;
    margin-left: 15%;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 43%;
    height: auto;
}

Alles anzeigen

Sempervivum

Zitat

Auf der Startseite stehen die Farbkleckse untereinander

Ah so, ich hatte leider nur die Seite für Erziehungsberatung umgestellt und die anderen und die Startseite nicht berücksichtigt

Sempervivum

Zitat

nach und nach einbauen und anpassen

Warum nicht gleich das ganze CSS übernehmen? Ich habe es getestet und es funktioniert. Die Seite sieht genau so aus wie vorher, nur ohne die negativen Begleiterscheinungen, Überläufe etc.

Sempervivum

Zitat

da es der ausdrückliche Wunsch meiner Bekannten ist

Kenne ich aus meiner Berufstätigkeit: Der Kunde/Auftraggeber hat immer Recht.

Zitat

Meinst du, ich kann die ursprüngliche Frage (Text bleibt nicht in eigener Box) durch studieren eurer html-Seminare lösen oder hast du abschließend einen Tipp dazu?

Ich nehme an, Du meinst die rechte Box mit dem punktierten Rand? Das habe ich nur hin bekommen, indem ich alles floating, die meisten Maßangaben etc. heraus geworfen und auf Flexlayout umgestellt habe:

Code

/* Kopfzeile, für Banner */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header {
    display: block;
    margin:0px auto;
    }

/* Navigation, mittig, */
nav {
        font-family:Arial, Helvetica, sans-serif;
        text-align:center;
        margin-top:5px;
        font-size:1.2em;
        color:#7B4487;
    }
    
/* Fußzeile, zentriert */
footer {
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        margin-top:10px;
        margin-bottom: 10px;
        padding-top:8px;
        width: 99%;
        text-align:center;
    }
    
/* Links die Kleckse */
    #kleckse {
        align-self: flex-start;
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        height:auto;
        flex-basis: 170px;
        flex-grow: 0;
        flex-shrink: 0;
}

/* Paragraphenzeichen */
    #paragraf {
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        border:0;
        width:10%;
        height:auto;
}

/* Inhalt zentriert */
    #imp {
        overflow-y:scroll;
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:justify;
        margin-right:1%;
        margin-left:21%;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px;
}


/* Inhalt zentriert */
main {
        overflow-y:auto;
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:center;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px; 
        
}

/* Zitatenbox */
    #zitate {
        font-family:"Times New Roman", Times, serif;
        font-size:medium;
        font-style:italic;
        color:#7B4487;
        text-align:center;
        margin:0;
        padding:1%;
        border-color:#7B4487;
        border-style:dotted;
        margin-top: 30px;
        overflow-y: auto;
        max-height: calc(100% - 30px);
}
        
    #wrapper {
        margin:0;
        padding:0;
        border:0;
        display: flex;
}
/* Überschriften */
h2 {
    font-size:x-large;
    color:#7B4487;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    margin-bottom:10px;
}

/* Inhaltstext */
h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#7B4487;
    text-align:left;
    font-size:medium;
}

/* Impressumschrift */
h4 {
    font-family:Arial, Helvetica, sans-serif;
    color:#7B4487;
    text-align:left;
    font-size:small;

    
}
/* Kleckse für Index.html */
    #klecks-l {
        margin-top:0px;
        padding: 0 1%;
        border:0;
        width:23%;
        height:auto;
}
    #klecks-r {
        margin-top:0px;
        padding: 0 1%;
        border:0;
        width:23%;
        height:auto;
}

/* Elkes Foto auf "Über mich" */
    #foto {
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        border:0;
        width:30%;
        height:auto;
}

/* Inhalt von "Über mich" */
    #ich {
        
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:center;
        margin-right:47%;
        margin-left:15%;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px; 
        width:43%;
        height:auto;
}

Alles anzeigen

Und ganz unten im HTML:

Code

<aside><div id="zitate"></div></aside>
    </div>
    <footer>
        <img src="./Elke Meiners - Erziehungsberaterin_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
        <a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
    </footer>
    <script>
        var jetzt=new Date();
        var z=(jetzt.getSeconds())%28;
        zitate.innerHTML = quotes[z];
    </script>
    </body></html>

Alles anzeigen

Sempervivum

??? Der TO hat die URL seiner Seite gepostet, dort kann man alles einsehen.

Sempervivum

Zitat

Ich kann es nicht nachvollziehen warum genau das nicht funktioniert

Wenn ich das richtig verstehe, möchtest Du die Teams und den Spielstand zentriert in ihrem Container. Du hast jedoch für alle drei einen div-Container definiert und die Breite so festgelegt, dass die den übergeordneten Container ganz ausfüllen. Innerhalb der untergeordneten Container hast Du keine Ausrichtung definiert, so dass der Default "left" greift.

Wenn Du einfach die Breitenangaben entfernst, sind die Elemente zentriert. Damit sie dann nicht so aneinander geklatscht aussehen, kannst Du ja mit paddings arbeiten. Oder justify-content:space-evenly für den übergeordneten Container verwenden.

Sicher möchtest Du auch die Teamnamen und die Bilder zentriert. Auch das ist problemlos möglich, entweder mit text-align oder den Möglichkeiten vom Flexlayout.

Zitat

Ebenso frag ich mich, wie man die Bilder unter dem Teamnamen darstellt.

Das kann ich nicht nachvollziehen, denn da Du für die Teamnamen h-Elemente verwendest, nehmen diese eine eigene Zeile ein und die Logos sind darunter. Für die Teamnamen mit den Logos würde es sich u. U. anbieten, figure-Elemente zu verwenden.

Mir ist noch aufgefallen, dass die Logos stark verzerrt werden. Ich würde lieber height:auto verwenden.

Sempervivum

Ich nehme an, mit Anführungszeichen meinst Du die doppelten Hochkommas ". Verwendet man diese, wird der Text interpretiert, so dass man z. B. Variablen oder Zeilentrenner einfügen kann. Man kann also nicht generell sagen, dass man immer das eine oder das andere verwenden sollte. Was Variablen betrifft, finde ich selbst es klarer, wenn man diese außerhalb des Strings notiert und mit diesem verkettet.

Sempervivum

Code

Ich habe die Zeile 76 wie folgt mutiert: . "<tr class="tab">"

Dann hast Du nur ein simples Problem mit den Hochkommas. So wäre es richtig:

Code

'<tr class="tab">'

Sempervivum

Zitat

Mit dem aktuellen code wo ich hier gepostet habe

Wo ist dieser Code? Der in deinem ersten Posting ist unvollständig, man müsste es im Zusammenhang sehen. Am besten die ganze Seite in Aktion. Poste die URL.

Sempervivum

Code

chat.scrollTop = elem.scrollHeight;

Wo ist elem definiert?

Sempervivum

Du brauchst im wesentlichen nur das, was das Skript bisher für img tut, für figure zu machen:

Code

<section class="gallery">
        <figure><img src="images/dia0.jpg">
            <figcaption>Bild 1</figcaption>
        </figure>
        <figure>
            <img src="images/dia1.jpg">
            <figcaption>Bild 2</figcaption>
        </figure>
        <figure>
            <img src="images/dia2.jpg">
            <figcaption>Bild 3</figcaption>
        </figure>
        <figure>
            <img src="images/dia3.jpg">
            <figcaption>Bild 4</figcaption>
        </figure>
    </section>

Alles anzeigen

Code

$(function () {

            //Globale Variablen

            var active_figure;
            var img_url;

            //Lightbox erstellen

            $('body').prepend('<div id="lightbox_overlay"><div id="lightbox_inhalt"><figure></figure><div id="nav"><i class="fa fa-arrow-left" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-arrow-right" aria-hidden="true"></i></div></div></div>');

            //öffnen und Schließen

            $('.gallery figure').stop().click(function () {

                $('#lightbox_overlay #lightbox_inhalt figure').replaceWith($(this).clone());
                $('#lightbox_overlay').fadeIn(500);

                active_figure = $(this);
            });

            $('.fa-times').stop().click(function () {

                $('#lightbox_overlay').fadeOut(300);

            });

            //nächstes Bild

            $('.fa-arrow-right').stop().click(function () {

                next_figure(active_figure);
            });

            function next_figure(objekt) {
                if ($(objekt).next().is('figure')) {
                    active_figure = $(objekt).next();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                } else {

                    active_figure = $(objekt).parent().children('figure').first();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                };
            };

            //vorheriges Bild 

            $('.fa-arrow-left').stop().click(function () {
                prev_img(active_img);
            });

            function prev_img(objekt) {
                if ($(objekt).prev().is('img')) {
                    active_img = $(objekt).prev();
                    img_url = $(objekt).prev('img').attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                } else {
                    active_img = $(objekt).parent().children('img').last();
                    img_url = $(objekt).parent().children('img').last().attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                }
            }
        });

Alles anzeigen

Für previous kannst Du es selber umstellen.

Sempervivum

Hoffentlich hast Du mich nicht falsch verstanden. "Das geht nur mit jQuery" bezog sich darauf, dass man einen Listener für eine Liste registriert, ohne iterieren zu müssen. Arbeitest Du mit einer Schleife geht es selbstverständlich auch ohne jQuery.

Sempervivum

Code

document.getElementsByClassName("sucheKontakte").addEventListener("click", test);

Das geht mit jQuery, aber nicht mit einfachem Javascript. getElementsByClassName() liefert eine Nodelist, in etwa ein Array, über das Du explizit in einer Schleife iterieren und den Listener hinzu fügen musst. Das geklickte Element steht dann unter "this" zur Verfügung und Du kannst das Attribut "value" auslesen.

Ich würde erwarten, dass die Console hier einen Fehler anzeigt.

Sempervivum

Zitat

mit ajax alle 1 sekunde nach klick auf submit button laden

Das verstehe ich nicht ganz: "klick auf submit-button" bedeutet, dass dies der Benutzer tut, "alle 1 sekunde" spricht jedoch dafür, dass es automatisch durch das Skript geschieht?

Mit diesem Code in einer Testseite:

Code

    <form name="form">
        <input name="chatform">
    </form>
    <script>
        document.form.chatform.value = 'xxxx';
    </script>

funktioniert es auch im Firefox einwandfrei. Ich finde es jedoch verwirrend, wenn ein name-Attribut den selben Wert hat wie ein Tagname, weil im JS schlecht ersichtlich ist, worum es sich handelt und was wirksam ist. Um heraus zu finden, warum es bei dir nicht geht, müsste man deinen Code im Zusammenhang sehen.

Sempervivum

Ja, mit CSS hatte ich früher auch meine Probleme aber im Laufe der Zeit habe ich einiges dazu gelernt und kann es jetzt ganz gut handhaben. Vieles finde ich immer noch unlogisch, z. B. dass es kaum möglich war, etwas vernünftig vertikal zu zentrieren (was jetzt durch Flexlayout kein Problem mehr ist) und kuriose und unerwartete Effekte durch margin-collapse oder baseline-alignment.

Sempervivum

Ohne die Hintergrundgrafik erkennt man dein Bild nicht wieder und die Schrift ist unsichtbar, da weiß auf weiß. aber man kann auch ohne das erkennen: Du bringst da etwas durcheinander: align-items gehört zum Flexlayout und ist nur wirksam, wenn auch dispay:flex gesetzt ist. Benutze text-align statt dessen für beide Überschriften, dann werden sie horizontal zentriert. Und das margin-left bei der ersten Überschrift musst Du dann weg lassen.

Und wahrscheinlich ist es besser, die Grafik als Hintergrund anzulegen, dann brauchst Du die Überschriften nicht mit negativem marging darüber zu verschieben. position:relative ist überflüssig, wenn Du sie mit margin verschiebst.

Sempervivum

Das geht sehr einfach mit CSS, wenn das Bestätigungsfeld vor dem Datumsfeld steht. Kannst Du das entspr. ändern? Sollte eigentlich möglich sein, da das Bestätigungsfeld ja nicht sichtbar ist.

Sempervivum

Wenn Du von Effekten sprichst, meinst Du dann Animationen? Man kann dann sehr viel mit CSS machen. Und für das was damit nicht geht, ist jQuery zu empfehlen. Das Stichwort "Animationen" macht es auch leicht, die Frage nach der Version von jQuery zu beantworten: AFAIK arbeiten erst die 3-er Versionen mit requestAnimationFrame und nach Expertenmeinung ist das sehr zu empfehlen.

Die Frage nach dem Browser-Support kann ich leider nicht beantworten.

Sempervivum

Zitat

Aber da ich ja das Ziel habe, JS als solches zu lernen, wäre es meiner Meinung nicht der richtige Weg, direkt sowas wie jQuery einzusetzen, das einem alles erheblich einfacher macht und eigentlich nicht mehr so extrem viel mit der Sprache zu tun hat.

Ich bin schon 64 und das erinnert mich an Diskussionen in den 80-ern des vergangenen Jahrhunderts, wo darüber debattiert wurde, ob man gleich in eine Hochsprache wie C einsteigen, oder erst Mal Assembler lernen sollte. Heute redet niemand mehr von Assembler oder dass man zum Programmieren wissen muss, wie ein Prozessor funktioniert.

Sempervivum

Zitat

Ist echt mühselig, auf reines JS zu setzen.

Da hast Du natürlich Recht. Aber was hält dich davon ab, jQuery zu verwenden? Auch dieser Cross-Browser-Code erübrigt sich dann:

Code

var scrollY = window.scrollY || window.pageYOffset;

Beiträge von Sempervivum

3-Spaltiges Layout: Inhalt läuft in Footer

3-Spaltiges Layout: Inhalt läuft in Footer

3-Spaltiges Layout: Inhalt läuft in Footer

3-Spaltiges Layout: Inhalt läuft in Footer

3-Spaltiges Layout: Inhalt läuft in Footer

Flexbox Zentrierung wird nicht erkannt und ausgeführt.

HTML-Code innerhalb von PHP mit CSS stylen

HTML-Code innerhalb von PHP mit CSS stylen

Beim Absendes des Buttons autoscroll durchführen

Beim Absendes des Buttons autoscroll durchführen

Jquery Img Lightbox

Bei click value des angeklickten Links ausgeben/in Variable speichern

Bei click value des angeklickten Links ausgeben/in Variable speichern

Javascripterror nur bei Firefox

Zentrierung der Schriften

Zentrierung der Schriften

Textfarbe ändern in Abhängigkeit eines anderen Feldes

Mehrere Elemente bei Auftauchen im Viewport animieren

Mehrere Elemente bei Auftauchen im Viewport animieren

Mehrere Elemente bei Auftauchen im Viewport animieren