• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grundlagenforschung

  • Ersteller Ersteller einsiedlerX
  • Erstellt am Erstellt am
E

einsiedlerX

Guest
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?



HTML: 
~~~html
<!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.
 
Hallo

wenn das Fenster schmaler geschoben wird rutschen die div zwar übereinander, werden jedoch nicht bereiter - das ist weder variabel noch kann das als funktionierend betrachtet werden. Du solltest zunächst die Grundlagen für aktuelles HTML / CSS lernen. Veraltete Lösungen zu suchen bringt dich nicht weiter.

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

XHTML wurde bereits 2006 offiziell zu Grabe getragen. Für neue Seiten sollte nur noch HTML5 verwendet werden.

Code: 
<style>

So kann der Tag nur in HTML5 verwendet werden. Wenn du XHTML benutzen willst musst du dich auch an dessen "Grammatik" halten.

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

Benutze nur noch UTF-8 und schreibe die Anweisung als erste Zeile hinter das head-Tag.

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

Hier gehören ein, zwei kurze Sätze rein, die die Seite beschreiben.

Code: 
<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" />

Keywords interessieren heutzutage keine Suchmaschine und die User sehen sie nicht - weglassen.

Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<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" />

Ist alles sinnfrei und kann weggelassen werden.

Code: 
<head>

Der schließende Tag dazu steht an falscher Stelle. Er gehört direkt vor den body-Tag.

Code: 
<div class="left_links">

Container sollten nie nach ihrer Position benannt werden, sondern nach ihrem Inhalt oder ihrer Funktion. Im Zuge der Trennung von HTML und CSS geht die Tendenz zudem dahin, auf Id und class soweit möglich zu verzichten.

Code: 
<div class="left_links">Lorem ipsum ...

Text sollte nie direkt in Containern wie header, main, footer, aside, article, div u.s.w. stehen sondern nur in den dafür vorgesehenen Elementen wie p, h1 bis h6, li, dt, dd, th, td u.s.w.

Code: 
<div>

Steige auf HTML5 um und benutze dann geeignetere Container wie main, header, footer, article u.s.w.

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

Das entspricht nicht der XHTML-Syntax.

Code: 
.clearfix {
*zoom: 1;
}

Veraltet (damals für den IE6) - streichen.

Code: 
img {
width: 100%;
...}

Grafiken sollten nie über ihre natürliche Größe angezeigt werden. Zu den Grundlagen gehört es Grafiken vor der Veröffentlichung auf ihre maximale Größe zu beschneiden und ihren Speicherplatz zu minimieren. Per CSS sollten sie dann nur noch verkleinert werden, also besser max-width verwenden.

Das alles nur mal so zum Einstieg.

Gruss

MrMurphy
 
Danke Dir für Deine Tipps!

Okay, dann gehts hier weiter: http://www.tassilo.sturm.serverma.de/testseite2/index_testseite2.php

Ist diese "Variante!" besser? Zumindest scheint sie "flexibler" zu sein (Grössenverhältnisse u.a.!)

HTML: 
<!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 T. (aus Münster)
 
HTML: 
<!DOCTYPE html>
Reicht als Doctype für HTML 5.

HTML: 
<style type="text/css">@import url(css/waldfrieden-main2.css);</style>
HTML: 
<link rel="stylesheet" type="text/css" href="waldfrieden-main2.css">




HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML: 
<meta charset="UTF-8">
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben