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

Liquid Layout

Y

Yurek

Neues Mitglied
Hi,

komm bei einer Aufgabe nicht weiter bitte um Hilfe:

Aufgabe:

Bildschirmfoto 2015-11-09 um 18.55.00.png
Also erst einmal hab ich wirklich lange gebraucht was mit Liquid und Frozen gemeint ist zu verstehen ist. Hatten da leider zu wenig Infos. Bitte korrigiert mich wenn ich falsch liege.

Liquid: Das Layout passt sich nach der Auflösung und Fenstergröße immer an, so dass alles immer noch schön sichtbar bleibt egal auf welchem Gerät oder Monitor, die Blöcke werden werden mit den Tags mit % Angaben im width und float left/right in CSS gestaltet.

Frozen: Alle Elemente werden mit einer absolute position mit top, left usw. an die richtigen stellen gebracht und das ganze bleibt dann auch immer so egal welche Auflösung oder Fenstergröße.

Also mal so grob erklärt.

Das mit Frozen kann ich schon das ist ja nicht besonders schwer. Aber bei dem Liquid tu ich mich noch schwer. Hab mal zum besseren Verständnis für mich erstmal was mit kleinen Boxen erstellt. Inhalt würde ich dann später einfügen. Was mir bisher wirklich Probleme bereitet ist die adress Box. imagebar und pro contra ging ja einfach mit float left und right. Die adressbox hab ich so gelassen, damit sie in der Mitte der beiden erscheint. Aber sie überlappt immer die anderen beiden und da weiß ich nicht was ich mit der anstellen soll:

Bildschirmfoto 2015-11-09 um 19.07.19.png



Hier der Code:

HTML: 
<!Doctype hml>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Layout</title>
    </head>
  
    <body>
      
        <div id="header">header</div>
      
        <div id="image">imgbox</div>
        <div id="pro_contra">pro<p>contra</p></div>
        <div id="address">adress</div>
      
        <div id="content">content</div>
      
        <div id="underline"></div>
        <div id="footer">footer</div>
      

    </body>

</html>

HTML: 
#header{
    background: silver;
    margin-top: 5px;
    margin-bottom: 5px;
  
}

#image{
    border: 3px solid blue;
    float:left;
    width: 40%;
    margin-right: 5px;
  
}

#address{
    border: 3px solid red;
  

}



#pro_contra{
    border: 3px solid green;
    float: right;
    width: 30%;
    margin-left: 5px;
}

#content{
    border: 3px solid yellow;
    width: 66%;
    margin-top: 5px;
    margin-right: 5px;
}

#underline{
    background: black;
    height: 2px;
    margin-top: 40px;
    margin-bottom: 5px;
    clear:both;
}

#footer{
    background: silver;
    clear: both;
    width: 40%;
    margin-top: 5px;
    margin-bottom: 5px;
  
}

Danke schon einmal für die Hilfe!
 
Versuchs mal mit
HTML: 
<meta name="viewport" content="width=device width">
. Das ist der Grundstein eines jeden responsiven (oder liquidem) Designs. Dazu kannst du media queries verwenden, um das CSS an bestimmte Displaygrößen anzupassen.
 
tja so is das wenn man zu schnell schreibt:oops: so weit ich weiß geht es aber auch ohne initial scale und user scrollable oder?
 
So würde die HTML-Struktur für ein gefloatetes Layout aussehen

HTML: 
<header>
  <h1>Name des Hotels</h1>
</header>

<main>
  <figure></figure>
  <address></address>
  <article></article>
</main

<aside>
  <ul> ...</ul>
  <ul> ...</ul>
</aside>

<footer></footer>
 
Hallo,

ich verstehe die Aufgabenstellung folgendermaßen:

Für alle Container soll "position: relative;" verwendet werden, unabhängig ob das Liquid Layout oder das Frozen Layout erstellt wird. "position: absolute;" soll grade nicht verwendet werden. Da die Vorgabe der Browser "position: static;" ist muss "position: relative" per CSS vergeben werden. (Eventuell ist der Aufgabensteller der Ansicht gewesen, das "position: relative;" die Vorgabe der Browser ist, dem ist aber nicht so.)

