Beiträge von JR Cologne

Genau richtig. Hab meinem Beitrag mal die Version hinzugefügt.

Ich hab einmal das Anti-Viren-Programm "TrustGo" standartmäßig auf meinem Handy und zusätzlich hab ich mir noch "Avira" kostenlos runtergeladen.

Darauf vertrauen, dass die Apps im Play Store alle sauber sind, würde ich nicht, weil manche Apps dann doch Viren haben. Von den Berechtigungen, die manche Apps besitzen, rede ich erstmal gar nicht. Man muss natürlich aber auch sagen, dass man es den Apps meistens ansieht, wenn sie eher kontraproduktiv sind, aber zur Sicherheit, würde ich auf ein zumindest kostenloses Anti-Viren-Programm auf keinen Fall verzichten.

(Android 4.2.2)

Tut mir Leid. Ich verstehe irgendwie nicht, was du vor hast bzw. wo das Problem liegt. Vielleicht hilft es, wenn du das ganze nochmal anhand eines Bildes deutlich erklärst und vielleicht auch einzeichnest, was anders sein soll. Weil so kann ich dir nicht helfen. Sorry!

1. Am einfachsten ist es immer, wenn man den Code gleich mitgibt, denn dann kann man dir viel besser helfen.

2. Sind die verschiedenen Bilder in einer anderen HTML-Datei, also kommt man auf eine neue Seite, wenn man z.B. auf Bild 4 klickt? Wenn das so ist, kannst du es einfach mit HTML machen. Falls nicht, brauchst du PHP.

Ja, ich weiß. Das sieht dann noch ziemlich bescheiden aus, aber ich bin ja auch noch nicht fertig. Das wird hoffentlich alles noch...

Zitat von MrMurphy

ich würde das aktuelle HTML5 / CSS3 nutzen und das Flexboxmodell ( display: flex; ) verwenden. Im Gegensatz zu den bislang vorhandenen Methoden ist es schließlich speziell zur Gestaltung des Layouts entwickelt worden.

Das wollte ich eigentlich auch, aber leider hatte ich dann keine Lust das Ganze nochmal komplett neu zu machen und deswegen hab ich mich dann dazu entschieden es erstmal sein zu lassen und dann vielleicht später irgendwann das Ganze zu überarbeiten und da dann die Flexbox zu nutzen.

Zitat von wolf

Richtig erkannt, dann rutscht der footer nach unten http://codepen.io/wolf-w/pen/zGgYxG?editors=110

Okay, danke. Dann probier ich das auch mal aus.

Zitat von wolf

dann bleibt der Footer mindestens unten am Rand, wenn der content nicht lang genug ist... ist aber kein echter 'sticky footer'

Wie soll ich das verstehen? Rutscht der Footer dabei auch nach unten, wenn zu viel Content vorhanden ist?

Wow, eine Antwort vom Chef persönlich.

Vielen Dank für die Hilfe. Wusste noch gar nicht, dass es jetzt auch Tutorials bzw. Artikel zum responsiven Webdesign gibt. Daumen hoch!

Werde ich mir gleich mal vorknöpfen. Endlich kann ich mal wieder mithilfe meiner Lieblingswebsite weiterlernen und muss mir nicht immer alles irgendwo aus den Weiten des Internets raussuchen.

Ok, eins nach dem anderen..ich hab mich anscheinend ziemlich unverständlich ausgedrückt.

Zitat von MrMurphy

Du musst dich zunächst entscheiden, ob du die Seite für dich oder deine Benutzer erststellen willst.

Die Seite ist kein privates Projekt von mir und soll demensprechend für die Benutzer sein.

Zitat von MrMurphy

Wenn du die Seite für deine Besucher erstellen willst solltest du die Seite von Anfang an so erstellen, dass die Seite deren Fenster ausfüllt. Die ziehen ihr Fenster schließlich so groß auf, wie es ihnen genehm ist. Die dann mit leeren Flächen oder seitlichem scrollen zu bestrafen ist unhöflich.

Ich hatte mir gedacht, dass ich die Seite bei einem Viewport von 1280x720 über den ganzen Viewport ausbreite. Bei größeren Viewports soll dann die Seite mit einer Größe von 1280x720 zentriert wird, damit zum Beispiel ein Menüpunkt sich nicht über z.B. 500px, oder was weiß ich, zieht. Das würde dann ja nämlich auch nur unnötig langgezogen aussehen. Und bei kleineren Viewports würde ich alles halt mit Media Queries anpassen.

