Beiträge von Spider67

Leider wieder einmal ein Beispiel dafür, dass viele Menschen Probleme haben, sinn erfassend zu lesen.

Darum frage ich ja nach Meinungen, ich habe ja auch vor, nur die rechte Navigation wegzulassen und die linke Hauptnavigation immer einzublenden, bzw. diese am Smartphone als toggle Menue anzuzeigen.

Der Link zu der Seite wurde oben gepostet, da sieht man alles nach dem ich hier gefragt habe. Schade, dass es hier außer mir anscheinend nur sehr wenige andere User gibt. Das wird aber der Grund sein, warum man immer wieder den selben Käse als Antwort bekommt Schade eigentlich.

Würdet Ihr vom Styling her in der Desktop Variante der Seite nur den header und den footer anzeigen und die beiden Navigationen links und rechts weglassen? Die zweite Navigation am rechten Rand werde ich jedenfalls bei den Unterseiten nicht anzeigen.

Es wird ja ohnehin auf jeder Seite ein Link zur Startseite oder zur vorigen Seite angeboten.

Danke für Eure Tipps.

Seite neu gemacht, aber noch noch nicht auf den Webspace hochgeladen. Ich bin ja auch noch nicht fertig damit. Das nächste Vorhaben wäre es, bei kleineren viewports aus der Navigation ein "toggle-Menue" zu machen und die rechte Navigation (aside) mit display: none gänzlich auszublenden.

Ich denke, dann wäre die Seite schon wesentlich responsiver, oder nicht?

So die Fehler aus dem Validator wurden ebenfalls beseitigt, jetzt geht es an die Korrektur des veralteten html auf den Unterseiten.

Danke, der Tipp mit dem CSS hat geholfen.

Mir gefällt der alte Käse jedenfalls und unseren Mitgliedern auch.

Jedenfalls danke für Deine "fundierte" Einschätzung.

Weder habe ich behauptet, dass die Seiten aktuell und benutzerfreundlich sind, noch möchte ich das Gegenteil behaupten. Sie Seiten erfüllen Ihren Zweck und die Mitglieder sind zufrieden.

Jedenfalls danke dafür, dass ich tun darf, was ich will. Und Gott sei Dank entscheiden auch unsere Mitglieder, ob die Seite gut oder schlecht ist und nicht irgend jemand anderer. Sie haben auch genug Vergleichsmöglichkeiten, weil Du mir glauben kannst, dass jeder davon schon mehrere Websites gesehen hat und nicht nur diese eine. Eines sollte natürlich auch einem Experten klar sein: wenn ich die Seiten modernisiere, muss ich am Beginn erst mal das fehlerhafte und veraltete html korrigieren. Erst danach kann ich mich daran machen, die Seite responsive zu machen. Alles andere wäre kontraproduktiv.

Ich werde mich daher auch weiterhin mit meinen Fragen an hilfsbereite Kollegen wenden und hoffen, hilfreiche Tipps zu finden, die mir bei meiner Arbeit helfen. Vielleicht war es schwer verständlich, obwohl ich es schon dreimal angeführt habe: Ich habe nicht die Zeit mich stundenlang hinzusetzen und dafür ist das Ergebnis mehr als zufriedenstellend und jeder hat die Infos, die er braucht.

Danke jedenfalls für die Hilfe.

Gott sei Dank sind Geschmäcker verschieden, denn uns gefällt die Seite. Und weil eben die Seite für Desktop PCs optimiert ist, möchte ich Sie ja auch erneuern. Übrigens ich kann am Handy sehr wohl das nachschauen, was ich nachschauen möchte. Also ausgeschlossen komme ich mir da nicht vor.

Hallo, danke für die Tipps. So alt ist die Seite mindestens, wenn nicht älter. Wie gesagt ich bin Autodidakt und habe die Betreuung der Seite mit dem derzeitigen Aussehen erst übernommen. Eine Modernisierung braucht Zeit, die ich nur begrenzt habe.

Vom Design her gefällt es den Mitgliedern des Vereines auch sehr gut und die Infos, die wir brauchen, werden übermittelt.

Ich bin - wie man sieht - gerade dabei, alles zu modernisieren. Die Zeit, um mich jetzt auch noch mit Wordpress zu beschäftigen habe ich leider nicht.

Dei Sache mit dem CSS width: 100% werde ich abends mal testen. Danke dafür.

Sorry, damit sollte es klappen: http://fischereivereinkleinmeiseldorf.at/html/Anwendung…tseite_neu.html

Danke vorab.

Unter diesem Link findet man die Seite: http://127.0.0.1:50085/preview/app/index.html

Das Problem mit dem Bild rechts oben habe ich gelöst (ich habe einfach für diesen Hyperlink kein :hover definiert)

Links beim E-Mail Bild tritt der Fehler noch auf (hier brauche ich jedoch den :hover Effekt für die Navigation.

Wie kann ich also verhindern, dass das Email img beim hovern nach links springt?

Danke für die Hilfe.

Die Seite ist noch nicht online, darum dachte ich ich, anhand des Codes wäre der Fehler auch zu ermitteln.

Die .pdf Datei liegt bei, damit man sich den Aufbau der Seite vorstellen kann. Außerdem denke ich, dass ich eine klare Frage gestellt habe:

Warum wird das Bild bei :hover an den linken Rand des umgebenden Containers verschoben. Keine Ahnung, was daran so schwer zu verstehen ist?????

Vielleicht hat ja doch jemand eine Idee.

Danke vorab.

Hallo,

in der beiliegenden Datei seht Ihr das fertige aussehen meiner Startseite, nachdem ich sie komplett neu gestaltet habe (ohne Tabellen und Frames).

Entwurf Seite.pdf

Zwei Bilder machen mir aber noch Schwierigkeiten: Das Bild rechts oben (über dem Text der Weg zu uns) und das Email Symbol links unter der Navigation. Dort ist ein jeweils ein Hyperlink hinterlegt. Wenn ich nun die Bilder mit der Maus überfahre hover) springen Sie an den linken Rand des umgebenden Containers, obwohl die Hyperlinks funktionieren.