Das Liquid Layout entspricht dem Flexiblen Layout, aber nicht dem Responsive Layout. Entsprechend sollen sich die Elemente nicht verschieben, sondern bei einer Veränderung der Fenstergröße "nur" proportional ihre Breite und Höhe anpassen. Dafür spricht auch die Vorgabe des Wireframes, also des Drahtgittermodells. Dadurch werden die Proportionen ja vorgegeben.

Das Frozen Layout entspricht dem Fixed Layout. Dabei soll das umgebende div 1000px breit werden, die zugehörige Höhe soll berechnet und wohl auch in Pixel festgelegt werden.

Unter Strukturelementen verstehe ich die neuen HTML5-Elemente wie header, footer, main, article, section, aside.

Ein Hintergrundgitter rundet das positive Ergebnis dann ab.

So würde ich die Aufgabe angehen. Wenn dem so ist sollte das Erstellen der Seite mehr oder weniger eine Fleißaufgabe sein.

Liquid: Das Layout passt sich nach der Auflösung und Fenstergröße immer an, so dass alles immer noch schön sichtbar bleibt
Zum Vergrößern anklicken....

Nicht ganz. Die Höhe soll sich der Fensterbreite anpassen. Wenn die Seite höher als die Fensterhöhe ist kann durchaus gescrollt werden, das ist ja das übliche Verhalten. An keiner Stelle der Aufgabe wird gefordert, dass die Seite immer komplett sichtbar sein muss. In solchen Fällen sollte vom Standardverhalten ausgegangen werden, nämlich das bei einem liquidem Layout das seitliche Srollen vermieden werden soll.

Frozen: Alle Elemente werden mit einer absolute position
Zum Vergrößern anklicken....

Das lese ich aus der Aufgabenstellung anders, absolute Positionen sind demnach nicht zulässig. Und auch nicht erforderlich. Du musst die liquide Version ja nur auf eine Breite von 1000px festnageln, der Rest muss sich korrekt anpassen wenn die liquide Version korrekt funktioniert. Deshalb soll wohl auch zuerst die liquide Version erstellt werden, für die frozen Version müssen nur noch ein, zwei CSS-Angaben angepasst werden.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Naja da steht ja:

.....Wandeln Sie die Seite anschließend in eine Frozen-Version mit der Breite 1000 Pixel um und justieren sie gegebenenfalls das Aussehen der Elemente nach.
Zum Vergrößern anklicken....

Dann gilt diese Breite von 1000 pixel nur für die Frozen-Version wohl.

Das mit der Positionierung verstehe ich dann aber die Aufgabenstellung dann wohl nicht ganz bzw. den Unterschied von Liquid und Frozen nicht. Wie kann ein Liquid und Frozen nur mit position: relative gestaltet werden? Erklärung hatten wir vll zwei Folien und die machen einen auch nicht schlauer ohne Code. Internet hat mir leider auch nicht viel gebracht.

Setze ich die adress Box jetzt relative dann verdeckt es alles andere. ich könnte es ja damit lösen, dass ich den content auslager in main und das pro_contra als aside deklariere aber dann würde die adressbox wohl immer noch die imagebox verdecken

Bildschirmfoto 2015-11-10 um 10.04.04.png
 
Zuletzt bearbeitet:
Yurek schrieb:
Was mir bisher wirklich Probleme bereitet ist die adress Box.
Zum Vergrößern anklicken....

Über so etwas habe ich auch mal lange, lange gestaunt, bis ich auf diesen Artikel traf:
http://css-technik.de/css-examples/219_9/

Guck mal auf das erste Bild. Da ist die lila Box gefloatet, aber nur der Text (Inhalt) fließt um die blaue Box, das Element selber aber nicht.

Das liegt daran, wenn ich mich nicht irre, dass gefloatete Elemente ähnlich wie absolut positionierte Elemente, aus dem Fluss heraus genommen werden, das heißt, von anderen Blockelementen ignoriert werden. Bei float Elementen wird allerdings der Inhalt antweder left oder right angeordnet, bzw. in Deinem Fall müsste der Inhalt der Adress-Box sich an der right gefloateten Box ausrichten (also nicht über oder unter ihr weiterlaufen).

