Beiträge von Lupus_III

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.

Lupus_III

Zitat von m.scatello

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!

Lupus_III

Zitat von P.Schmidt

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.

Lupus_III

Schau mal hier https://answers.squarespace.com/questions/3994…-word-text.html

Lupus_III

HTML

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>
        
    <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; }

Alles anzeigen

Lupus_III

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

<title>Titel</title>
</head>
<body>
</body>
</html>

Lupus_III

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.

Lupus_III

Super! Vielen Dank!

Lupus_III

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?

Lupus_III

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/

Lupus_III

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.

Lupus_III

Hallo Arne, sind die beiden Shopsysteme kostenfrei?

Lupus_III

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!

Link: http://erich-wolf.bplaced.net/

Lupus_III

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!

Lupus_III

Hoffentlich baut der nie ein Haus!!!

Lupus_III

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!

Lupus_III

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.

Lupus_III

??

Lupus_III

HTML

Ich 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;
    }
    
}

Alles anzeigen

Lupus_III

Hat damit schon jemand Erfahrung?

SuperBoost

Beiträge von Lupus_III

Responsive Design für SEO wirklich wichtig?

Ich möchte ein Bild aufpoppen lassen - wie geht das?

Ich möchte ein Bild aufpoppen lassen - wie geht das?

Ich möchte ein Bild aufpoppen lassen - wie geht das?

Ich möchte ein Bild aufpoppen lassen - wie geht das?

Background an Framgröße anpasse ?!

Bessere Präsentationsvorlagen

Back to top Button

Back to top Button

Probleme mit den Webseiten

Wenige Produkte auf Homepage zum Kauf anbieten

Wenige Produkte auf Homepage zum Kauf anbieten

CSS-Grid

Ein paar flache Witze

Irgendwie funktioniert das nicht

Irgendwie funktioniert das nicht

Seltsame Phänomene bei <li> Elementen

Seltsame Phänomene bei <li> Elementen

Seltsame Phänomene bei <li> Elementen

Super Boost