Beiträge von Elly

Jetzt bin ich wieder da, wo ich schon mal war.

Ich hab mir die Buchvorstellung von Murphy angeschaut. Er hat eine figure und darin das img, figure zusammen mit p in einem div und unter diesem div dann den Link.

Ich wollte dieses zusätzliche div jetzt weglassen und hab also das Bild links vom Text, den Link krieg ich auch mit display:block dann nach rechts, ohne float.

Klingt ja alles ganz schön. Allerdings fällt mir das Bild jetzt dank float aus dem Rahmen, dh der Rahmen wächst nicht mit dem Bild. Daran ist ja eig das float schuld und nicht mein weglassen von figure und extra-div. Das Float hat Murphy aber auch drin.

Zum Testen hab ich grad mal eine Höhe von 300px angegeben, damit man sieht, was da passiert - verschiebt alles.

Ich steh irgendwie auf dem Schlauch.

Hier der Link

PS: Das mit dem Styles auslagern kommt noch.

Das hatte ich ja auch schon probiert, aber wie gesagt wurde mir dann gar kein Indicator angezeigt.

Mein Carousel verwendet momentan die Standard-Indicators. Da mir die Pfeile aber zu kantig sind, würde ich sie gerne austauschen.

Dazu habe ich fogendes gefunden. Also gehen tut es...

Mit meiner SVG schaffe ich das aber nicht.

Ich hab im Original Bootstrap Indicator CSS nur den Data-Wert gegen meinen ausgetauscht, trotzdem wird mir immer noch das Original von Bootstrap angezeigt. Wenn ich die SVG direkt als url einbinde, wird mir gar nichts angezeigt, egal ob ich Schwarz oder Weiß als Farbe verwende.

Original Bootstrap:

.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

Meine SVG;

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="257.57px" height="451.847px" viewBox="97.138 0 257.57 451.847" enable-background="new 97.138 0 257.57 451.847"
     xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0
        c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744
        c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z"/>
</g>
</svg>

Einer Reihe ja. Aber damit alle gleich hoch sind, braucht es die Angabe. Wenn die dann nämlich um 2-3 Zeilen unterschiedlich gefüllt sind, find ich's fast schöner, wenn sie alle gleich groß sind, wenn sie dann auf 2 oder 1 Spalte umbrechen.

Zitat von MrMurphy

Bei der Klasse grid können die beiden rows-Anweisungen gelöscht werden. Die bewirken nichts

Die zweite bewirkt tatsächlich nichts. Die erste brauche ich, damit mir alle Cards gleich hoch anzeigt werden, oder?

Danke für die Tipps. Ich hatte eig noch vor, den gesamten Header oder zumind einen Teil davon via PHP einzubinden, wie ich das mit der nav und dem footer gemacht habe, da auch andere Angaben für die gesamte Seite gleich sind. Meta-Angaben und Scripts zB.

Bei deinem Grid - wieso hast du da jetzt ein only screen in der MQ? Könnte doch auch für all sein?

grid-column:auto; braucht es dann letzten Endes, sonst würde man auch da wieder 2 Media Queries brauchen.

Schau mal, jetzt hab ich's upgedated. Läuft.

Bin richtig happy, dass ich um so vieles schlauer geworden bin im letzten Monat! Nicht zuletzt weden dir und Murphy. Danke!

Dann fällt aber das auto-fit weg und ich brauche noch eine weitere Media Query für die Bereiche untereinander.

Mit der Start/End-Variante kann ich eine einzige Media Query machen und dort wirkt dann das auto-fit wieder.

Find ich jetzt da praktischer. Außer ich hab einen Denkfehler?

Achja, die areas gibt's ja auch noch. Danke!

Bei meinem Tippfehler ohne n hatte ich zusätzlich auch noch einen Denkfehler. Das muss nämlich grid-column: 1 / 3; heißen, nicht 1 / 2.

Um da jetzt eine Grid mit 3 Bereichen aufzuziehen, braucht es anscheinend nicht mal ein mittleres leeres DIV.

Aber ohne Media Queries geht wohl weder die eine noch die andere Lösung nicht. Dann mach ich ab einer gewissen Bildschirmbreite eine Grid mit 2 columns. Also praktisch dann nur grid-column-start und -end ändern, mein autofit kann dann eig bleiben.

Das mit den Areas hab ich auch verstanden. Sind dann 3 Bereiche und ab einer bestimmten Breite dann 2 Bereiche, also neu definiert.

Welche Variante besser ist, kommt wohl auf dasselbe raus?

Hallo an alle,

ich habe mich mittlerweile in CSS Grid eingelesen und muss schon sagne, das erleichtert soooo vieles! Da werd ich meine andere Seite (mit den ganzen Cards) echt bald mal umbauen!