Woran liegt das?

Hier das HTML mit dem die Bilder eingebunden sind:

<div class="navi2"><a href="der_weg_zu_uns.htm"><img src="../../bilder/strassenkarte2-k.jpg" alt="Strassenkarte"></a>
        <br>Der Weg zu uns</div>

<div class="mail"><a href="mailto:spider67@aon.at"><img src="../Bilder/Email_78_9kb.gif" class="mail" border="0"></a></div>

Hier noch das CSS dazu:

img {
   min-width: 1px;
   display: block;
   max-width: 100%;
   border: 0px;
}

.mail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navi2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.navi2 img {
    min-width: 1px;
    display: block;
    max-width: 100%;
    border: 0px;
    color: white;
}

nav a {
   display: block;
   width: auto;
   height: auto;
   background-image: url('flurl_button-1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   color: #fff;
   text-align: center;
   line-height: 22px;
}

a:visited {
    text-decoration: underline;
    color: black;
}

a:hover {
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 100%;
   height: auto;
   }

.rechts a:hover {
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 95%;
   height: auto;
}

.navi2 a:hover {
   background: #000066; 
}

a:focus {
    text-decoration: underline;
    background-image: url("../../bilder/flurl_button-2.jpg");
    color: white;
    width: 100%;
    height: auto;
}

.rechts a:focus {
   text-decoration: underline;
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 95%;
   height: auto;
}

.navi2 a:focus {
   background: #000066; 
}

a:active {
    text-decoration: underline;
}

.mail a {
    text-decoration: underline;
    background: #000066;
}

Ich wäre für Tipps, wie ich das beheben kann sehr dankbar. Liegt es an der Ausrichtung der Elemente im umgebenden Container, oder an den Eigenschaften für :hover, die ich definiert habe?

Danke für Eure Hilfe.

Was ich aus diesem Artikel nicht herauslesen konnte, ist die Information, ob es auch möglich ist, die Bilder mit Text zu versehen.

Weiters wollte ich auch wissen, ob diese Version der Lightbox auch responsive ist: https://lokeshdhakar.com/projects/lightbox2/.

Eine der beiden Varianten werde ich dann bevorzugen.

Man sieht daher auch, dass mein Google funktioniert

Die Bilder werden mit den Angaben "height" und "width" kleiner angezeigt, aber doch mit der höheren Auflösung geladen. Habe ich das richtig verstanden?

Es wäre also besser, meine Bildergalerie mit lightbox zu realisieren. Verstehe ich das richtig?. Ist lightbox aber auch responsive, bzw. kann man das CSS so bearbeiten, dass es responisve wird? Danke für Eure Hilfe.

Hallo,

ich habe derzeit eine Bildergalerie (rund 50 Bilder) mit flex realisiert. Dazu habe ich das Bild in Originalgröße gespeichert und in der Galerie mit width und height verkleinert. Folgendes CSS vergrößert die Bilder beim hovern:

img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 2.0);
 -moz-transform: scale(2.0, 2.0);
 -webkit-transform: scale(2.0, 2.0);
 -o-transform: scale(2.0, 2.0);
 -ms-transform: scale(2.0, 2.0);
}

Das funktioniert auch schon recht gut, und wenn ich die Bilder im Html nicht mit divs einbinde, sondern mit "figure", dann könnte ich mittels des Elements figurecaption auch den Text dazu einbinden, der dann ja auch beim skalierten Bild angezeigt wird. Meine Frage dazu: Entspricht diese Lösung in etwa der lightbox Lösung (natürlich nicht so perfekt) und ist diese Lösung auch responsive (wenn ich die Bilder z.B. mit max-width und max-height auszeichne), oder wäre hier lightbox doch die bessere Alternative.

Danke für die Hilfe.

Zitat von Gastl

als wie finde ich wieder geil

Das verstehe ich jetzt nicht.

Hallo,

eine Frage bezüglich Bildergalerien. Würdet Ihr sowas mit einer vorgefertigten Lösung (z.B. lightbox) realisieren oder selber programmieren'?

Man muss dazu sagen, dass ich Laie bin, und mir alles selber beigebracht habe oder erst beibringe. Ist Lightbox ok, oder gibt es bessere Systeme?

Kann man Lightbox auch responsive machen, bzw. ist die Lösung responsive?

Danke fü rEure Hilfe.

Alles klar, danke. Ich verstehe das. Das Leerzeichen war also falsch.

Es hatte aber trotzdem den gewünschten Effekt. Danke jedenfalls für die Hilfe. Ich melde mich sicher wieder bald.

wie man oben sieht ist das betreffende a-Element das erste Kindelement des div mit der Class Mail. Ich brauche dieses div jedoch bezüglich der Positionierung des Elements im nav Bereich.

Daher habe ich diesen Selektor gewählt. Aber was meinst Du? Welcher Selektor würde Deiner Meinung nach genügen?

Danke für die Hilfe.