Beiträge von nextuser

Oha, du wirfst ja absolute Position, float und flex zusammen. Das ist echt nicht toll. Vor allem float sollte Vergangenheit sein!

Auch brauchst du Standardwerte nicht angeben (z.B. "position: relativ" ohne absoluten Child oder "flex-direction: row").

Alles in allem müsstest du noch etwas mehr an den Grundlagen pfeilen, dann erkennst du auch, das einige Sachen in deinem CSS nicht so passend/nötig sind.

Das obere Bild ist also in voller Größe, die anderen beiden Bilder sollen nur Ausschnitte so groß wie das Elternelement sein?

Dein Layout könnte z.B. so aussehen: Codepen...

Ist gut, wenn man sich da selber so reinfuchst. Bleibt echt im Kopf.

Zu den Klassen: Ich persönlich nutze Klassen / ID's nur bei notwendigen Sachen für CSS oder Javascript zum Ansprechen.

HTML-Code halte ich immer gerne möglichst schlank.

Zitat von codelegend27

Und weil das jemand gesagt hat nein ich habe das nicht aus dem internet zusammenkopiert

War das zufällig auf mich gemünzt

Zitat von codelegend27

habe zwar gelesen es geht einfach über divs und man classifiziert sie dann zb in main aber wollte es halt nahe dem standard ausführen

Gehn tut vieles. Man kann es auch komplett in div's machen.

Die Tags wie "main, article, section, header,ect..." sind ja nicht nur als "Ersatz" eingeführt worden. Sie tragen grundlegendes zur Struktur einer Seite bei und werden von den Suchmaschinen entsprechend interpretiert.

Dein Code sieht schon recht gut aus.

Meine Verbesserungsvorschläge wären:

• Ich würde nicht 3 Stylesheets verwenden. Header & Footer sind sicherlich nicht so groß, das man dafür eine eigene CSS braucht. Auch sind die Anfragen zum Server dann unnötig mit 2 weiteren Stylesheets behaftet.
• Aus deinem Header
  Code

  <header>
          <div class="header">
              <img src="img/logo.png" class="logo" alt="LOGO">
              <h1 class="h1h">
                  author
              </h1>
  
          </div>
          <div class="nav">
              <ul>
  
                  <li><a href="contact.html">Contact</a></li>
                  <li><a href="about.html">About me</a></li>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="index.html">Home</a></li>
  
  
  
              </ul>
          </div>
      </header>

  Alles anzeigen

  würde ich das machen

  Code

  <header>
      <div>
          <img src="img/logo.png" id="logo" alt="LOGO">
          <h1>author</h1>
      </div>
      <nav>
          <ul>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="about.html">About me</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="index.html">Home</a></li>
          </ul>
      </nav>
  </header>

  Alles anzeigen
• Änderungen:
  • Nicht überall ne Klasse einsetzen. Stylen kann man bei so kleinen Abschnitten wunderbar ohne!
  • Beim Logo eine ID anstatt einer Klasse verwenden. Brauchst es ja nicht mehrmals.
  • Nav-Tags sind ja für ne Navigation gedacht. Also nutzen wir sie doch auch mal
  • Stylen kannst du die Sachen im CSS wunderbar ohne Klassen z.B. mit "header>div" und "header>nav".
• Aus deinem Haupt-Container
  Code

  <div class="mainwrapper">
          <main>
              <div class="container">
                  <table class="banane">
                      <tr>
                          <h1>
                              This is my first <br>website :D
                          </h1>
                      </tr>
  
                      <tr>
  
                          <!-- Articles -->
  
                          <article>
                              <div class="articlebig">
                                  <a href="http://www.samsung.at"><img src="img/Phone.png" class="imgbigarticle"
                                          alt="Artikelbild"></a>
  
                                  <h2>
                                      Samsung Galaxy S11/S20 Plus video leaks showing phone in real life!
                                  </h2>
                              </div>
                      </tr>
  
                      <tr>
  
  
                          <td class="saleft">
  
                              <a href="http://www.polizei.at"><img src="img/Debit_card_ATM.jpg" class="imgsmallarticle"
                                      alt="Artikelbild"></a>
                              <h2>
                                  Police are investigating three ATM explosions in two Floria counties
                              </h2>
  
  
                          <td class="saright">
  
                              <a href="http://www.bolt.eu"><img src="img/Taxify-Scooters.jpg" class="imgsmallarticle"
                                      alt="Artikelbild"></a>
                              <h2>
                                  E-Scooter firm Bolt pulls out of 12 cities
                              </h2>
                          </td>
  
                      </tr>
  
  
                  </table>
              </div>
              </article>
      </div>
      </main>
      </div>

  Alles anzeigen
  würde ich
  Code

  <main>
      <!-- Die Banane ??? -->
      <section>
          <h1>This is my first Website :D</h1>
          <article>
              <header>
                  <a href="http://www.samsung.at"><img src="img/Phone.png" class="imgbigarticle" alt="Artikelbild"></a>
                  <h2>Samsung Galaxy S11/S20 Plus video leaks showing phone in real life!</h2>
              </header>
              <!-- HIER DANN DER INHALT ...-->
          </article>
          <article>
              <header>
                  <a href="http://www.polizei.at"><img src="img/Debit_card_ATM.jpg" class="imgsmallarticle" alt="Artikelbild"></a>
                  <h2>Police are investigating three ATM explosions in two Floria counties</h2>
              </header>
              <!-- HIER DANN DER INHALT ...-->
          </article>
          <article>
              <header>
                  <a href="http://www.bolt.eu"><img src="img/Taxify-Scooters.jpg" class="imgsmallarticle" alt="Artikelbild"></a>
                  <h2>E-Scooter firm Bolt pulls out of 12 cities</h2>
              </header>
              <!-- HIER DANN DER INHALT ...-->
          </article>
      </section>
  </main>

  Alles anzeigen
  machen
• Änderungen:
  • Die beiden div's vor & nach "main" brauchst du nicht.
  • Den table-Tag würde ich heutzutage auch wirklich nur noch für Tabellen nutzen, nicht zum "designen". Daher hier "section" gewählt.
  • Da du in der "Tabelle" mit articel arbeitest (btw. den article-Tag öffnest du IN der Tabelle, schließt ihn aber NACH ihr) und auch der restliche Inhalt auf mich bischen entsprechend wirkt, habe ich da mal mit article gearbeitet.
  • Den Bild-Link und die Überschrift jedes article-Abschnitts habe ich in header-Tags umschlossen.
• So, das mal ebend von mir...

Zitat von Lothar

Browser & Betriebssystem: Firefox, Windows 7

Firefox & Windows 7...

Joooo, ein gleichgesinnter

Zum Thema, wie basti schrieb, ein simples "border-bottom" tuts schon. Wobei "separate" für "border-collapse" auch schön sein kann...

Habs jetzt mal grad getestet und es läuft:

BeispielHTML

<!Doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="frame.css"/>
        <script src="iframeResizer.min.js"></script>
        <script src="iframetest.js"></script>
    </head>
    <body>
        <header></header>
        <h1>DIE BUCHUNGSMASCHINE</h1>
        <iframe id="myIframe" src="https://ibe.traffics.de/1100001280000000/pauschalreise/regionen?minCategory=3&amp;sortBy=quality&amp;sortDir=up&amp;searchDate=200520,030620,7&amp;adults=2&amp;minBoardType=OV/" scrolling="no"></iframe>
    </body>
</html>

iframetest.js

window.onload = function()
{
    var myIframe = document.getElementById("myIframe");

    iFrameResize(
    {
        onResized: function(messageData)
        {
            myIframe.style.height = messageData.height;
        }
    }, myIframe);
}

Im Quellcode arbeitet die Seite mit dem iFrame-Resizer.

Das ist auch deine Schnittstelle, um das umsetzen zu können.

Du musst also damit arbeiten.

Wenn man keine nutzt, ist auch kein Hinweis notwendig.

Hier mal kurz vom verlinkten Urteil:

Zitat

Website-Betreiber sind laut DSGVO verpflichtet, Nutzer darüber aufzuklären, wenn ihre Seite Cookies nutzt, welche Daten diese speichern – und inwieweit sie an Dritte weitergeleitet werden.

Ich hoffe nur, da werden keine Hobbylosen Rechtsanwälte erfinderisch, mahnen Webseiten ohne Hinweis ab ohne zu ermitteln, ob da auch wirklich keine Cookies genutzt werden, und fordern vom Betreiber dann "Beweise".

Wie sollte man das auch beweisen können?

Übrigens finde ich es persönlich immer besser, einen Hinweis zusammen mit einer kurzen Erklärung, welche Daten für was genutzt werden zu versehen. Leider machen die meisten aber nur diesen Standardsatz.

Typisch Mensch, immer nur das Minimum. Echte Transparenz sieht man selten.

Wird zwar meist in den Datenschutzhinweisen erwähnt, aber da schaut der Durchschnittsbesucher nun wirklich nicht unbedingt rein.

Gibt es eigentlich noch andere Leute wie mich, die sowas alles selber machen würden?

Ist ja echt nicht's großes und selbstgemacht ist einfach besser, finde ich.

Ok klar, als Neuling vielleicht nicht. Doch fertigen Code zu nehmen lässt aber oft auch das Verständnis auf der Strecke.

PS: Sorry ihr beiden. Wollte jetzt nich OffTopic gehen. Hat mich grad dazu einfach interessiert.

Mit "gesamt" meine ich auch ebend die gesamte Webseite. Schließlich bist du ja verpflichtet, deine Besucher darüber zu informieren, auch wenn

sie nicht über die Startseite kommen.

Ich hoffe nur, du bist keiner von denen die "Alle akzeptieren" fett als Button haben, darunter dann ein kleiner, grauer Link mit "Auswahl speichern".

Wenn dann noch auswählbare Einstellungen bereits mit Häckchen oder so vorausgewählt sind, ist es laut dem Urteil (siehe Link) bereits Gesetzeswidrich.

Also damit lieber schön offen die Besucher informieren, nicht nur "wir benutzen Cookies".

Die Größe spielt dabei keine Rolle. Muss halt nur gut sichtbar/lesbar sein.

Das muss denke ich schon auf der gesamten Seite sein.

Manche kommen sicherlich auch über Suchmaschinen auf eine andere als die Startseite.

Pflicht besteht denke ich nur zu Informieren, das der Besucher bei der weiteren Nutzung der Seite automatisch einverstanden ist.

Sehe kaum Seiten, wo man beim Cookie-Hinweis "Nein" wählen kann.

EDIT: Ist auch gut.

Und wieso muss AlbertoWhitlow den Thread ausgraben und seinen Link posten?

Leute das muss doch echt nicht sein!

Werden solche Beiträge eigentlich nicht gelöscht?

Sind schon ein paar alte Threads ausgegraben worden....

Reden wir hier von der Lightbox-Bildergallery (Lightbox Script)?

Müsste es dann nicht "data-lightbox" & "data-title" sein?

Soweit ich weis sind "height"-Angaben im iframe selbst nur als CSS-Pixel erlaubt.

Und den resizer finde ich echt übertrieben. Alle 32ms anpassen ist echt blödsinn, als würde sich die Anzeige ständig von den Abmessungen ändern.

Dein eigentliches Problem ist ja Cross-Domain.

Bei "lokalen" iFrames könnte man bequem sowas wie

document.getElementByID("iframeID").contentWindow.document.body.offsetHeight()

zur ermittlung der richtigen Höhe nutzen. Bei fremden Domains ist das nicht so einfach möglich.

Eine andere Möglichkeit wäre z.B. das.

Du kannst der navi auch einfach ein "flex-shrink: 0" geben.

Du kannst auch bei "content" einfach "width:100%" anstatt "flex-grow" nutzen, klappt auch.

Dein Code ist etwas überfüllt. Du brauchst viele Klassen garnicht. Und da wo es sinvoll ist, würde ich keine Klasse, sondern eine ID nutzen. Erst recht keine Klasse, die ich dann mehrmals nutze, obwohl die vom CSS überhaupt nicht gleich genutzt werden.

Auch würde ich so Tags wie "nav" und "aside" verwenden.

Und Text bitte nicht einfach so ins div packen. Dann schon lieber strukturiert in p-Tags.

Und im Footer eine h1? Also ich persöhnlich find das nicht so passend.

Hast du mit dem Plugin das Ding jetzt einfach füllend gezogen und dann diese Höhe festgesetzt? Hättest auch selbst einfach die Pixel angeben können.

Die Suchroboter sind doch nicht von Steinzeit wo sie nur statischen Content wahrnehmen können...

Schatz, bin Schwanger!

... Ne weitere Zeile im Testament...

Zitat von tino

as hat sich eben so ergeben und ich habe für die mobile version viel weniger effekte, mouseovers gefallen mir dort nicht, andere thumbnails, etc....

Wie du willst. Aber diese Dinge könnte man echt auch mit nur einer Seite in den Griff bekommen.

Ich verstehe aber nicht, warum wir über 2 verschiedene Seiten reden. Du hast doch nur eine index, in die du dann entsprechenden Inhalt der anderen nachlädst, oder nicht.

Das meinte ich ja mit den vielen Verschachtelungen. Dem direkten Elternelement "height:100%" zu geben bringt

nicht viel, wenn deren Elternelement nicht auch 100% Höhe hat.

Musst also bei der "Wurzel" anfangen.

Vielleicht nutzt du dabei die Gelegenheit und machst deinen Code ein wenig kompakter...