Grade bin ich an einem anderen Projekt dran und hab da die Grids schon angewendet.

Eine Frage habe ich dazu.

Ich habe im Main 3 Cards und im Footer nur 2 Bereiche nebeneinander. Ich hätte gern, dass der 2. Bereich aber unter der 3. Card beginnt. Das müsste doch irgendwie gehen? Ich hab's mal mit grid-colum-start versucht, aber das scheint leider nicht zu klappen, das wird mir rausgeworfen.

Und hergehen und einen mittleren leeren Bereich einfügen find ich nicht sehr elegant. Zumal das dann ja nicht mehr schön responsive ist.

Hier der Link

LG

Elly

Ich hab grad selbst gecheckt, was meinem JS-Schnipsel gefehlt hat, dass das auch in einem neuen Dokument funktioniert. Es braucht eine Variable, die zuerst definiert wird, in meinem Fall die Navigation nav.

const nav = document.querySelector("nav");
        window.onscroll = ()=>{
          this.scrollY > 20 ? nav.classList.add("sticky") : nav.classList.remove("sticky");
        }

Vielleicht hilft es dir ja weiter.

Ahhhh, Mann!

Das jQuery ist für einen Teil des Menüs, den ich rausgelöscht hab...

Danke!

Manchmal glaubt man, man kann für eine neue Seite einfach das, was man schon hat, nehmen und anpassen. Dann tut man es und merkt, es geht nicht. Und versteht nicht warum.

const url = document.location.href;
        document.querySelectorAll('nav ul li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });

Link zur Seite

Testen nur mit Menüpunkt Mitglieder (mitglieder.php und index.php).

Die Klasse active wird erst gar nicht hinzugefügt.

Auch wenn ich alle a nehme, geht's nicht. Weder lokal noch online (denn das Problem hatte ich auch schon, dass JS lokal gar nicht funktioniert hat).

Link zur anderen Seite - da ist es ja gleich, da geht's.

Ah, dann ist ja alles klar. Dann kann das ja so bleiben, wenn's mit float nicht anders geht.

Meine erste Herangehensweise an das Menü war, alle floats zu entfernen und das Ganze in eine Flexbox umzustrukturieren. Links das Logo, die Menüpunkte in einem eigenen DIV, die beiden auf space-between und das Menüpunkt-DIV nochmal auf space-between. Das hat für Großbildschirme auch funktioniert, fürs Handy dann aber nicht mehr, da war dann alles verschoben. Also hab ich wieder von vorne angefangen und nur das Design geändert, nicht aber die Struktur.

Ich poste das jetzt nochmal hier in diesem Thread.

Ich hatte ja damals das Problem hier mit einem Menü. Diesmal hab ich's geschafft, es selbst zu lösen - bei einem anderen Menü für eine neue Seite.

Da die Menüs sehr ähnlich sind, passt das mMn hier nochmal rein.

Also: Ich hab eine NAV und darin einen Wrapper, in dem dann das Menü ist. Bei dem Menü in dem Thread hier war das auch so, nur hatten die eine andere Bezeichnung. Das Original von diesem Menü hat diesen Wrapper nicht. Ich möchte aber nicht, dass sich alles über die ganze Bildschirmbreite erstreckt, es passt danach auch zum Content usw. Dem Wrapper hab ich mal eine gelbe Border gegeben, damit man sieht, was ich meine. Eigentlich wäre ja der ganze Menüinhalt innerhalb dieses Wrappers, er ist aber quasi drüber und umrahmt das ganze nicht. Wenn ich ihm display:flex zuweise, würde er das zwar machen, aber dann tut das Menü nicht mehr das, was es soll.

Wie kann ich das Problem jetzt lösen? Ich mein, der Wrapper tut zwar, was er soll - nämlich den Inhalt des Menüs zusammenschieben auf 960px, sodass der Hintergrund vom Menü trotzdem die volle Breite hat. Man könnte das jetzt einfach so lassen, da man's ohne Border eh nicht sieht. Und wie ihr unten im Content seht, da passt's dann plötzlich. Aber ich würde gerne verstehen, warum das so ist und das ggf. doch "ausbessern".

Hier mal der vorläufige Link zur Seite.

Danke für euer aufschlussreiches Wissen!

Elly

Probier statt margin-left: 1200px; mal margin:0 auto; - das sollte ihn horizontal zentrieren.

Zitat von jonas3344

Hindert Dich ja niemand dran die Zugangsdaten anders zu speichern, ausserhalb des Document Root oder auch in der Datenbank.

Nur mein Wissen.

Mit dem Backend bin ich nicht wirklich vertraut.

Zitat von m.scatello

Und wie sollte das gehen?

Das weiß ich nicht, ich bin kein Hacker. Aber die PHP-Dateien lassen sich bestimmt auslesen. Deswegen ist mir das suspekt, die SMTP-Daten dort offen einzugeben.

Zitat von m.scatello

Machen wir hier deinen Job?

Ne, wieso? Sagt ja niemand. Hab damit nur gesagt, dass die Seite, die ich mache, für einen Verein ist, und ich daher Kontaktformular.com nicht verwenden darf.

Zitat von m.scatello

Und genau deswegen hättest du den veralteten Kram gar nicht posten müssen.

Es hätte ja sein können, dass der heute auch noch was taugt - mit ein paar Ergänzungen.

Meine Frage letzten Endes wäre eig, welche Kontaktformulare man heutzutage so verwendet bzw. ob dieses EasyPHP was taugt. Ich denke mal, so falsch wird das nicht sein, aber ihr habt ja mehr Erfahrung.

Hallo an alle,

ich bin auf der Suche nach einem modernen Kontaktformular mit Spamschutz. Modern soll heißen an die heutigen Standards angepasst, zB PHP7, Sicherheit etc.

Ich hab hier im Forum ein Tutorial zum PHP-Mailer gefunden, das mir auch schon beim Googlen unterkam. Dort stört mich aber, dass ich meine SMTP-Zugangsdaten angeben soll...die liegen ja dann einfach mal so auf dem Server rum und können ausspioniert werden. Genauso beim Swift Mailer.

Kontaktformular.com ist leider nur für Privatanwender kostenlos und ich soll eine Seite für Vereine machen, wofür es explizit als nicht kostenlos ausgewiesen ist.

EasyPHP Contact Form würde mir nun am meisten zusagen mit der Honeypot-Funktion. Captcha will ich keines, die sind nur lästig und liegen zum Teil ja auch wieder auf externen Servern.

Auf einer Website, die ich vor 15 Jahren gestaltet habe, hab ich folgendes Formular verwendet und (natürlich) Spam ohne Ende bekommen. (Namen rausgelöscht, die Seite existiert nicht mehr).

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kontakt</title>


<link rel="stylesheet" href="../templates/style.css" type="text/css">
<!--[if gte IE 6]>
<style type="text/css">
span.space {
  height:0px;
}

div.kaiserin {
 float:left;
 margin-top:13px;
}
</style>
<![endif]-->

<style type="text/css">
span.space {
  height:10px;
}

div.kaiserin {
 float:left;
 margin-top:20px;
}
</style>

<style type="text/css">
p.anfrage {
  font-family:verdana;
  font-size:12px;
  color:#606060;
  margin-top:0px;
  margin-bottom:0px;
}

input, textarea, select {
  font-family:verdana;
  font-size:12px;
  color:#606060;
  border:1px solid #999999;
  background-color:#FFFFFF;
  overflow:auto;
}

input.send, input.reset
{
  font-family:verdana;
  font-size:12px;
  color:#606060;
  border:1px solid #999999;
  background-color:#FFFFFF;
}
</style>

<script src="../templates/hover.js" language="javascript"></script>
</head>

<body>

<?php

### Konfiguration ###
#Programmierung CM24
# Bitte Stellen Sie das script Ihren Bedürfnissen ein!

# An welche Adresse sollen die Mails gesendet werden?
$strEmpfaenger = 'anfrage@...';

# Welche Adresse soll als Absender angegeben werden?
# (Manche Hoster lassen diese Angabe vor dem Versenden der Mail ueberschreiben)
$strFrom       = '"Ferienwohnungen xxx" <noreply@...>';

# Welchen Betreff sollen die Mails erhalten?
$strSubject    = 'Anfrage';

# Zu welcher Seite soll als "Danke-Seite" weitergeleitet werden?
# Wichtig: Sie muessen hier eine gueltige HTTP-Adresse angeben!
$strReturnhtml = '.../anfrage_gesendet.htm';

# Welche(s) Zeichen soll(en) zwischen dem Feldnamen und dem angegebenen Wert stehen?
$strDelimiter  = ": ";

### Ende Konfiguration ###

if($_POST)
{
 $strMailtext = "";

 while(list($strName,$value) = each($_POST))
 {
  if(is_array($value))
  {
   foreach($value as $value_array)
   {
    $strMailtext .= $strName.$strDelimiter.$value_array."\n";
   }
  }
  else
  {
   $strMailtext .= $strName.$strDelimiter.$value."\n";
  }
 }

 if(get_magic_quotes_gpc())
 {
  $strMailtext = stripslashes($strMailtext);
 }

 mail($strEmpfaenger, $strSubject, $strMailtext, "From: ".$strFrom)
  or die("Die Mail konnte nicht versendet werden.");
 header("Location: $strReturnhtml");
 exit;
}

?>

<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr>
        <td height="100%" width="100%" valign="middle" align="center">
            <table cellpadding="0" cellspacing="0" width="722" style="border:1px solid #000000; background-color:#FFFFFF;">
                <tr>
                    <td height="163"><a href="home.htm"><img src="../images/header_panorama_schrift.jpg" height="162" width="748" style="border-bottom:1px solid #000000;" alt="Home"></a></td>
                </tr>
                <tr>
                    <td height="27">
                    <a href="ausstattung.htm" onMouseOver="swap('imgLink1','Link1on')" onMouseOut="swap('imgLink1','Link1')"><img name="imgLink1" src="images/button_ausstattung.jpg" height="27" width="167" alt="Ausstattung"></a><a href="preise.htm" onMouseOver="swap('imgLink2','Link2on')" onMouseOut="swap('imgLink2','Link2')"><img name="imgLink2" src="images/button_preise.jpg" height="27" width="105" alt="Preise"></a><img src="images/button_anfrage_hover.jpg" height="27" width="121" alt="Anfrage"><a href="anreise.htm" onMouseOver="swap('imgLink4','Link4on')" onMouseOut="swap('imgLink4','Link4')"><img name="imgLink4" src="images/button_anreise.jpg" height="27" width="115" alt="Anreise"></a><a href="links.htm" onMouseOver="swap('imgLink5','Link5on')" onMouseOut="swap('imgLink5','Link5')"><img name="imgLink5" src="images/button_links.jpg" height="27" width="95" alt="Links"></a><a href="impressum.htm" onMouseOver="swap('imgLink6','Link6on')" onMouseOut="swap('imgLink6','Link6')"><img name="imgLink6" src="images/button_impressum.jpg" height="27" width="145" alt="Impressum"></a>
                    </td>
                </tr>
                <tr>
                    <td height="410" valign="top"><div class="scroll"><div class="kaiserin">
                    <!-- <p class="text01">
                            Dieses Formular funktioniert im Moment leider nicht.<br>
                            Bitte senden Sie ein E-Mail an anfrage (at) ferienwohnungen-perterer.at<br>
                            <br>
                    </p> -->



<form id="form1" method="post" action="<?php print $_SERVER['PHP_SELF']; ?>">
<table border="0" cellpadding="3" cellspacing="0" align="left">
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Name:&nbsp;</p>
  </td>
  <td>
      <input name="name" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Stra&szlig;e:&nbsp;</p>
  </td>
  <td>
      <input name="strasse" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">PLZ:&nbsp;</p>
  </td>
  <td>
      <input name="plz" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Ort:&nbsp;</p>
  </td>
  <td>
      <input name="ort" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Land:&nbsp;</p>
  </td>
  <td>
      <input name="land" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">E-Mail:&nbsp;</p>
  </td>
  <td>
      <input name="email" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Telefon:&nbsp;</p>
  </td>
  <td>
      <input name="tel" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Ferienwohnung:&nbsp;</p>
  </td>
  <td>
    <select name = "fewo">
        <option value="Ferienwohnung I" >Ferienwohnung I</option>
        <option value="Ferienwohnung II" >Ferienwohnung II</option>
    </select>
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Anreise:&nbsp;</p>
  </td>
  <td>
      <input name="anreise" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Abreise:&nbsp;</p>
  </td>
  <td>
      <input name="abreise" value="" size="30">
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Personen:&nbsp;</p>
  </td>
  <td>
    <select name = "personen">
        <option value="2" >2</option>
        <option value="3" >3</option>
        <option value="4" >4</option>
        <option value="5" >5</option>
        <option value="6" >6</option>
    </select>
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">&nbsp;</p>
  </td>
  <td>
  <p class="anfrage">
      Davon sind <input name="erwachsene" value="" size="1"> Erwachsene und <input name="kinder" value="" size="1"> Kinder im Alter von <input name="kinder_alter" value="" size="15"> Jahren.
  </p>
  </td>
</tr>
<tr>
  <td width="125" valign="top">
  <p class="anfrage">Sonstiges:&nbsp;</p>
  </td>
  <td>
      <textarea name="sonstiges" rows="6" cols="54" wrap="soft"></textarea>
  </td>
</tr>
<tr>
  <td width="125" valign="top">&nbsp;</td>
  <td>
   <input class="send" type="submit" value="Senden">&nbsp;
   <input class="reset" type="reset" value="L&ouml;schen">
  </td>
</tr>
</table>
</form>
                    </div></div></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Ich krieg hier einen Umleitungsfehler, kein 404-Dokument: Die aufgerufene Website leitet die Anfrage so um, dass sie nie beendet werden kann.

Aus eben genau diesem Grund.

Ich würd den Pfad absolut angeben und im localhost die index.html explizit aufrufen.