Das war halt so meine Idee, weil es ja auch relativ einfach umzusetzen ist. Aber, das scheint ja eher kontraproduktiv zu sein.

Zitat von MrMurphy

Wo soll der "Sticky Footer" sein? Ohne weitere Infos gehört er an den unteren Fensterrand.

Dazu hatte ich dieses Bild gemacht: http://www.directupload.net/file/d/4080/9yyf3isq_png.htm

Genau da, wo er auf dem Bild ist, soll er bei einem Viewport, der größer als 1280x720, sitzen.

Bei exakt der Größe soll er an den unteren Viewportrand, ganz klassisch.

Richtig positioniert sind die schon. Die sitzen genau da, wo ich sie haben will. Nur leider schiebt der Main-Bereich sie sich nicht automatisch nach unten, wie man auf dem Bild sehen kann: http://www.directupload.net/file/d/4080/7vsungb9_png.htm

Und genau das möchte ich gefixed haben.

Aber, wenn ich die Höhenbegrenzung rausnehme, dann kommt der natürlich nach ganz unten.

Zitat von MrMurphy

Von daher solltest du dich darauf beschränken, die Breite so zu begrenzen, das die Besucher weder seitwärts scrollen müssen noch seitlichen Leerflächen haben. Die Höhe bestimmen dann die Inhalte selbst.

Ja, gut. Die Begrenzung der Höhe könnte ich wegmachen. Da gibt es ja nicht so eine große Spanne zwischen der kleinsten und der größten Höhe, wie bei der Breite.

Ich dachte mir halt, dass das am einfachsten zu handlen ist, wenn ich es begrenze und dann zentriere, aber wenn das nicht empfehlenswert ist, werde ich das auch nicht machen.

Vielen Dank euch für das "Augen öffnen".

Ich änder das dann erstmal dementsprechend und präsentiere euch dann nochmal das Ergebnis.

So, ich hab das Ganze (mit der Zentrierung etc.) mal rückgängig gemacht. Im ersten Post hab ich dementsprechend auch den Code angepasst. Jetzt besteht weiterhin aber noch das eigentliche Problem mit dem Sticky Footer.

Heißt ich möchte jetzt den Footer immer am unteren Bildschirmrand haben. Der Footer ist schon mit "position: absolute" ganz unten positioniert. Genauso ist der Wrapper relativ positioniert und hat eine "min-height:" von 100%. Wo ist also das Problem? Warum reagiert der Footer nicht, wenn ich Content hinzufüge?

Hier nochmal das Bild zum Problem: Klick

Ums Handy geht es mir erstmal gar nicht. Das Design ist erstmal nur für einen normalen PC.

Von Google hab ich schon mehrere Dinge ausprobiert. Hat aber leider nicht geklappt.

Und falls das wie Betteln rüberkam, tut es mir Leid. War mir nur nicht sicher, ob es verständlich genug war.

Hallo zusammen,

ich habe folgende Frage bzw. folgendes Problem:

Ich möchte bei einem responsive Design, das auf den Viewport 1280x720 ausgelegt ist und bei allen anderen Auflösungen sich automatisch vertikal und horizontal zentriert, einen Sticky Footer haben.

Wichtig ist aber, dass der Footer auch bei der Zentrierung, die bei anderen Auflösungen erfolgt, der Seite berücksichtigt werden soll. Der Footer soll also in dem Fall nicht unten am Ende des Viewports sein, sondern zusammen mit den anderen Elementen horizontal und vertikal zentriert werden.

Also im Prinzip so: Klick

Ich hab es also theoretisch schon, aber leider geht das nicht mehr, wenn ich mehr Inhalt in den Content-Bereich einfüge: Klack

Ich hoffe es ist halbwegs verständlich, was ich meine.

Hier noch der Code:

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




<head>
    <title>Startseite</title>




    <meta charset="UTF-8">




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




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




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




</head>




<body>




