Beiträge von JR Cologne

JR Cologne

Ach, sry. Jetzt sehe ich es auch. Könntest du mal den Code posten?

Irgendwas stimmt mit der Website übrigens wirklich nicht:

http://www.directupload.net/file/d/4262/7424qc4a_png.htm

JR Cologne

Beim IE kommt aus irgendeinem Grund nichts...

Für Chrome und Firefox kann ich es aber bestätigen.

Zu deinem Problem:

Das liegt daran, dass der Content einfach nicht mehr auf die Seite passt und es somit aussieht, als wäre es linksbündig. In Wirklichkeit ist es aber zentriert.

JR Cologne

Alles klar. Werde ich ebenfalls zu meiner To-Do-Liste hinzufügen. Thx!
So, ich wollte gerade erstmal so ein paar allgemeine Validierungen der Daten einfügen, aber aus irgendeinem Grund wird nichts an den Daten geändert. Außerdem ist das Array $validData außerhalb der Funktion, trotz return nicht verfügbar. Die einzige Fehlermeldung ist:

Code

Notice:  Undefined variable: validData

Hier die komprimierte functions.php:

PHP

// Kontaktform überprüfen (inkl. function für Mailversand über Kontaktform)
    function ueberpruefeForm($email, $empfaenger, $betreff, $nachricht, $headers, $name=null) {
        if ( $_POST['submit'] == 'Senden' ) {
            if ( empty($email) && empty($betreff) && empty($nachricht) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben alle erforderlichen Felder nicht ausgef&uuml;llt. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($email) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben Ihre E-Mail-Adresse nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($betreff) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben den Betreff nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($nachricht) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben Ihre Nachricht nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else {
                validateFormData($name, $email, $betreff, $nachricht);
                echo '<pre>';
                print_r($validData);
                echo '</pre>';




                if ($name != null) {
                    $nachricht .= "\r\n\r\n\r\n" . 'Gesendet von: ' . $name;
                }
                if (sendeMail($empfaenger, $betreff, $nachricht, $headers)) {




                    $rueckmeldung = '<p><strong>Vielen Dank! Ihre Nachricht wurde erfolgreich versendet.</strong></p>';
                } else {
                    $rueckmeldung = '<p><strong>Offenbar ist ein Fehler beim Versand der E-Mail aufgetreten. Bitte versuchen Sie es sp&auml;ter nochmal oder <a href="mailto:habichvergessen40@gmail.com"  title="habichvergessen40@gmail.com">schreiben Sie mir manuell eine E-Mail</a>. Vielen Dank f&uuml;r Ihr Verst&auml;ndnis!</strong></p>';
                }
            }
        }
        return $rueckmeldung;
    }




    // Validiere Form Data
    function validateFormData($name, $email, $betreff, $nachricht) {
        $data[] = $name;
        $data[] = $email;
        $data[] = $betreff;
        $data[] = $nachricht;
        $i = 0;
        while ($i < count($data)) {
            $validData[$i] = trim($data[$i]);
            $validData[$i] = stripslashes($data[$i]);
            $validData[$i] = htmlspecialchars($data[$i]);
            $i++;
        }
        return $validData;
    }

Alles anzeigen

Edit:

Ich habe weiterhin keine Ahnung, warum das nicht funktioniert...

Mittlerweile funktioniert es soweit, dass die Daten innerhalb der Funktion richtig sind, nur außerhalb kennt er $validData halt nicht. Der aktuelle Code sieht so aus:

PHP

function validateFormData($name, $email, $betreff, $nachricht) {     
        var_dump($name);
		echo '<br>';
		echo '<br>';
		$validData[] = trim($name);
		$validData[] = stripslashes($name);
		$validData[] = htmlspecialchars($name);
		$validData[] = trim($email);
		$validData[] = stripslashes($email);
		$validData[] = htmlspecialchars($email);
		$validData[] = trim($betreff);
		$validData[] = stripslashes($betreff);
		$validData[] = htmlspecialchars($betreff);
		$validData[] = trim($nachricht);
		$validData[] = stripslashes($nachricht);
		$validData[] = htmlspecialchars($nachricht);
		var_dump($validData);
        return $validData;
    }

Alles anzeigen

Würde mich total freuen, wenn jemand helfen kann.

Edit 2: Das Problem hat sich erledigt. Mein Fehler war, dass ich den Rückgabewert der Funktion nicht in eine Variable gepackt habe.

JR Cologne

Keine Panik. Das habe ich auch nicht gemacht.

War vorhin durcheinander gekommen und hatte das anders verstanden.

Geändert habe ich dafür die mobile Ansicht ein bisschen. Da haben die Menüpunkte jetzt den gleichen Abstand von links, wie das Logo.

[Blockierte Grafik: http://fs5.directupload.net/images/160208/5qxxyo9e.png]

JR Cologne

Alles klar. Dann werde ich das mal machen.

Bzgl. des Footers werde ich es mir auch mal überlegen, ob ich den noch grün mache.

Vielen Dank für eure Ratschläge!

Das mit der Auslagerung von einzelnen Teilen ist nicht per HTML/CSS möglich. Dafür braucht man PHP.

JR Cologne

Ah, ok. Interessant.

Übrigens: Habe gestern bei der Suche nach RegEx eine Funktion namens filter_var() gefunden. Mit dieser scheint das deutlich einfacher zu sein und z.B. w3schools nutzt diese auch.

Werde dann wohl darauf zurückgreifen, außer es gibt bei der Funktion irgendeinen Nachteil.

Aber eins muss man sagen. Das mit dem RegEx hört sich echt interessant an.

JR Cologne

Zitat von ST-HT

Hallo,
aus meiner Sicht wäre es gut, wenn "startseite" genau unter dem kopf "webdesign" ausgerichtet ist.
die weiteren menüpunkte haben zwar den gleichen abstand, aber das hauptmenü ist nicht mittig ausgerichtet,
ich habe da rechts noch viel platz. ist nicht schlimm, kann man lassen, ist nur mein eindruck.

viele grüße
gerhard

Ach so, aber von welcher Ansicht sprichst du?

Meinst du das?

[Blockierte Grafik: http://fs5.directupload.net/images/160207/zmxs3hm9.png]

Wenn ja, wäre das definitiv eine gute Idee, die ich wahrscheinlich übernehmen werde.

Zitat von wolf

Das 'Design' sorry

Du magst das Design also nicht? Gibt es dafür Gründe oder hast du Verbesserungsvorschläge? Oder trifft es einfach deinen Geschmack nicht?

Zum Design muss ich halt sagen, dass es bewusst so schlicht ist und nicht auf die modernsten Trends setzt. Wollte erstmal eine relativ "normale" Website machen und dann vielleicht in einem halben Jahr oder Jahr das Design nochmal grundlegend überarbeiten.

Zitat von wolf

Das Mail formular ist halt 'unsicher' .. aber passt .. solltest prüfen ob die Email aresse auch wirklich eine ist (RegEx)

Gut, dass hört sich sinnvoll an. Ansonsten gibt's nichts daran auszusetzen?

Zitat von wolf

GROßER Tipp.. lager den header und den footer in dateien aus, sonnst macht es keinen spaß menüpunkte zu pflegen
Bzw. Lagere die Inhalte aus und lade sie Parameter (URL) bedingt index.php?page=impressum

Das hatte ich auch schon überlegt. Werde ich auf jeden Fall noch angehen.

JR Cologne

Genau, das mit dem Menu, das man erst aufklappen muss, ist die mobile Ansicht. Freut mich, dass es dir gefällt.

Aber was meinst du damit, dass es bei dir nicht ausgerichtet ist?

JR Cologne

Schönen guten Abend zusammen,

endlich ist es soweit und meine erste Website ist online. Allerdings muss ich gleich dazu sagen, dass es nur eine Seite ist, die mir zur Übung dienen soll.

Deswegen ist die natürlich noch ausbaufähig, wahrscheinlich besonders was die Sicherheit usw. angeht und der Code wird auch noch nicht top aussehen. Das mache ich dann alles nach und nach...

Feedback würde ich gerne für alles haben, was euch auffällt. Ob das jetzt etwas mit dem Design zu tun hat, der Sicherheit oder mit der Formatierung des Codes. Alles nehme ich gerne.

Die Website könnt ihr euch unter folgendem Link anschauen: http://jr-cologne.16mb.com/webdesign-jr/

Der Code:

index.php

PHP

<?php
    require_once('php/config.php');
    require_once('php/functions.php');
?>




<!DOCTYPE html>
<html lang="de">




<head>




    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>




    <title>Startseite</title>




    <meta charset="UTF-8">




    <meta name="viewport" content="width=device-width,initial-scale=1.0">




    <link href="css/style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body id="navMenu_open">




<div id="wrapper">




    <header>
        <a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
    </header>







    <nav id="nav_main">
        <div id="navbar">
            <a href="#navMenu_open" class="menu-button show-navMenu">Men&uuml;</a>
            <a href="#navMenu_close" class="menu-button hide-navMenu">Men&uuml;</a>
        </div>




        <ul>
            <li><a href="index.php">Startseite</a>
                <ul>
                    <li><a href="#art1">Artikel 1</a></li>
                    <li><a href="#art2">Artikel 2</a></li>
                    <li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
                </ul>
            </li>
            <li><a href="ueber-uns.php">&Uuml;ber uns</a></li>
            <li><a href="leistungen.php">Leistungen</a>
                <ul id="dropdown-menu_leistungen">
                    <li><a href="leistungen.php#konzeption">Konzeption</a></li>
                    <li><a href="leistungen.php#webdesign">Webdesign</a></li>
                    <li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
                    <li><a href="leistungen.php#cms">CMS</a></li>
                    <li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
                </ul>
            </li>
            <li><a href="kontakt.php">Kontakt</a></li>
        </ul>
    </nav>







    <main>




        <div id="heading_container">
            <h2 id="heading">News</h2>
        </div>




        <article id="art1" class="first-article">




            <h3>Artikel 1</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>




        </article>




        <article id="art2">




            <h3>Artikel 2</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>




        </article>




        <article id="art3">




            <h3>Artikel 3</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>




        </article>




    </main>




</div>




    <footer>




        <p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. &Uuml;bungsseite.<wbr> Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>




        <p><small>&copy; <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>




    </footer>




</body>




</html>

Alles anzeigen

ueber-uns.php

PHP

<?php
    require_once('php/config.php');
    require_once('php/functions.php');
?>




<!DOCTYPE html>
<html lang="de">




<head>




    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>




    <title>&Uuml;ber uns</title>




    <meta charset="UTF-8">




    <meta name="viewport" content="width=device-width,initial-scale=1.0">




    <link href="css/style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body id="navMenu_open">




<div id="wrapper">




    <header>
        <a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
    </header>







    <nav id="nav_main">
        <div id="navbar">
            <a href="#navMenu_open" class="menu-button show-navMenu">Men&uuml;</a>
            <a href="#navMenu_close" class="menu-button hide-navMenu">Men&uuml;</a>
        </div>




        <ul>
            <li><a href="index.php">Startseite</a>
                <ul>
                    <li><a href="#art1">Artikel 1</a></li>
                    <li><a href="#art2">Artikel 2</a></li>
                    <li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
                </ul>
            </li>
            <li><a href="ueber-uns.php">&Uuml;ber uns</a></li>
            <li><a href="leistungen.php">Leistungen</a>
                <ul id="dropdown-menu_leistungen">
                    <li><a href="leistungen.php#konzeption">Konzeption</a></li>
                    <li><a href="leistungen.php#webdesign">Webdesign</a></li>
                    <li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
                    <li><a href="leistungen.php#cms">CMS</a></li>
                    <li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
                </ul>
            </li>
            <li><a href="kontakt.php">Kontakt</a></li>
        </ul>
    </nav>







    <main>




        <div id="heading_container">
            <h2 id="heading">&Uuml;ber uns</h2>
        </div>




        <article class="first-article">




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




    </main>




</div>




    <footer>




        <p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. &Uuml;bungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>




        <p><small>&copy; <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>




    </footer>




</body>




</html>

Alles anzeigen

leistungen.php

PHP

<?php
    require_once('php/config.php');
    require_once('php/functions.php');
?>




<!DOCTYPE html>
<html lang="de">




<head>




    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>




    <title>Leistungen</title>




    <meta charset="UTF-8">




    <meta name="viewport" content="width=device-width,initial-scale=1.0">




    <link href="css/style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body id="navMenu_open">




<div id="wrapper">




    <header>
        <a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
    </header>







    <nav id="nav_main">
        <div id="navbar">
            <a href="#navMenu_open" class="menu-button show-navMenu">Men&uuml;</a>
            <a href="#navMenu_close" class="menu-button hide-navMenu">Men&uuml;</a>
        </div>




        <ul>
            <li><a href="index.php">Startseite</a>
                <ul>
                    <li><a href="#art1">Artikel 1</a></li>
                    <li><a href="#art2">Artikel 2</a></li>
                    <li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
                </ul>
            </li>
            <li><a href="ueber-uns.php">&Uuml;ber uns</a></li>
            <li><a href="leistungen.php">Leistungen</a>
                <ul id="dropdown-menu_leistungen">
                    <li><a href="leistungen.php#konzeption">Konzeption</a></li>
                    <li><a href="leistungen.php#webdesign">Webdesign</a></li>
                    <li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
                    <li><a href="leistungen.php#cms">CMS</a></li>
                    <li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
                </ul>
            </li>
            <li><a href="kontakt.php">Kontakt</a></li>
        </ul>
    </nav>







    <main>




        <div id="heading_container">
            <h2 id="heading">Leistungen</h2>
        </div>




       <nav id="nav_leistungen">
            <ul>
                <li><a href="#konzeption">Konzeption</a></li>
                <li><a href="#webdesign">Webdesign</a></li>
                <li><a href="#webentwicklung">Webentwicklung</a></li>
                <li><a href="#cms">Content Management Systeme (CMS)</a></li>
                <li><a href="#pflege&redesign">Pflege und Redesign bestehender Webauftritte</a></li>
            </ul>
        </nav>




        <article id="konzeption" class="first-article">




            <h3>Konzeption</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




        <article id="webdesign">




            <h3>Webdesign</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




        <article id="webentwicklung">




            <h3>Webentwicklung</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




        <article id="cms">




            <h3>Content Management Systeme (CMS)</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




        <article id="pflege&redesign">




            <h3>Pflege und Redesign bestehender Webauftritte</h3>




            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>




        </article>




    </main>




</div>




    <footer>




        <p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. &Uuml;bungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>




        <p><small>&copy; <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>




    </footer>




</body>




</html>

Alles anzeigen

kontakt.php

PHP

<?php
    require_once('php/config.php');
    require_once('php/functions.php');




	// Deklarationen von Variablen bzgl. Form
	$name = $_POST['name'];
	$email = $_POST['email'];			// Absender für Mail
	$betreff = $_POST['betreff'];		// Betreff für Mail
	$nachricht = $_POST['nachricht'];	// Nachricht für Mail




	// Deklarationen von Variablen bzgl. Mail
	$betreff = '=?UTF-8?B?'.base64_encode($betreff).'?=';	// sorgt für richtige Darstellung von Umlauten bei Betreff
	$headers[] = "MIME-Version: 1.0";
	$headers[] = "Content-type: text/plain; charset=utf-8";
	$headers[] = "From: {$email}";
	$headers[] = "Reply-To: {$email}";
	$headers[] = "Subject: {$betreff}";
	$headers[] = "X-Mailer: PHP/".phpversion();
?>




<!DOCTYPE html>
<html lang="de">




<head>




    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>




    <title>Kontakt</title>




    <meta charset="UTF-8">




    <meta name="viewport" content="width=device-width,initial-scale=1.0">




    <link href="css/style.css" type="text/css" rel="stylesheet">




    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->




</head>




<body id="navMenu_open">




<div id="wrapper">




    <header>
        <a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
    </header>







    <nav id="nav_main">
        <div id="navbar">
            <a href="#navMenu_open" class="menu-button show-navMenu">Men&uuml;</a>
            <a href="#navMenu_close" class="menu-button hide-navMenu">Men&uuml;</a>
        </div>




        <ul>
            <li><a href="index.php">Startseite</a>
                <ul>
                    <li><a href="#art1">Artikel 1</a></li>
                    <li><a href="#art2">Artikel 2</a></li>
                    <li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
                </ul>
            </li>
            <li><a href="ueber-uns.php">&Uuml;ber uns</a></li>
            <li><a href="leistungen.php">Leistungen</a>
                <ul id="dropdown-menu_leistungen">
                    <li><a href="leistungen.php#konzeption">Konzeption</a></li>
                    <li><a href="leistungen.php#webdesign">Webdesign</a></li>
                    <li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
                    <li><a href="leistungen.php#cms">CMS</a></li>
                    <li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
                </ul>
            </li>
            <li><a href="kontakt.php">Kontakt</a></li>
        </ul>
    </nav>







    <main>




        <div id="heading_container">
            <h2 id="heading">Kontakt</h2>
        </div>




        <p id="kontakt">Sie m&ouml;chten mit mir, dem Betreiber der Website, Kontakt aufnehmen? Dann nutzen Sie doch bitte das folgende Kontaktformular oder <a href="mailto:habichvergessen40@gmail.com" title="habichvergessen40@gmail.com">schreiben Sie mir manuell eine E-Mail</a>.</p>




        <form action="" method="post">
                <div>
                    <label for="name">Ihr Name (optional):</label><input type="text" id="name" name="name" maxlength="30">
                </div>
                <div>
                    <label for="email">Ihre E-Mail-Adresse:</label><input type="email" id="email" name="email" maxlength="30" required="required">
                </div>
                <div>
                    <label for="betreff">Betreff:</label><input type="text" id="betreff" name="betreff" maxlength="50" required="required">
                </div>
                <div>
                <label id="label-nachricht" for="nachricht">Ihre Nachricht:</label>
                <textarea cols="80" rows="10" name="nachricht"  id="nachricht" maxlength="2500" required="required"></textarea>
                </div>




                <input type="submit" value="Senden" id="submit-button" name="submit">




                <?php
                    echo ueberpruefeForm($email, $empfaenger, $betreff, $nachricht, $headers, $name);   // sende E-Mail (siehe function oben), gebe Rückmeldung für User aus
                ?>
        </form>




    </main>




</div>




    <footer>




        <p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. &Uuml;bungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>




        <p><small>&copy; <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>




    </footer>




</body>




</html>

Alles anzeigen

functions.php

PHP

<?php
    require_once('config.php');




    // Copyright im Footer setzen
    function setCopyright($startYear, $currentYear) {
        if ($currentYear > $startYear) {
            $copyright = $startYear . ' - ' . $currentYear;
        } else {
            $copyright = $currentYear;
        }
        return $copyright;
    }




    // Kontaktform überprüfen (inkl. function für Mailversand über Kontaktform)
    function ueberpruefeForm($email, $empfaenger, $betreff, $nachricht, $headers, $name=null) {
        if ( $_POST['submit'] == 'Senden' ) {
            if ( empty($email) && empty($betreff) && empty($nachricht) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben alle erforderlichen Felder nicht ausgef&uuml;llt. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($email) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben Ihre E-Mail-Adresse nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($betreff) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben den Betreff nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else if ( empty($nachricht) ) {
                $rueckmeldung = '<p><strong>Fehler! Sie haben Ihre Nachricht nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
            } else {
                if ($name != null) {
                    $nachricht .= "\r\n\r\n\r\n" . 'Gesendet von: ' . $name;
                }
                if (sendeMail($empfaenger, $betreff, $nachricht, $headers)) {
                    $rueckmeldung = '<p><strong>Vielen Dank! Ihre Nachricht wurde erfolgreich versendet.</strong></p>';
                } else {
                    $rueckmeldung = '<p><strong>Offenbar ist ein Fehler beim Versand der E-Mail aufgetreten. Bitte versuchen Sie es sp&auml;ter nochmal oder <a href="mailto:habichvergessen40@gmail.com"  title="habichvergessen40@gmail.com">schreiben Sie mir manuell eine E-Mail</a>. Vielen Dank f&uuml;r Ihr Verst&auml;ndnis!</strong></p>';
                }
            }
        }
        return $rueckmeldung;
    }




    // Mail über Kontaktform senden
    function sendeMail($empfaenger, $betreff, $nachricht, $headers) {
        if ( !empty($empfaenger) && mail($empfaenger, $betreff, $nachricht, implode("\r\n",$headers)) == true ) {
            return true;
        } else {
            return false;
        }
    }
?>

Alles anzeigen

config.php

PHP

<?php
    // Configs für Copyrightsetzung
    $startYear = 2016;
    $currentYear = date('Y');




    // Deaktivierung von Notices
    error_reporting(E_ALL & ~E_NOTICE);




    // Aktivierung von Notices
    //error_reporting(E_ALL);




    // Config des Empfängers von Mails über Kontaktform
	$empfaenger = 'habichvergessen40@gmail.com';
?>

Alles anzeigen

style.css

CSS

css/* Desktop Styles */




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




html, body {
    font-size: 100%;
    height: 100%;
    font-family: Roboto, sans-serif;
}




header, nav, main, article, footer {
    display: block;
}




h1, h2, h3, nav a {
    font-family: "Roboto Slab", serif;
}




#wrapper {
    min-height: 100%;
}




header {
    background-color: #008000;
}




header a {
    text-decoration: none;
}




header #logo {
    padding: 2% 0;
    color: white;
    margin-left: 5%;
    font-size: 2.5em;
}




nav#nav_main {
    background-color: #800000;
    width: 100%;
    display: inline-block;
    position: relative;
}




nav#nav_main #navbar .menu-button {
    display: none;
}