Ich hoffe, das hilft Dir und falls ich mich irgendwie irren sollte, dann bitte korrigiert mich.
 
Hallo

Dann gilt diese Breite von 1000 pixel nur für die Frozen-Version wohl.
Zum Vergrößern anklicken....

Das ist richtig.

Es ist aber auch bei einem frozen- bzw. fixed- Layout schlechter Stil mit absoluten Positionen zu arbeiten. Absolute Positionen sollten nur für bestimmte (eher seltene) Lösungen verwendet werden, zum Beispiel um Text auf Bildern zu plazieren. Für das Grundlayout, um das es in der Aufgabenstellung geht, sind absolute Positionen aber grundsätzlich nicht angebracht.

Genau das soll wohl auch mit der Aufgabe geprüft werden. Es ist ein beliebter Anfängerfehler frozen- bzw. fixe Layouts mit absoluten Positionen gleichzusetzen. Ihr sollt hier zeigen, dass ihr das erkannt habt und korrekte Lösungen anwenden könnt. In dieser Aufgabe halt durchgehend mit "position: relative;" für das Grundlayout.

Wenn das zunächst geforderte liquide Layout funktioniert, muss es ja mit jeder Breite funktionieren. Also mit ... 1200px Breite, 1100px Breite, 1000px Breite, 900px Breite, 800px Breite ... und allen Zwischenbreiten. Um das frozen Layout zu erstellen sind an dem CSS für das liquide Layout nur zwei Änderungen notwendig, nämlich eine fixe Breite von 1000px und eine dazu passende fixe Höhe. An dem Rest muss nichts geändert werden, schon gar nicht müssen absolute Positionen eingeführt werden.

Gruss

MrMurphy
 
Ok ich hab da mal was hoffe das ist richtig so fürs Liquid:

HTML: 
<!Doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LayoutLiquid</title>
    </head>
   
   
   
    <body>
        <header>
            <h1>Name des Hotels</h1>
        </header>
       
        <main>
            <figure>Bild</figure>
            <address>Adress</address>
            <article>Text</article>
        </main>
       
        <aside>
            <ul>
                <li>pro</li>
                <li>pro</li>
                <li>pro</li>
            </ul>
           
            <ul>
                <li>contra</li>
                <li>contra</li>
                <li>contra</li>
            </ul>
        </aside>
       
        <footer>Fußzeile</footer>

    </body>
   
</html>

Code: 
header{
    border: 2px solid green;
    position: relative;
    width: 100%;
    margin: 2px;
}

main{
    border: 2px solid black;
    position: relative;
    margin: 2px;
    width: 55%;
    float: left;
   
}

main figure{
    border: 2px solid blue;
    position: relative;
    float: left;
    margin: 2px;
    width: 40%;
   
}

main address{
    border: 2px solid cyan;
    position: relative;
    float: right;
    width: 40%;
    margin: 2px;
   
   
}


main article{
    border: 2px solid red;
    position: relative;
    clear:both;
    margin-left: 2px;
    width: 40%;
}

aside{
    border: 2px solid orange;
    position: relative;
    float: right;
    width: 40%;
    margin: 2px;
}

footer{
    border: 2px solid darkviolet;
    position: relative;
    clear: both;
    width: 100%;
    margin: 2px;
   
}

Das ganze schaut dann so aus:

Bildschirmfoto 2015-11-10 um 11.04.27.png
 
Yurek schrieb:
Ok ich hab da mal was hoffe das ist richtig so fürs Liquid:

HTML: 
<!Doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LayoutLiquid</title>
    </head>
 
 
 
    <body>
        <header>
            <h1>Name des Hotels</h1>
        </header>
     
        <main>
            <figure>Bild</figure>
            <address>Adress</address>
            <article>Text</article>
        </main>
     
        <aside>
            <ul>
                <li>pro</li>
                <li>pro</li>
                <li>pro</li>
            </ul>
         
            <ul>
                <li>contra</li>
                <li>contra</li>
                <li>contra</li>
            </ul>
        </aside>
     
        <footer>Fußzeile</footer>

    </body>
 
