Grundlagenforschung
seufZ
- design/layout
Hallo @ all,
ich probiere grad grundlegendes aus, siehe: http://tassilosturm.net/testseite/index.php
liege ich hiermit richtig? anscheinend funktioniert das ganze und ist variabel!
doch ist es möglich der rechten und der linken box eine mindest grösse zuzuweisen sobald man dien viewport verkleinert.
meine ideen mit min-width funktionieren nicht, also meine frage:
wo muss man min-width oder ähnliches anwenden?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>waldfrieden - tassilo sturm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="de"/>
<meta http-equiv="expires" content="0"/>
<meta name="robots" content="index, follow"/>
<meta name="Author" content="Tassilo Sturm" />
<meta name="description" content="Homepage" />
<meta name="keywords" content="Tassilo Sturm, Tassilo, Sturm, Waldfrieden, Wald-Frieden, der bau, Kunstakademie Muenster, Muenster, Rauminstallation, Video, Architektur, Eremitage, Einsiedler, Einsiedlerzellen, Nomadisierende Zellen, Kunst, Kuenstler, Skulptur, Objekte, Heimat, Heimweg, Nomade, Glueck, glueckssuche, findet mich das Gueck, findetmichdasglueck" />
<style type="text/css">@import url(css/waldfrieden-main2.css);</style>
</head>
<style>
img {
width: 100%;
height: auto;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.left_links {
float: left;
width: 40%;
border: red 3px dotted;
}
.left_rechts {
float: left;
width: 53%;
border: red 3px dotted;
}
.textblock {
min-width: 35%;
border: yellow 3px dotted;
}
</style>
<body>
<div class="clearfix">
<div class="left_links">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</div>
<div class="left_rechts">
<img src="fotos/erdbeerteller_web.jpg" alt="Erdbeerteller">
<div class="textblock">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</div>
</div>
</div>
</body>
</html>
grüsse t.
doch ist es möglich der rechten und der linken box eine mindest grösse zuzuweisen sobald man dien viewport verkleinert.
meine ideen mit min-width funktionieren nicht, also meine frage:
wo muss man min-width oder ähnliches anwenden?
Moing,
Du hast einen Logikfehler in Deinen Angaben (ist mir auch erst auf den zweiten Blick ins Auge gestochen) :-) Eine Mindestbreite von 30% wird sich ja immer an die Breite des Viewport anpassen und eben immer 30% davon einnehmen. Mit einer Mindestbreitenangabe in px oder anderen nicht-prozentualen Maßangaben funktioniert einwandfrei.
Schönen Tag.
@@SEBER-RIDER
Mit einer Mindestbreitenangabe in px oder anderen nicht-prozentualen Maßangaben funktioniert einwandfrei.
Zweifaches Nein.
Für Boxen möchte man i.A. keine Mindestbreite angeben; sie sollen ja nicht seitlich aus dem Viewport herausragen und horizontales Scrollen erzwingen.
Man möchte für Boxen u.U. eine Maximalbreite angeben, damit Textzeilen nicht zu lang und damit schlecht lesbar werden.
Beim Seiten layout sollte man tunlichst vergessen, dass es soetwas wie Pixel gibt. Zur Angabe der Breite von Boxen ist % genau richtig.
LLAP 🖖
@@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 🖖
Okay , okay ,
vieles von dem sehe ich ein!!! :o)
Ich habe mich nochmal herangesetzt und Frage nun direkt: Ist dies hier besser?
Zumindest scheinen diemal, im unterschiedlich grossen Viewport, alle Angaben korrekt dargestellt zu werden, beim vergrössern und verkleinern / bei unterschiedlichen Monitorgrössen etc....
Liege ich hier "richtiger"?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Waldfrieden - Tassilo Sturm</title>
<style type="text/css">@import url(css/waldfrieden-main2.css);</style>
<style type="text/css">
img {
width: 100%;
height: auto;
}
body {
margin: 20px;
padding: 0;
}
#wrapper {
margin: 0;
min-width: 980px;
max-width: 1800px;
background: white;
border: yellow 3px dotted;
}
#header {
float: left;
background: orange;
width:100%;
margin: 0 0 2.08333333% 0; /* */
border: grey 3px dotted;
}
#article {
float: left;
width: 41.5%; /* */
border: green 3px dotted;
}
.info {
background:yellow;
padding: 5%; /* */
margin: 3.8% 0; /* */
}
#aside {
float: right;
width: 53%; /* */
background: #FC0;
padding: 2.08333333%; /* */
border: red 3px dotted;
}
#footer {
clear: both;
padding: 0.4%; /* */
background: orange;
}
.textblock {
min-width: 35%;
border: yellow 3px dotted;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="article">
<h1> Testseite 2 </h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="info"> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="aside">
<img src="fotos/erdbeerteller_web.jpg" alt="Erdbeerteller"/>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat </p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Grüsse aus Münster T.
Hallo seufZ,
Liege ich hier "richtiger"?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
immer noch kein HTML5
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Dann reicht <meta charset="utf-8">
<style type="text/css">@import url(css/waldfrieden-main2.css);</style>
nicht @import sondern link
<style type="text/css">
<style>
reicht
<div id="wrapper">
html und body sind schon zwei wrapper.
Mithilfe des main-Elements sollte man den Hauptinhalt auszeichnen.
<div id="article">
Es gibt das article-Element, möglicherweise möchtest du mehrere article auf deiner Seite haben. Das spräche gegen die ID.
<div id="aside">
Es gibt das aside-Element, möglicherweise möchtest du derer mehrere haben …
Bis demnächst
Matthias
Hallo,
html und body sind schon zwei wrapper.
das von Gunnar verlinkte Beispiel enthält dieses Wrapper Div ;-)
Gruß
Fred
Lieber Gunnar,
Die Sprache mit dem
lang
-Attribut (aus dem HTML-Namensraum) angeben:<html lang="de">
genau, dann ist nämlich das hier bereits erledigt:
<meta http-equiv="content-language" content="de"/>
Unnötig. Weg damit.
Du sagst es (wieder einmal).
Liebe Grüße,
Felix Riesterer.
@@Felix Riesterer
Die Sprache mit dem
lang
-Attribut (aus dem HTML-Namensraum) angeben:<html lang="de">
genau, dann ist nämlich das hier bereits erledigt:
<meta http-equiv="content-language" content="de"/>
Nei-en! Das ist was anderes.
Unnötig. Weg damit.
Du sagst es (wieder einmal).
Aber nicht ganz treffend. Nich nur unnötig, sondern nicht normgerecht. Also weg damit.
LLAP 🖖