<div id="wrapper">




    <header>




        <p id="logo" class="inline-block">Carblog</p>




        <div id="profilbild" class="inline-block">
            <p>Profilbild</p>
        </div>




        <div id="profil" class="inline-block">
            <p>Profil:<br>
            Chris333<br>
            Auto:<br>
            Toyota Celica T23</p>
        </div>




        <div id="suchleiste" class="inline-block">
            <p>Suchleiste</p>
        </div>




        <div id="messenger-button" class="inline-block">
            <p>Messenger Button</p>
        </div>




        <div id="menue-button" class="inline-block">
            <p>Men&uuml;<br> Button</p>
        </div>




    </header>







    <nav>




        <ul>
            <li><a href="index.php">Startseite</a></li>
            <li><a href="gruppen.php">Gruppen</a></li>
            <li><a href="events.php">Events</a></li>
            <li><a href="autohandel.php">Autohandel</a></li>
            <li><a href="verkehrsmelder.php">Verkehrsmelder</a></li>
            <li><a href="spotted.php">Spotted</a></li>
        </ul>




    </nav>







    <main>




        <section id="section-left" class="inline-block">
            <p>Benachrichtigungen/News zum eigenen Profil etc.</p>
        </section>




        <section id="section-middle" class="inline-block">
            <p>Allgemeine News</p>
        </section>




        <section id="section-right" class="inline-block">
            <p>Verkehrsmeldungen etc.</p>
        </section>




    </main>







    <aside>




        <p>Werbung</p>




    </aside>




</div>




<footer>




</footer>




</body>




</html>

/* Desktop Style ( Viewport 1280 x 720 ) */




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







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







header, nav, main, section, aside, footer {
    display: block;
}







.inline-block {
    display: inline-block;
}







#wrapper {
    position: relative;
    height: 100%;
    min-height: calc(100vh - 20px);
}







header {
    height: 11.111%;
    background-color: #BD0023;
}







header #logo {
    padding-top: 1.4%;
    padding-left: 1.56%;
    font-size: 2.24rem;
    font-weight: bold;
    color: white;
}







header #profilbild {
    width: 4.687%;
    height: 70%;
    margin-top: 0.895%;
    margin-left: 16%;
    vertical-align: top;
    background-color: white;
}







header #profilbild p {
    padding-top: 6%;
    text-align: center;
    font-size: 0.8rem;
}







header #profil {
    width: 9.374%;
    height: 69.988%;
    margin-top: 0.806%;
    margin-left: 0.16%;
    vertical-align: top;
    background-color: #BD0023;
}







header #profil p {
    font-size: 0.8rem;
    color: white;
}







header #suchleiste {
    width: 19.53%;
    height: 26%;
    margin-top: 2.25%;
    margin-left: 5.335%;
    vertical-align: top;
    border-radius: 0.312rem;
    text-align: center;
    background-color: white;
}




header #suchleiste p {
    padding-top: 1.2%;
    font-size: 0.8rem;
}







header #messenger-button {
    width: 4.7%;
    height: 70%;
    margin-top: 0.895%;
    margin-left: 6%;
    vertical-align: top;
    border-radius: 50%;
    text-align: center;
    background-color: white;
}







header #messenger-button p {
    padding-top: 27%;
    font-size: 0.56rem;
}







header #menue-button {
    width: 4.7%;
    height: 70%;
    margin-top: 0.895%;
    margin-left: 3.5%;
    vertical-align: top;
    border-radius: 50%;
    text-align: center;
    background-color: white;
}







header #menue-button p {
    padding-top: 27%;
    font-size: 0.56rem;
}







nav {
    display: inline-block;
    width: 100%;
    height: 4.5%;
    margin-top: 0;
    background-color: #FF011F;
}







nav ul li {
    display: inline;
}







nav ul li a {
    display: inline-block;
    width: 10.8%;
    float: left;
    text-align: center;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    font-size: 1.04rem;
    color: white;
    text-decoration: none;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
}







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







main {
    width: 86.822%;
    height: 77.7%;
    float: left;
    margin-top: -0.3%;
}







main #section-left {
    width: 20%;
    height: 92%;
    margin-top: 1.8%;
    margin-left: 6.75%;
    margin-bottom: 1.8%;
    padding: 1%;
    vertical-align: baseline;
    border-radius: 1.25rem;
    background-color: #E9E7E7;
}







main #section-middle {
    width: 42.158%;
    height: 92%;
    margin-left: 3%;
    margin-bottom: 1.8%;
    padding: 1%;
    vertical-align: bottom;
    border-radius: 1.25rem;
    background-color: #E9E7E7;
}







main #section-right {
    width: 16.863%;
    height: 92%;
    margin-left: 3%;
    margin-bottom: 1.8%;
    padding: 1%;
    vertical-align: bottom;
    border-radius: 1.25rem;
    background-color: #E9E7E7;
}







aside {
    width: 13.177%;
    height: 77.7%;
    margin-left: 86.8%;
    margin-top: -0.3%;
    border-left: 0.0625rem solid black;
}







aside p {
    text-align: center;
    padding-top: 150%;
}







footer {
    position: absolute;
    bottom: 0;                 
    width: 100%;
    height: 20px;
    background-color: #BD0023;
}

Wer sich den aktuellen Stand lieber im eigenen Browser ansehen will, kann mal hier vorbeischauen.

Zusätzlich würde es mich sehr freuen, wenn jemand generell mal über den Code etc. gucken würde und dazu seine Meinung, Tipps usw. abgegeben würde. Besonders interessieren würde es mich, ob es bei der Zentrierung der Website bessere Möglichkeiten gibt, die auch funktionieren.

Das aktuelle Ergebnis ist nämlich mehr durch Ausprobieren entstanden, bis es dann irgendwann funktionierte.

So, dann bedanke ich mich schon mal und hoffe, ihr könnt mir helfen.

Gruß
JR Cologne

Hab ich mich unverständlich ausgedrückt oder weiß keiner eine Lösung?

Wo ist bitte dein div-Container? Ich sehe nur p-Tags.

Und was soll bitte das sein?

</class>

Jage deinen Code bitte erstmal durch den w3c-Validator und dann wird sich vielleicht schon einiges erklären...

Die Startseite heißt normalerweise "index.html" bzw. "index.php".

Aber rein theoretisch kannst du die so benennen, wie du willst.

Achso, vielen Dank für deine Hilfe.

Achso, alles klar. Vielen Dank.

Dass es bei dem Modus w überschrieben wird, war mir klar. Nur halt nicht der Sinn von "exit". Aber jetzt ist das ja klar. "Exit" macht dann also erst wirklich Sinn, wenn man den Inhalt anhängt und nicht überschreibt, richtig?

Ich hab das leicht anders gemacht und das Ganze in eine Datei gepackt. Somit wird das Formular bei mir nach dem absenden noch angezeigt, aber es wird auch der Text eingeblendet. Passt also alles.

Guten Abend zusammen,

ich bin gerade bei folgender Aufgabe: http://www.php-kurs.com/formul…-in-dateien-speichern.htm.

Es funktioniert alles, aber eines verstehe ich nicht. Was bringt die "exit"-Funktion, die man am Ende setzen soll?

Laut dem Kommentar, ist die Funktion dazu da, die Datei nicht weiter ausführen zu lassen. Aber irgendwie sehe ich das nicht...

Denn, wenn ich die Email und den Namen in das Formular schreibe und mir das dann später in der Datei angucke, wird ja alles richtig ausgegeben. Aber wenn ich jetzt wiederum etwas Neues in das Formular eintippe wird das Programm wieder ausgeführt, also wird das von eben überschrieben und ich hab jetzt das in der Datei, was ich beim zweiten Mal eingetragen hatte. Doch das dürfte doch eigentlich gar nicht passieren, oder? Schließlich sagt man doch mit der "exit"-Funktion, dass das Programm nicht mehr ausgeführt werden soll?

Oder verstehe ich den Sinn von "exit" falsch?

Schon mal vielen Dank für die Hilfe.

MfG
JR Cologne

Nein, der <font>-Tag ist komplett tabu. Das wird schon lange nicht mehr so gemacht.

Edit: War wohl zu langsam.

Ich schulde dir 202€ !

Echt witzig mit dem Geschenk und der Fehlerseite!

Jetzt brauche ich die absolute Positionierung nicht mehr, aber vorher war sie ja schon ganz hilfreich. Zumindest habe ich sie genutzt.

Deswegen brauchte ich ja auch eine neue Variante, um Dinge zu positionieren. Somit wird es jetzt wohl die Flexbox, damit ich auch ohne Probleme die Elemente positionieren kann, auch wenn ich %-Angaben benutze.

Vielen Dank. Werde mir das mal anschauen.

Einfach mal so aus Interesse, was gibt es denn noch für Möglichkeiten?