</html>

Code: 
header{
    border: 2px solid green;
    position: relative;
    width: 100%;
    margin: 2px;
}

main{
    border: 2px solid black;
    position: relative;
    margin: 2px;
    width: 55%;
    float: left;
 
}

main figure{
    border: 2px solid blue;
    position: relative;
    float: left;
    margin: 2px;
    width: 40%;
 
}

main address{
    border: 2px solid cyan;
    position: relative;
    float: right;
    width: 40%;
    margin: 2px;
 
 
}


main article{
    border: 2px solid red;
    position: relative;
    clear:both;
    margin-left: 2px;
    width: 40%;
}

aside{
    border: 2px solid orange;
    position: relative;
    float: right;
    width: 40%;
    margin: 2px;
}

footer{
    border: 2px solid darkviolet;
    position: relative;
    clear: both;
    width: 100%;
    margin: 2px;
 
}

Das ganze schaut dann so aus:

Anhang anzeigen 4247
Zum Vergrößern anklicken....

Die ganzen position:relative-Angaben brauchst du wahrscheinlich alle nicht.
 
Hallo

Die ganzen position:relative-Angaben brauchst du wahrscheinlich alle nicht.
Zum Vergrößern anklicken....

Meiner Ansicht nach doch, die sind in der Aufgabe ausdrücklich gefordert. Allerdings würde ich das in einem Aufwasch erledigen:

Code: 
/*In der Aufgabe vorgegeben*/
header, main, footer, article, section, nav, aside, div {
   position: relative;
}

Ok ich hab da mal was hoffe das ist richtig so fürs Liquid:
Zum Vergrößern anklicken....

Eher nicht. Durch ein Wireframe werden die Größen (Breiten, Höhen) und Abstände der Elemente untereinander genau vorgeschrieben. Davon ist in deinem Layout nichts vorhanden. Als Folge muss sich mit der Breite auch immer die Höhe ändern.

Dein CSS muss demnach überarbeitet werden.

Dein HTML-Quellcode enthält zwar gute Ansätze, ist für die Lösung noch nicht geeignet.

Außerdem enthält er einige sachliche Fehler und Konstrukte, die vermieden werden sollten.

Zum Beispiel

Code: 
<address>Adress</address>

Das address-Element ist hier sachlich falsch. Nach den HTML-Standards darf das address-Element nur Kontaktinformationen zum Autor eines Beitrags oder einer gesamten Webseite enthalten. Nicht aber Adressen die in dem Text vorkommen.

oder

Code: 
   <main>
      <figure>Bild</figure>
      <address>Adress</address>
      <article>Text</article>
   </main>

Zum main-Element gehören auch die Bewertungen. Hier handelt es sich eher um einen Artikel. Bild, Adresse und Text gehören sachlich zusammen und sollen nur für das vorgegebene Layout einzeln erfasst werden können. Deshalb gehören sie eher in div-Elemente. Also

Code: 
<article>
   <div>
      <h2>Logo</h2>
   </div>
   <div>
      <h2>Adresse</h2>
   </div>
   <div>
      <h2>Hotelbeschreibung</h2>
   </div>
</article>

Mein HTML-Quelltext sieht - der Aufgabenstellung unterlegen - folgendermaßen aus:

Code: 
   <div>
      <header>
         <h1>Name des Hotels</h1>
      </header>
      <main>
         <article>
            <div>
               <h2>Logo</h2>
            </div>
            <div>
               <h2>Adresse</h2>
            </div>
            <div>
               <h2>Hotelbeschreibung</h2>
            </div>
         </article>
         <aside>
            <section>
               <h2>Pros</h2>
               <ul>
                  <li>Punkt 1</li>
                  <li>Punkt 2</li>
                  <li>Punkt 3</li>
               </ul>
            </section>
            <section>
               <h2>Kontras</h2>
               <ul>
                  <li>Punkt 1</li>
                  <li>Punkt 2</li>
                  <li>Punkt 3</li>
               </ul>
            </section>
         </aside>
      </main>
      <div class="hr"></div>
      <footer>
         <p>Zuletzt aktuallisiert: Datum</p>
      </footer>
   </div>

