Gunnar Bittersmann: Grundlagenforschung

Beitrag lesen

SELF-Forum

Grundlagenforschung

Gunnar Bittersmann Homepage des Autors
+1 Informationen zu den Bewertungsregeln

@@seufZ

ich probiere grad grundlegendes aus, siehe: http://tassilosturm.net/testseite/index.php

liege ich hiermit richtig?

Eher nicht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vergiss XHTML 1.0, verwende HTML5. Gern polyglott, d.h. in XML-Syntax.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

Die Sprache mit dem lang-Attribut (aus dem HTML-Namensraum) angeben:

<html lang="de">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Verwende UTF-8 als Zeichencodierung. Immer und überall.

Gib die Zeichencodierung als erstes an – noch vor dem title-Element.

<meta http-equiv="Content-Style-Type" content="text/css" />

Unnötig. Weg damit.

<meta http-equiv="content-language" content="de"/>

Unnötig. Weg damit.

<meta http-equiv="expires" content="0"/>

Deine Seiten sollen nicht gecachet werden, sondern langsam laden? Weg damit.

Was als meta-Angabe fehlt:

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

<meta name="description" content="Homepage" />

description zeigen Suchmaschinen als Kurzbeschreibung in den Suchergebnissen an. Da sollte was Sinnvolles stehen, nicht „Homepage“.

<meta name="keywords" content="Tassilo Sturm, Tassilo, Sturm, Waldfrieden, Wald-Frieden, …" />

Damit beeindruckst du wohl niemanden – schon gar nicht eine Suchmaschine. Kann IMHO weg.

<style type="text/css">@import url(css/waldfrieden-main2.css);</style>

Nein. Verwende nicht <style>/@import, sondern das link-Element zum Einbinden von Stylesheets:

<link rel="stylesheet" href="css/waldfrieden-main2.css"/>

.clearfix { *zoom: 1; }

Wen willst du damit beeindrucken? IE 6? Weg damit.

<div class="clearfix">

Zusätzliche Elemente nur zum Stylen? Nein. Weg damit.

Clearfix brauchst du hier auch nicht.

<div class="left_links">

Benenne Klassen nicht nach der (gegenwärtig!) gewünschten Darstellung. Wenn die Boxen übereinander stehen, macht „links“ keinen Sinn.

Zum Identifieren von einzigartigen Elementen sind IDs da, nicht Klassen. (Zum Stylen dieser dann ID-Selektoren.)

Möglicherweise sind andere Elemente als div angebracht.

<div class="left_rechts">

Dito. Und was soll „left_rechts“ bedeuten?

<img src="fotos/erdbeerteller_web.jpg" alt="Erdbeerteller">

In XHTML (XML-Syntax) ist das falsch, weil img-Element nicht geschlossen. Aber das nur nebenbei.

Nun zu deiner Frage:

wo muss man min-width oder ähnliches anwenden?

Im media query. Damit plazierst du erst ab einer Mindestbreite des Viewports (mobile first) die Boxen nebeneinander:

@media (min-width: 42em)
{
  .left_links, .left_rechts
  {
    width: 50%;
    float: left;
  }
}

Zu den Klassenbezeichnern und Klassen überhaupt siehe oben.

Anstatt float wäre Flexbox sinnvoll anzuwenden. (Dortiges Beispiel)

LLAP 🖖

--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
Beitrag melden
+1
Informationen zu den Bewertungsregeln