nav#nav_main ul li {
    display: inline;
}




nav#nav_main ul li a {
    color: white;
    font-size: 1.4em;
    text-decoration: none;
    display: inline-block;
    width: 20%;
    float: left;
    text-align: center;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    padding: 0.87% 0;
}




nav#nav_main ul li a:hover {
    background-color: #FF0000;
}




nav#nav_main ul ul {
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    background-color: #008000;
    width: 20%;
    z-index: 1;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    opacity: 0;
}




nav#nav_main ul li:hover ul {
    clear: both;
    opacity: 1;
    height: auto;
}




nav#nav_main ul ul li a {
    width: 100%;
    margin: 0 0 2% 0;
}




nav#nav_main ul ul li a.last-menu-item {
    margin-bottom: 0;
}




nav#nav_main ul ul#dropdown-menu_leistungen {
    left: 40%;
}




main {
    background-color: #DCDCDC;
    margin: 1.5% 2.5% 1.5% 2.5%;
    padding: 1% 0;
}




main #heading_container {
    width: 60%;
    background-color: #808080;
    margin: 0 auto;
    margin-top: 1%;
}




main #heading_container h2#heading {
    text-align: center;
    font-size: 1.45em;
    color: #eee;
    padding: 0.2% 0;
    letter-spacing: 0.08em;
}