Stammen die Aufgaben eingentlich aus einem Buch, so dass man sie auch als Nicht-Student erwerben kann? Die können eine schöne Beschäftigung für lange Winterabende zu sein.

Gruss

MrMurphy
 
Hi danke ich mal mich gleich mal ran und ändere es.

Hab aber noch zwei Fragen:

Code: 
<div>
       <h2>Logo</h2>
</div>

Damit meinst du das Bild des Hotels oder? in h2?? Aufs Bild komm ich deswegen weil wir ganz am Anfang schon mal was über Hotels gemacht haben, dass soll dann die Weiterführung sein.

Eher nicht. Durch ein Wireframe werden die Größen (Breiten, Höhen) und Abstände der Elemente untereinander genau vorgeschrieben. Davon ist in deinem Layout nichts vorhanden. Als Folge muss sich mit der Breite auch immer die Höhe ändern.
Zum Vergrößern anklicken....

Werte hatten wir nicht aber die Übungen halt nur das Bild/Wireframe mit Kästchen. So wie ich das sehe wären das wohl immer nach margin-left zwei Kästchen und margin-top immer ein Kästchen. Kannst du mir das was du genau meinst vll bitte mit Code erklären tu mir da immer etwas leichter. Deutsch ist nicht so meine Sprache :).

Das sind die Übungen vom Prof. Ich gehe mal davon aus, dass er die aus einem Buch hat das war damals auch auch bei AlgoDat so. Ansonsten frag ich ihm halt mal ob ich das weitergeben darf. Ich schreib dir dann wenn ich mehr weiß.
 
Hallo

Damit meinst du das Bild des Hotels oder?
Zum Vergrößern anklicken....

Ja. Aus der Aufgabenstellung geht nicht hervor, ob es sich um ein Bild des Hotels oder dessen Logo handelt. Die Darstellung des Wireframes erscheint mir eher wie ein Logo.

Kannst du mir das was du genau meinst vll bitte mit Code erklären tu mir da immer etwas leichter.
Zum Vergrößern anklicken....

Schwierig. Da ich deinen Wissensstand nicht kenne würde das ein kleines Buch füllen und den Rahmen dieses Forums sprengen. Ich kann dir natürlich meine komplette Lösung als Quelltext zeigen und versuchen, Rückfragen zu einzelnen Anweisungen zu beantworten.

Ich habe im CSS viel mit :nth-child() gearbeitet. Die können natürlich durch class und / oder id ersetzt werden.

