Beiträge von Lupus_III
-
-
Warum bevorzugt Google mobilfähige Webseiten?
Der Grund ist recht simpel. Insgesamt nutzten Mitte 2014 inzwischen 79% der Deutschen das Internet. Im Schnitt hatte jeder Internetnutzer 2,8 verschiedene Geräte um ins Internet zu gehen. Der Anteil der mobilen Geräte steigt ständig. Zwar ist der Computer/PC/Laptop mit 95% immer noch das Hauptzugangsgerät, jedoch nutzen bereits 57% der Deutschen ein Smartphone, sowie 28% ein Tablet um im Internet zu surfen. Google trägt somit lediglich den Nutzergewohnheiten Rechnung, wobei hier die Nutzerfreundlichkeit bei der Darstellung von Webseiten bei unterschiedlichen Bildschirmgrößen eine ausschlaggebende Rolle spielt ("repsonsive webdesign").
Was bedeutet "responsive webdesign" bzw. mobilfreundliche Webseite?Wer schon einmal mit einem Smartphone im Internet war, wird festgestellt haben, dass viele Homepages viel zu groß dargestellt werden, Texte viel zu klein waren, oder die Navigation nicht gut anzuklicken war. Das liegt an unterschiedlichen Bildschirmgrößen von PC-Monitor, Tablets und Smartphones. Die meisten Webseiten sind für die Anzeige auf großen Bildschirmen ausgelegt, wohingegen Smartphones viel kleinere Displays haben. So muss der Smartphone-Benutzer immer herumscrollen oder auf-und-ab-zoomen, damit der Inhalt richtig angeschaut werden kann. Das ist sehr lästig und benutzerunfreundlich.
Mobilfreundliche Webseiten sind bereits zur optimalen Anzeige auf allen verschiedenen Bildschirmgrößen ausgelegt. Egal mit welchem Engerät eine Webseite aufgerufen wird, sie wird immer in der richtigen Größe dargestellt. Texte sind gut zu lesen, das Menü bzw. Links sind gut anzuklicken, Funktionen einfach zu bedienen, Bilder und Videos in optimaler Größe. Die Größe des jeweiligen Displays entscheidet über die Darstellung und Layout der Homepage. Der Benutzer kann mühelos - lediglich mit nach unten oder oben scrollen - eine Webseite betrachten. Und eben diese Mobilfreundlichkeit von Webseiten belohnt Google nun mit einer höheren Relevanz und somit besseren Listung bei seinen Suchergebnis-Treffern.
-
Veralbern können wir uns alleine!
https://www.google.de/search?q=bild+bei+mouseover+vergrößern
1. Treffer!!!
Und genau diese Lösung hat er nicht gesucht!
-
Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.
Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:
Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.
-
-
HTML
Alles anzeigenHTML ******************************** <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Titel</title> </head> <body> <a href="#">Button<img src="img/see.JPG" alt=""></a> </body> </html> CSS ********************* body { margin: 0; padding: 0; } a img { display:none; } a:hover img { display:block; } -
Hallo Ch.i, ändere mal Deinen Grundaufbau Deiner Webseite. Das was Du uns zeigst ist Oldscool und führt über kurz oder lang zu Problemen.
Nimm diesen Grundaufbau des HTML.
<!DOCTYPE html>
<html lang="de">
<head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Titel</title>
</head>
<body>
</body>
</html> -
Also ich unterrichte auch an einer VHS. Meine Unterlagen - Powerpointpräsentation in PDF-Form, Übungsdateien etc. - speichere ich in digitaler Form auf mitgebrachte USB-Sticks der Teilnehmer. Auf ihnen werden auch die Übungsfortschritte der Teilnehmer während und nach dem Unterricht gespeichert. Eine Speicherung auf den PC der VHS erlaube ich nicht. Als weiter Hilfsmittel benutze ich einen Beamer, ein Flipchart und wenn erforderlich auch ein Blackboard.
-
Super! Vielen Dank!
-
Hallo, ich hänge gerade vor einem Problem, bei dem ich keine Erklärung habe. Wenn man die folgende Webseite https://erich-wolf.de/rieg/ nach unten scrollt, sollte ein Back to top Button erscheinen. Wenn man drauf klickt, scrollt die Seite wieder zurück auf Anfang. Soweit so gut. Warum funktioniert das lokal auf meinem PC. Wenn ich die gleichen Dateien auf den Webspace lade funktioniert das nicht!
Hat jemand einen Rat?
-
Deine Rundschreiben kannst du auch mit einem Editor zum Erstellen von Blätterkatalogen herstellen. Schau mal auf diese Seite, ob das etwas für dich ist. https://gtsl.de/
-
So isch er halt unser Scatellole! Immer a Bissle destruktiv! Der wird au noch andersch, wenn er erst erwachsa isch! Des wächst sich aus.
-
Hallo Arne, sind die beiden Shopsysteme kostenfrei?
-
Hallo, ich brauch mal wieder Hilfe von den Profis.
Ich bin gerade mal wieder am Lernen und habe mir eine Webseite mit Grid zusammengebastelt. Leider bekomme ich die obere Navigationleiste nicht so hin, wie ich mir das wünsche. Die drei rechten Icons sollen dicht nebeneinander und nach rechts ausgerichtet sein. Kann mir jemand einen Tipp geben, wie ich das bewerkstelligen kann?
Danke!
-
Hallo zusammen, ich bin Rentner, Anfänger und begeisterter "Webseitenmacher". In diesem Forum bin ich jeden Tag unterwegs, habe alle Videos gekauft und durchgearbeitet und viel Spaß dabei gehabt. Danke an alle hier, die mich immer freundlich behandelt und mir geholfen haben, wenn ich mal wieder gescheitert bin. Ich hoffe das ist noch lange so.
Ein Witzle von mir:
Kommt ein Kunde in einen Laden und möchte eine blaue Deutschlandflagge kaufen. Wir haben nur schwarz, rot, goldene Deutschlandflaggen erwidert die Verkäuferin. Sagt der Kunde, dann nehme ich halt eine rote!
-
Hoffentlich baut der nie ein Haus!!!
-
Ich finde die Hilfe zur Selbsthilfe von m.scatello angemessen. Wenn man Webdesign ernsthaft erlernen will, dann muss man schon einen gewissen Zeitaufwand betreiben und, fertig ist man nie!
-
Sorry Leute, ich stehe ein Bisschen auf dem Schlauch. Danke Euch! mit
- ul {
- line-height: 0.1em;
- }
wollte ich die Abstände zwischen den Listenpunkten verkleinern, weil mir das so nicht gefällt.
-
-
HTML
Alles anzeigenIch beschäftige mich gerade mit dem Thema Flexbox und habe eine Webseite als one-pager erstellt. Kann mir jemand erklären, warum es bei längeren <li>Einträgen zu diesem komischen Phänomen kommt, dass die Inhalte übereinander liegen. Für Hilfe immer dankbar. Ich habe schon alles ausprobiert. HTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style_3.css"> <title>One - Pager</title> </head> <body> <div class="container"> <header class="header"> <div class="header_l"> <img src="images/logo.png" alt="Logo"> </div> <div class="header_r"> <a href="index_3.html#physio"><img src="images/physioIcn.jpg" alt="Physio"></a> <a href="index_3.html#team"><img src="images/teamIcn.png" alt="Team"></a> <a href="index_3.html#kontakt"><img src="images/contactIcn.png" alt="Kontakt"></a> </div> </header> <!--<nav class="nav-box1">Navi</nav>--> <div class="welcome"><!-- Content mit 1 Spalten --> <h2 class="left">WILLKOMMEN</h2> <h3>Olaf Gerlach</h3> <p>Praxis für Krankengymnastik und Physiotherapie, Schwäbisch Hall <br><br> Herzlich willkommen auf unserer Website <br><br> Olaf Gerlach und sein Team helfen Ihnen mit Freude gesund zu werden und gesund zu bleiben. Gesund werden und gesund bleiben ist die Philosophie von Olaf Gerlach und seinem Team und stellt Sie in den Mittelpunkt:<b>unsere Kunden und Patienten. Olaf Gerlach und Team </p> </div> <div id="physio"> <div class="welcome"> <!-- Content mit 1 Spalten --> <h2>physiotherapie</h2> <p>In der Physiotherapie behandeln wir Patienten mit orthopädischen, unfallchirurgischen, sporttraumatologischen sowie neurologischen Krankheitsbildern. Aus einer Vielzahl von Behandlungsmethoden wählen wir in Abstimmung auf Ihre Erkrankung das passende therapeutische Verfahren. Sollten Sie eine bestimmte Behandlungsmethode wünschen, so sprechen Sie diese bitte mit unseren Therapeuten oder bei der Anmeldung ab. Unser Ziel ist Sie in angenehmer Atmosphäre nach den neuesten wissenschaftlichen Erkenntnissen zu versorgen. </p> </div> <div class="content"> <!-- Content mit 3 Spalten --> <div class="box1"><h2>PHYSIOTHERAPIE/ KRANKENGYMNASTIK</h2> <ul> <li>Manuelle Therapie</li> <li> Massage</li> <li>Gerätegestützte Krankengymnastik</li> <li> Manuelle Lymphdrainage</li> <li>PNF - Propriozeptive Neuromuskuläre Fazilation</li> <li>Kieferbehandlung (Zahnarztverordnung) bei <br> Cranio Mandibulärer Dysfunktion usw.</li> <li>Naturmoor-Packung</li> <li> Skoliosetherapie für Kinder, <br> Jugendliche und Erwachsene</li> </ul> </div> <div class="box2"> <h2>PHYSIKALISCHE THERAPIE</h2> <ul> <li>Elektrotherapie</li> <li>Naturmoorbehandlung</li> <li>Wärmetherapie</li> <li>Kältetherapie</li> <li>Schlingentisch/ Extension</li> <li>Ultraschallbehandlung</li> </ul> <p>und vieles mehr...</p> </div> <div class="box3"> <h2>PRIVATE LEISTUNGEN</h2> <ul> <li>Cranio Sacrale Osteopatie</li> <li>Kinesiotaping</li> <li>Personal Training</li> <li>Trainingsgruppen</li> <li>Geschenkgutscheine</li> <li>Thai-Massagen</li> <li>Propriozeptive neuromuskuläre Fazilitation (PNF)</li> </ul> <p>und vieles mehr... </p> <h2>HAUS- UND HEIMBESUCHE MÖGLICH</h2> <ul> <li>Klassische Massage</li> <li>Bindegewebsmassage</li> <li>Manuelle Lymphdrainage</li> </ul> </div> </div> </div> <div id="team"> <div class="content1"> <!-- Content mit 2 Spalten --> <div class="box1"> <h2>(1) box1</h2> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </div> <div class="box2"> <h2>(2) box2</h2> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et t justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </div> <div id="kontakt"> <div class="content2"> <!-- Content mit 3 Spalten --> <div class="box1"> <h2>(1) box1</h2> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna t, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="box2"> <h2>(2) box2</h2> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna et, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="box3"><h2>(3) box3</h2><p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor r sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </div> <footer class="footer">(6) Footer</footer> </div> </body> </html> CSS * { padding:0; margin:0; } ul { line-height: 0.1em; } body { background: #333; margin: 0; font-family: arial, sans-serif; } .container { background: white; margin: 0 auto; padding: 1em; max-width:1500px; } .container * { padding: 1em; } /*.header { background: #aa8147; }*/ .header_l img{ width: 40%; } .nav-main { background: #97a2aa; } .welcome { background: #fff; padding: 1em; } .content, .welcome, .team, .kontakt {padding: 0;} /*.box1 { background:#fff; } .box2 { background: #f0f3f5; } .box3 { background: #daedc1; }*/ .footer { background: #353535; color: white; } h1, h2, h3 { text-align: left; } p { text-align: justify; } #box3 ul li { line-height: 1; } @media screen and (min-width: 600px) { body {margin:1em;} .header{ display: flex; flex-direction: row; justify-content: end; align-items: flex-end; } .header_r{ flex: 1; background: #fff; text-align: right; } .header_l{ flex: 1; background: #fff; } .header_l img{ width: 50%; } .welcome { background: lightgrey; margin-left: 10%; margin-right: 10%; padding: 1em; color: #000; } .content { background-color: #aa8147; margin-left: 10%; margin-right: 10%; display: flex; } .content1 { background-color: lightblue; margin-left: 10%; margin-right: 10%; display: flex; } .content2 { background-color: red; margin-left: 10%; margin-right: 10%; display: flex; } .box1 { flex: 1; order: 1; } .box2 { flex: 1; order: 2; } .box3 { flex: 1; order: 3; } .left { text-align: left; } }