main p#kontakt {
    margin: 1.5% 1%;
}




main article {
    margin: 1% 0.5%;
    padding: 1% 0.5%;
}




main article p {
    line-height: 1.3em;
}




main nav#nav_leistungen ul {
    margin: 2% 0 2% 2.2%;
    background-color: #808080;
    width: 35%;
    padding: 1% 0 1% 0.8%;
}




main nav#nav_leistungen ul li {
    list-style-type: disc;
    list-style-position: inside;
    color: #F2F2F2;
}




main nav#nav_leistungen ul li a {
    text-decoration: none;
    color: #F2F2F2;
    -webkit-transition: color .5s linear;
    transition: color .5s linear;
    font-size: 1.05em;
    line-height: 1.3em;
}




main nav#nav_leistungen ul li a:hover {
    color: #45B439;
}




main article h3 {
    margin: 0 0 0.23% 0.3%;
    font-size: 1.21em;
}




main article#art1 {
    margin-top: 3.8%;
}




main form {
    background-color: #C0C0C0;
    padding: 2% 1%;
    margin: 1%;
}




main form label {
    display: inline-block;
    width: 13%;
}




main form input {
    margin-left: 2%;
    margin-bottom: 1%;
    padding: 0.3%;
    width: 20%;
}




main form input#submit-button {
    display: block;
    margin-top: 2%;
}




main form input:hover, textarea:hover {
    border: .085em solid green;
}




main form #label-nachricht {
    margin-top: 1%;
    display: block;
}




main form textarea {
    margin-top: 1%;
    padding: 1%;
    overflow: auto;
    max-width: 100%;
}




footer {
    background-color: #0000FF;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: right;
    padding: 0.3% 0 0.4% 0;
}




footer p small {
    color: white;
    padding-right: 3%;
}




footer p strong {
    color: white;
    float: left;
    font-size: 0.8em;
    font-weight: normal;
    padding-top: 0.15%;
    padding-left: 1.2%;
}




@media only screen and (max-width: 1270px) {
    main nav#nav_leistungen ul {
        width: 40%;
    }
    main form label {
        width: 15%;
    }
    footer {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    footer p small {
        width: 100%;
        float: none;
    }
    footer p strong {
        width: 100%;
        float: none;
    }
}




@media screen and (max-width: 1100px) {
    main nav#nav_leistungen ul {
        width: 45%;
    }
    main form label {
        width: 20%;
    }
}




/* Tablet Styles */




@media only screen and (max-width: 1024px) {
    main {
        margin: 1% 1.5% 1% 1.5%;
    }
    main nav#nav_leistungen ul {
        width: 50%;
    }
    main form {
        padding: 2.2% 1.5%;
        margin: 1.2%;
    }
    main form input {
        padding: 0.4em;
        width: 23%;
        margin-bottom: 1.5%;
    }
    nav#nav_main ul li a {
        width: 25%;
    }
    nav#nav_main ul ul {
        width: 25%;
    }
    nav#nav_main ul ul#dropdown-menu_leistungen {
        left: 50%;
    }
    nav#nav_main ul ul {
        display: none;
    }
}




/* Mobile Styles */




@media only screen and (max-width: 860px) {
    main {
        margin: 1.75% 0 1.75% 0;
        padding: 1.25%;
    }
    main article {
        border-top: .085em solid silver;
        margin: 1.5% 0.5%;
        padding: 1.5% 0.5%;
    }
    main .first-article {
        border-top: none;
    }
    main article h3 {
        margin: 0 0 0.3% 0.35%;
    }
    main nav#nav_leistungen ul {
        width: 55%;
        padding: 1.2% 0 1.2% 1.2%;
    }
    main nav#nav_leistungen ul li a {
        line-height: 1.4em;
    }
    main form {
        padding: 2.5% 2.2%;
    }
    main form label {
        width: 23%;
    }
    main form input {
        width: 45%;
        padding: 0.42em;
        margin-bottom: 1.7%;
    }
    main form #submit-button {
        width: 27%;
    }
    nav#nav_main #navbar .menu-button {
        display: block;
        color: white;
        text-decoration: none;
        cursor: pointer;
        font-size: 1.4em;
        padding: 1% 0 1% 2.75%;
    }
    nav#nav_main #navbar .menu-button.hide-navMenu {
        display: none;
    }
    #navMenu_open:target ul {
        display: block;
    }
    #navMenu_open:target #navbar .menu-button.hide-navMenu {
        display: block;
    }
    #navMenu_open:target #navbar .menu-button.show-navMenu {
        display: none;
    }
    nav#nav_main ul {
        display: none;
        height: auto;
        width: 100%;
        float: left;
    }
    nav#nav_main ul li a {
        width: 100%;
        text-align: left;
        padding-left: 2.5%;
        border-bottom: .085em solid #DCDCDC;
        background-color: #008000;
    }
    nav ul ul {
        display: none !important;
    }
}




@media only screen and (max-width: 780px) {
    main nav#nav_leistungen ul {
        width: 65%;
    }
    main form label {
        width: 27%;
    }
    main form input {
        width: 50%;
        padding: 0.45em;
        margin-bottom: 1.8%;
    }
    main form #submit-button {
        width: 30%;
    }
}




@media only screen and (max-width: 660px) {
    main nav#nav_leistungen ul {
        width: 70%;
    }
    main form #label-nachricht {
        margin-bottom: 0.5%;
    }
}




@media only screen and (max-width: 615px) {
    main {
        margin: 2% 0 2% 0;
    }
    main article {
        margin: 2% 0.75%;
        padding: 2% 0.75%;
    }
    main article h3 {
        margin: 0 0 0.45% 0.5%;
    }
    main nav#nav_leistungen ul {
        width: 80%;
        margin: 4% auto;
        padding: 1.2% 0 1.2% 1.75%;
    }
    main form {
        padding: 2.8% 2.8%;
    }
    main form label {
        width: 33%;
    }
    main form input {
        width: 55%;
        padding: 0.47em;
        margin-bottom: 2%;
    }
    main form #submit-button {
        margin-left: 3.5%;
        width: 35%;
    }
    nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
        padding: 1.75% 0 1.75% 3.25%;
    }
}




@media only screen and (max-width: 540px) {
    main nav#nav_leistungen ul {
        width: 85%;
    }
    main form label {
        width: 38%;
    }
    main form input {
        width: 60%;
        padding: 0.48em;
        margin-bottom: 2.2%;
    }
    main form #submit-button {
        width: 42%;
    }
}




@media only screen and (max-width: 515px) {
    main {
        margin: 2.25% 0 2.25% 0;
        padding: 1.75%;
    }
    main article {
        margin: 2.5% 1%;
        padding: 2.5% 1%;
    }
    main article h3 {
        margin: 0 0 0.65% 0.7%;
    }
    main nav#nav_leistungen ul {
        width: 90%;
    }
    nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
        padding: 2.5% 0 2.5% 3.75%;
    }
}




@media only screen and (max-width: 485px) {
    main nav#nav_leistungen ul {
        width: 95%;
    }
}




@media only screen and (max-width: 460px) {
    main nav#nav_leistungen ul {
        display: none !important;
    }
    main form {
        padding: 3.2% 3.2%;
    }
    main form label {
        width: 43%;
    }
    main form #label-nachricht {
        margin-bottom: 1%;
    }
    main form input {
        width: 55%;
        padding: 0.5em;
        margin-bottom: 2.5%;
    }
    main form #submit-button {
        margin: 0 auto;
        width: 47%;
    }
    main form textarea {
        margin-bottom: 2%;
    }
}




@media only screen and (max-width: 415px) {
    main {
        margin: 2.75% 0 2.75% 0;
        padding: 2%;
    }
    main article {
        margin: 3% 1.25%;
        padding: 3% 1.25%;
    }
    main article h3 {
        margin: 0 0 0.85% 0.9%;
    }
    main form label {
        width: 47%;
    }
    main form input {
        width: 48.5%;
    }
    main form #submit-button {
        width: 48.5%;
    }
    nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
        padding: 3.25% 0 3.25% 4.25%;
    }
}




@media only screen and (max-width: 380px) {
    main form {
        padding: 4.5% 3.5%;
    }
    main form label {
        display: block;
        margin: 2.5% 0;
        width: 100%;
    }
    main form #label-nachricht {
        margin-top: 5%;
        margin-bottom: 1.5%;
    }
    main form input {
        width: 80%;
    }
    main form #submit-button {
        width: 80%;
    }
}