Erst mal das liquide Layout:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Aufgabe Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 100%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   /*Spezielle Einstellungen*/
   @media all {
      /*In der Aufgabe vorgegeben*/
      header, main, footer, article, section, nav, aside, div {
         position: relative;
      }
      body {
         height: 100%;
         min-height: 100vh;
         padding: 1rem;
         border: 3px solid gray;
      }
      body > div {
         background-image:
            linear-gradient(
               transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
            ),
            linear-gradient(
               to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
            );
         background-size: 1.65% 2.18%;
         width: 96vw;
         height: 72.8vw;
         border-top: 1px solid transparent; /*Collapsing margins*/
      }
      header {
         background-color: hsla(240,100%,50%,0.1);
         width: 94%;
         height: 6.6%;
         border: 1px solid transparent;
         margin: 1.5% 3.2%;
      }
      header h1 {
         margin: 0;
      }
      main {
         width: 94%;
         height: 76.5%;
         margin: 1.5% 3.2%;
      }
      main > * {
         float: left;
         height: 100%;
      }
      main > :nth-child(1) {
         overflow: hidden;
         width: 66.8%;
         margin-right: 3.4%;
      }
      main > :nth-child(2) {
         width: 29.8%;
         border: 2px solid black;
      }

      main > :nth-child(1) > * {
         background-color: hsla(240,100%,50%,0.1);
         float: left;
         padding: 0.5rem;
         margin: 0;
      }
      main > :nth-child(1) > * > h2 {
         margin: 0;
      }
      main > :nth-child(1) > :nth-child(1) {
         width: 58%;
         height: 49%;
         margin-right: 5%;
         margin-bottom: 2.2%;
      }
      main > :nth-child(1) > :nth-child(2) {
         width: 37%;
         height: 49%;
         margin-bottom: 2.2%;
      }
      main > :nth-child(1) > :nth-child(3) {
         width: 100%;
         height: 49%;
      }

      main > :nth-child(2) > * {
         background-color: orange;
         width: 89%;
         padding: 0.5rem;
         margin: 0 5.5%;
      }
      main > :nth-child(2) > * h2 {
         margin: 0;
      }
      main > :nth-child(2) > :nth-child(1) {
         background-color: hsla(240,100%,50%,0.1);
         height: 46%;
         margin-top: 6%;
         margin-bottom: 6%;
      }
      main > :nth-child(2) > :nth-child(2) {
         background-color: hsla(240,100%,50%,0.1);
         height: 46%;
      }
      div.hr {
         width: 94%;
         height: 1.5%;
         border-bottom: 2px solid black;
         margin-left: 3.2%;
         margin-bottom: 2.4%;
      }
      footer {
         background-color: hsla(240,100%,50%,0.1);
         width: 33%;
         height: 4.4%;
         margin-left: 3.2%;
      }
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   </style>
</head>
<body>
   <div>
      <header>
         <h1>Name des Hotels</h1>
      </header>
      <main>
         <article>
            <div>
               <h2>Logo</h2>
            </div>
            <div>
               <h2>Adresse</h2>
            </div>
            <div>
               <h2>Hotelbeschreibung</h2>
            </div>
         </article>
         <aside>
            <section>
               <h2>Pros</h2>
               <ul>
                  <li>Punkt 1</li>
                  <li>Punkt 2</li>
                  <li>Punkt 3</li>
               </ul>
            </section>
            <section>
               <h2>Kontras</h2>
               <ul>
                  <li>Punkt 1</li>
                  <li>Punkt 2</li>
                  <li>Punkt 3</li>
               </ul>
            </section>
         </aside>
      </main>
      <div class="hr"></div>
      <footer>
         <p>Zuletzt aktuallisiert: Datum</p>
      </footer>
   </div>
</body>
</html>

Um das frozen Layout zu erstellten muss nur dieser CSS-Block

Code: 
      body > div {
         background-image:
            linear-gradient(
               transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
            ),
            linear-gradient(
               to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
            );
         background-size: 1.65% 2.18%;
         width: 96vw;
         height: 72.8vw;
         border-top: 1px solid transparent; /*Collapsing margins*/
      }

durch diesen ersetzt werden:

Code: 
      body > div {
         background-image:
            linear-gradient(
               transparent 98%, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0.5)
            ),
            linear-gradient(
               to right, transparent 98%, rgba(0, 110, 0, 0.5) 2%, rgba(0, 110, 0, 0.5)
            );
         background-size: 1.65% 2.18%;
         width: 1000px;
         height: 758px;
         border-top: 1px solid transparent; /*Collapsing margins*/
      }

Wobei in diesem Block nur width und height geändert werden. Ich verweise nur auf den gesamten Block damit du den richtigen erwischt. Du brauchst also nur width und height zu ändern bzw. unterhalb hinzufügen. Im CSS gelten ja immer die im Text unteren Anweisungen.

Also für liquid

Code: 
         width: 1000px;
         height: 758px;
         width: 96vw;
         height: 72.8vw;

und für frozen

Code: 
         width: 96vw;
         height: 72.8vw;
         width: 1000px;
         height: 758px;

Gruss

MrMurphy
 
@MrMurphy
Du scheinst echt Langeweile zu haben.

Das address-Element ist hier sachlich falsch. Nach den HTML-Standards darf das address-Element nur Kontaktinformationen zum Autor eines Beitrags oder einer gesamten Webseite enthalten. Nicht aber Adressen die in dem Text vorkommen.
Zum Vergrößern anklicken....

Stimmt so nicht. Das <address> Tag kann verwendet werden, sofern es sich um die relevante Adresse einer Seite handelt.

Zum main-Element gehören auch die Bewertungen. Hier handelt es sich eher um einen Artikel. Bild, Adresse und Text gehören sachlich zusammen und sollen nur für das vorgegebene Layout einzeln erfasst werden können.
Zum Vergrößern anklicken....

Könnte man drüber streiten, aber ganzen Divs benötigt es nicht. Wenn du das Bild außerhalb eine <figure> platzieren willst, dann tut es auch ein display:block zum floaten.
 
Hallo

Das <address> Tag kann verwendet werden, sofern es sich um die relevante Adresse einer Seite handelt.
Zum Vergrößern anklicken....

Damit liegst du leider falsch. WHATWG und W3C erstellen die Regeln für HTML5. Wer korrektes HTML5 erstellen möchte muss sich daran halten.

Die schreiben ausdrücklich

The address element must not be used to represent arbitrary addresses
Zum Vergrößern anklicken....

must not be used = darf nicht verwendet werden
arbitrary = beliebige

Das address-Element darf also grade nicht für beliebige Adressen verwendet werden.

Weiter

The p element is the appropriate element for marking up postal addresses in general.
Zum Vergrößern anklicken....

appropriate = angemessen

Grundsätzlich ist das p-Element für postalische Adressen angemessen. Das trifft hier zu.

Über die Verwendung gab es bei Veröffentlichung der Entscheidung unter interessierten Webseitenerstellern eine riesen Diskussion, da die sich (auch) für gewöhnliche Adressen ein spezielles Element wünschten. So ein Element gibt es aktuell (noch?) nicht.

Warum sollte das address-Element nicht zweckentfremded werden?

Für die visuelle Aufnahme von Webseiten spielt es keine Rolle. Solche Besucher interessiert die Semantik überhaupt nicht, entsprechend kann der Webseitenersteller durch richtige oder falsche Semantik weder Punkte sammeln noch abgestraft werden.

Andere "Leser", wie Screenreader, Suchmaschinen und ähnliche, für die das Element gedacht ist, gehen aber von der korrekten Verwendung aus. Für so eine Filterung ist die Semantik schließlich gedacht.

Also das dieser Bereich Kontaktinformationen des Artikel- oder Webseitenerstellers enthält. Wenn dort statt dessen, wie in Yureks Lösungsansatz, die Adresse eines Hotels steht wird denen das Hotel als Ersteller des Artikels verkauft - sachlich schlicht falsch.

Im main-Bereich darf das address-Element korrekt verwendet die Kontaktinformationen des Autors des Artikels enthalten, im footer-Bereich die Kontaktinformationen zum Betreiber der Webseite.

Siehe zum Beispiel auch

http://www.mediaevent.de/xhtml/address.html

oder

http://html5-webdesign.de/Element-Referenz/address.html

oder auch SelfHTML

http://wiki.selfhtml.org/wiki/Address

Ein address-Element enthält Informationen, wie der Autor oder inhaltlich Verantwortliche einer Seite oder eines Abschnittes zu erreichen ist. Dies muss nicht zwangsläufig eine E-Mail- oder Postadresse sein, sondern kann auch einfach nur ein Link zu einer weiteren Seite mit Kontaktinformationen sein.

Beachten Sie: address-Elemente sind ausschließlich für die Bereitstellung von Kontaktdaten gedacht. Zum Auszeichnen beliebiger Adressen verwenden Sie herkömmliche Absätze.
Zum Vergrößern anklicken....

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hi, ich danke euch allen besonders Murphy für alles. Hier lern ich wirklich mehr als in meinen Vorlesungen oder aus Büchern. Fragen werden bestimmt noch paar kommen. Langsam gehts Richtung PHP danach dann Javascript. :)

PS: Ist das @media all eigentlich Pflicht?
 
Wenn schon, dann solltest du W3C aber auch vollständig zitieren:
  • The address element must not be used to represent arbitrary addresses, unless those addresses are in fact the relevant contact information
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben