Beiträge von lauras

  • Ein Limit einbauen

    Du koenntest z.B. vor dem include eine Limit-Variable setzen, die falls gesetzt in der inc.sidebar.kundenmeinungen.php als Funktionsparameter uebergeben und sie nach dem Include sicherheitshalber wieder null setzen.

  • Frage bezüglich Hintergrundbild in Webseite

    background ist in diesem Fall eine verkuerzte Schreibweise fuer mehrere background-* Eigenschaften.
    In deinem Fall:

    CSS
    html
{
        background-image: url(background.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
}


    background-position definiert, wo dein Bild platziert wird - in diesem Fall horizontal und vertikal zentriert (was du eventuell gar nicht willst?).
    background-attachment: fixed; definiert das Bild als fixiert im viewport, also nicht mitscrollend.
    Eine doppelte Definition des Hintergrundbildes fuer html und body ist nicht noetig.


    Die einzelnen Punkte werden z.B. hier ausfuehrlich erklaert.


    In Scriptly werden manche Sachen deshalb rot dargestellt, weil Scriptly seit langem veraltet ist und Eigenschaften aus aktuellen HTML-/CSS-Spezifikationen noch nicht kennt.
    Zum Lernen ist Scriptly ok wenn du damit leben kannst, aber spaetestens wenn du ernsthaft anfaengst dich mit Webdesign zu beschaeftigen solltest du einen anderen Editor benutzen.

  • Frage bezüglich Hintergrundbild in Webseite

    CSS
    background-repeat: no-repeat;


    Kleiner Tipp am Rande: wir sind zwar ein Forum hauptsaechlich fuer Anfaenger und beantworten solche Fragen gerne, aber es empfiehlt sich, frueh zu lernen, wie man solche Informationen selbststaendig ergooglet - das ist in 99% der Faelle schneller, als auf eine Antwort im Forum zu warten ;)

  • Frage bezüglich Hintergrundbild in Webseite

    CSS
    html {
background-image: url(website_background.jpg);
background-size: cover;
}


    Anmerkung: es empfiehlt sich nicht, fuer Mobilgeraete ein 1920x1080 Bild zu laden. Man kann das Bild z.B. in drei verschiedenen Aufloesungen zur Verfuegung stellen und dann via media queries das entsprechende laden.

  • Navigationsleiste tipp

    Hallo Zeus,


    für Anfänger ist das copy&pasten in der Regel der übliche Weg, ja. HTML Seiten sind statisch, sprich genau das was du reinschreibst kommt am Ende auch raus, keine dynamischen Inhalte etc.
    Um ein Menü dynamisch einzufügen, kannst du z.B. PHP verwenden. Einen PHP-Kurs vom Macher des HTML-Seminars gibt es hier.
    Natürlich musst du den nur um ein Menü einzufügen nicht komplett durcharbeiten, deshalb hier eine Kurzanleitung:


    Um PHP auszuführen brauchst du einen PHP fähigen Server - auf den meisten Servern ist PHP vorinstalliert, auf deinem Rechner musst du dir einen eigenen Webserver installieren, kostenlos und zu empfehlen sind da zum Beispiel WAMP oder XAMPP. Eine Anleitung zum Installieren findest du auf den jeweiligen Webseiten oder im PHP-Kurs (etwas veraltet).


    Hast du den Server installiert und das Ausführen von PHP funktioniert, kannst du anfangen mit dem programmiertechnischen Teil:
    Erstmal müssen all deine Dateien, die PHP-Code enthalten, PHP-Dateien (Dateiendung .php) sein, sonst wird PHP-Code nicht ausgeführt sondern einfach ausgegeben.


    Dann musst du eine Datei erstellen, wo NUR deine Navigation enthalten ist - also der Teil den du auf allen Seiten wiederholen willst. Diese kannst du z.B. als navi.php abspeichern.
    Diese Datei kannst du dann in jeder Seite an der entsprechenden Stelle einfügen.


    Dazu musst du erstmal im HTML die Tags für PHP Start und Ende anbringen:

    PHP
    <!-- HTML-Code -->
<?php
// alles hier drin wird als PHP-Code interpretiert
?>
<!-- HTML-Code -->


    Dazwischen schreibst du dann folgende Zeile:

    PHP
    include 'navi.php';


    Wichtig ist, dass der Pfad stimmt, falls als deine Datei anders heißt oder in einem anderen Ordner liegt entsprechend anpassen.


    Natürlich funktioniert das nicht nur mit Navigationen, sondern mit jeglichem Code :)


    LG

  • Progressive Enhancement AJAX-Affenformular?

    Was verstehst du unter "keine zusätzliche Auszeichnung im bereits bestehenden Code"?
    Du wirst wohl nicht drum rum kommen, zumindest den PHP-Code (leicht) abzuaendern.
    Ich wuerde das ganze wohl so loesen:
    - normales Affenformular aufbauen, Formularhinweise und Co. in ein Array mit entsprechender Struktur speichern, diese Hinweise entsprechend im Formular ausgeben falls vorhanden
    - beim Absenden via Ajax einen zusaetzlichen Parameter setzen, der vom Formular sonst nicht gesetzt wird
    - diesen Parameter im PHP-Code vor der erneuten Ausgabe des Formulars abfragen, falls vorhanden das aufgebaute Fehlerarray zurueckgeben und exit;
    - das Array dann per Javascript weiter auswerten und die Fehlermeldungen entsprechend dem Formular hinzufuegen


    So kannst du das Formular normal ohne Ajax absenden, die Seite wird neu geladen und das Formular wieder mit Hinweisen dargestellt, kannst aber auch einen POST-Request an die gleiche Seite mit gesetztem Ajax-Parameter senden und statt dass das Formular ausgegeben wird wird das entsprechende Array zurueckgegeben. Die entsprechende URL wo der Ajax-Request hingesendet werden soll kannst du ja aus dem action-Attribut des abgesendeten Formulars ziehen.

  • cURL erhält keine Daten mehr!

    Da musst du wohl tendenziell eher beim Betreiber der Seite direkt fragen, da wir dir logischerweise ohne die entsprechenden Credentials nicht richtig helfen koennen. Evtl. hat sich da bei den cURL-Richtlinien was geaendert oder so.
    Ins blaue reingeraten versuch mal den user-agent zu setzen, den braucht man z.B. bei wikipedia fuer eine cURL-Anfrage, z.B.

    PHP
    curl_setopt($ch, CURLOPT_USERAGENT, 'MyBot/1.0 (http://www.mysite.com/)');


    Du kannst es auch mal mit file_get_contents probieren.

  • Layout tutorials

    Generell empfiehlt sich allerdings für alles was Digital-Layout (nicht Print-Layout) ist eher Photoshop oder InDesign zumindest im Pixel- und nicht im mm-Modus..

  • Artikelbilder Vorschau

    Mal so ganz rudimentär (ohne die Logik dahinter wo die Bilder herkommen und wie das HTML ggf. generiert wird), unter der Voraussetzung dass jQuery verfügbar ist (der Übersichtlichkeit halber) und komplett ungetestet:


    Du hast einen Container, in den das Bild reinsoll, und die Thumbnails unten drunter (oder sonstwo - das ist prinzipiell egal):

    HTML
    <div id="ziel-container"></div>
<img class="thumbnail" src="bild-1-thumbnail.jpg">
<img class="thumbnail" src="bild-2-thumbnail.jpg">
<img class="thumbnail" src="bild-3-thumbnail.jpg">
<img class="thumbnail" src="bild-4-thumbnail.jpg">


    Zusätzlich musst du noch irgendwie an die Information kommen, wie das größere Bild geladen werden soll, dazu könnte man z.B. einfach das -thumbnail aus dem src-Attribut rausnehmen, aber der Übersichtlichkeit halber machen wir das mal mit einem data-Attribut:

    HTML
    <img class="thumbnail" src="bild-1-thumbnail.jpg" data-src="bild-1.jpg">
...


    In scr steckt also das Thumbnail-Bild, was vom Browser ganz normal angezeigt wird und in data-src das große Bild was wir später oben anzeigen wollen (data-*-Attribute werden vom Browser ignoriert).


    Nun kommt Javascript (in unserem Fall mit jQuery-Framework) zum Einsatz.
    Die Logik hinter unserem Plan ist ja die folgende:
    WENN jemand mit der Maus über ein Bild fährt DANN zeige das entsprechende größere Bild im Container an.


    Dazu registrieren wir einen event-Handler, der genau das macht:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {	
    // do something	
});


    Wir wählen also alle Elemente aus, die die Klasse thumbnail haben, und weisen Ihnen eine Funktion zu, die immer aufgerufen wird, wenn die Maus über das Element fährt.
    Würden wir das ganze so:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {
	alert('hallo');	
});


    abändern, würde bei jedem hovern ein alert aufgehen der hallo ausgibt.


    Nun wollen wir aber nicht hallo ausgeben, sondern das Bild im oberen Container ändern.
    Erstmal holen wir uns die URL aus unserem Element.

    JavaScript
    var url = $(event.currentTarget).data('src');


    Wir nehmen das gehoverte Element (dieses steckt in event.currentTarget, welches wir dann per $ Funktion zu einem jQuery-Element machen, auf das wir dann mit weiteren jQuery-Funktionen wieder zugreifen können), und holen uns von dem das data-Attribut mit dem Namen src. Wenn wir also über Bild 1 gehovert hätten, steckt in der Variable url nun "bild-1.jpg".


    Danach weisen wir dem Container das Bild als Hintergrundbild zu:

    JavaScript
    $('#ziel-container').css({
	'background-image': 'url(' + url + ')'
});


    Erklärung: wir wählen den Ziel-Container via id aus, und weisen ihm ein background-image zu. Statt nun background-image: url(bild-1.jpg) zu schreiben, wir wir es im normalen CSS tun würden, schreiben wir als Dateinamen den Wert der Variablen url rein.


    Unser kompletter Javascript-Code sieht dann so aus:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {
	var url = $(event.currentTarget).data('src');
	$('#ziel-container').css({
		'background-image': 'url(' + url + ')'
	});
});


    Das ganze dann irgendwie einbinden (entweder per script-Tag oder besser in einer extra-Datei) - fertig.
    Natürlich kann man das ganze auf viele verschiedene Weisen lösen, aber das ist mal die einfachste. Geht natürlich auch mit normalem Javascript.


    Bei Fragen fragen :)