@media only screen and (max-width: 320px) {
    main form {
        padding: 5% 4%;
    }
    main form label {
        margin: 2.8% 0;
    }
    main form input {
        width: 95%;
    }
    main form #submit-button {
        width: 95%;
    }
}

Alles anzeigen

Im Anhang findet ihr alles auch nochmal in einer zip-Datei.

So, kommen wir zu meinen Fragen:

Und zwar ist es aktuell so, dass ich den Server, wo die Website drauf ist, nur mit einem .htaccess-Passwortschutz schütze. Da ist also erstmal die Frage, ob das halbwegs ausreicht?

Die Website selber habe ich natürlich freigegeben, weil sie ja online sein muss, damit ihr euch diese ansehen könnt. Dort stellt sich die Sicherheitsfrage hauptsächlich beim Kontaktformular, vermute ich. Hier wäre ich euch dankbar, wenn ihr mir die wichtigsten Sachen nennen könntet, die man beachten muss. Alternativ nehme ich natürlich auch gerne Links.

Zuletzt noch eine Frage zu Google Analytics. Ich würde das nämlich gerne einbinden, um mir das einfach mal anzuschauen, wie das so funktioniert.

Die Frage wäre, ob ich rechtlich irgendwas beachten muss, wie z.B. dass durch den Einsatz davon automatisch ein Impressum notwendig ist oder man darauf hinweisen muss, dass man Google Analytics nutzt?

So, schon mal vielen Dank für das Feedback und eure Hilfe.

Ach, ja. Bitte nimmt meine Seite nicht auseinander, also im Sinne von Hacken usw.

MfG
JR Cologne

Anhang:

html-seminar.de/woltlab/attachment/897/

JR Cologne

Zitat von Basi

Das Wasserzeichen wird von Fotolia automatisch hinzugefügt.

Ach, ok. Dann ist das ja auch kein Problem.

JR Cologne

Naja, gut. Wenn du wirklich dafür Geld in die Hand genommen hast, kann ich den Preis verstehen. Allerdings verstehe ich nicht, warum man für ein solches Icon einen Grafiker anhaut.

Ist echt nicht böse gemeint, aber sowas bekomme ich auch noch hin, wenn man von dem Wasserzeichen und Co absieht. Und ich habe so ziemlich 0 Ahnung von Bildbearbeitung etc.

JR Cologne

Kann mich da Basi anschließen. Definitiv keine schlechte Idee.

Allerdings ist der Preis ein bisschen happig. Besser wäre es vielleicht das Icon kostenlos anzubieten, dafür aber um Spenden zu bitten.

Ansonsten könnte die Website natürlich noch bisschen schöner und professioneller gestaltet werden.

JR Cologne

Bei mir sehe ich keinen Unterschied zwischen Chrome und Firefox. Hast du im Firefox vielleicht den Zoom nicht auf 100%?

JR Cologne

Warum willst du es über diese merkwürdige Möglichkeit machen, wenn es viel sauberer und sicherer mit box-sizing geht?

JR Cologne

Kein Problem, passiert jedem mal.

JR Cologne

Das geht nicht einfach so. Dafür brauchst du PHP.

http://www.php-kurs.com/

JR Cologne

Bei ...

PHP

echo $_GET[vorname];

... fehlen die Anführungszeichen um "vorname".

Richtig ist es also so:

PHP

echo $_GET['vorname'];

JR Cologne

Zitat von newnexo

Das ist nicht übel, aber nicht ganz das, was ich meine. Wenn du die von mir genannte Beispielseite anschaust, wirst du sehen, dass nach Klick auf "Menu" die ganze Seite nach unten rutscht und oben das Hauptmenü sichtbar wird. Das ist wohl nicht nur mit HTML und CSS machbar, oder?

Das ist exakt das Gleiche. Verkleinere das Browserfenster bei meinem Beispiel mal.

JR Cologne

Schau dir mal das an: http://codepen.io/jr-cologne/pen/dGYGvd

Bei Fragen einfach melden.

JR Cologne

:o Wie denn das?

Beiträge von JR Cologne

HP zentrieren auf mobilen Endgeräten

HP zentrieren auf mobilen Endgeräten

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Feedback für meine Website und Fragen zur Sicherheit, PHP uvm.

Datenschutz ICON

Datenschutz ICON

Datenschutz ICON

Lesbarkeit des Forums in Mozilla Firefox

"box-sizing: border-box;", geht auch viel einfacher, oder?

Formular erstellen/anzeigen - Fehlermeldung

Kontaktformular

Formular erstellen/anzeigen - Fehlermeldung

Bewegliche Elemente in Website

Bewegliche Elemente in Website

Probleme bei der Erstellung einer Bildergalerie