zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Wiedereinstieg

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.11.2016, 15:26
Benutzerbild von dabe2k16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2016
Ort: Köln
Beiträge: 4
dabe2k16 befindet sich auf einem aufstrebenden Ast
Standard Wiedereinstieg

Hallo,

meine Kenntnisse sind einwenig Eingerostet, das möchte ich natürlich wieder ändern, ich hab heute Morgen damit begonnen, dies zu ändern, leider habe ich nun ein kleines Problem, und zwar würde ich, gerne, den Hintergrund eines div Containers, mit wandern lassen, also er soll Wachsen,

http://dabe2k16.likesyou.org/ ist die Domain, wo die Page draufliegt, ich möchte quasi das der Dunkelblaue Hintergrund, des divs sich an die Höhe der Boxen Links anpasst, es bleiben 3 Boxen, stelle ich den Hintergrund von 100% auf 110% werden die Boxen allerdings größer, wo ist hier der Fehler ?

Vielleicht kann mir ja jemand helfen.

Mit freundlichen Grüßen
Daniel Belleflamme
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.11.2016, 15:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wer floatet muss auch clearen, daran hat sich auch in den letzten Jahren nichts geändert.

Aber bevor du so weitermachst: Verwende aussagekräftige Elemente wie Überschriften, Absätze, Aufzählungen, etc.

Schau dir auch an, wie man ein zweispaltiges Layout mit modernen Methoden umsetzt. MrMurphy baut dir hier eventuell auch eines zusammen, bzw. lies dir seine Posts durch, er hat hier immer gute Beispiele. Mir fehlt leider aktuell die Zeit, dir hier eines zu liefern.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.11.2016, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Vielleicht kann mir ja jemand helfen.
Schwierig.

Zitat:
meine Kenntnisse sind einwenig Eingerostet
Leider mehr als das. Deine Kenntnisse sind veraltet und enthalten Fehler, die auch damals bereits Fehler waren. Das lässt sich erfahrungsgemäß nicht in ein paar Stunden oder Nachmittagen korrigieren.

XHTML ist zum Beispiel bereits vor über 8 Jahren offiziell begraben worden und soll seitdem nicht mehr verwendet werden, speziell für neu erstellte Seiten. Auch wenn Browser die noch lange anzeigen werden, sofern sie korrekt nach den damaligen XHTML-Regeln erstellt wurden.

Für viele der heutigen Standardlösungen sind XTHML und veraltetes CSS aber nicht zu gebrauchen.

Aktuell und zukunftsträchtig sind HTML5 und CSS3. Ein Forum wie dieses ist aber nicht dazu geeignet dir die fehlenden Grundlagen beizubringen. Dazu wäre der Aufwand viel zu groß.

Ohne die Grundlagen wirst du unsere Antworten / Informationen aber nicht verarbeiten können. Dazu ist die Wissenslücke zu groß.

Gruss

MrMurphy
Mit Zitat antworten
  #4 (permalink)  
Alt 17.11.2016, 16:12
Benutzerbild von dabe2k16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2016
Ort: Köln
Beiträge: 4
dabe2k16 befindet sich auf einem aufstrebenden Ast
Standard

Danke MrMurphy genau mit dieser Art von Antwort habe ich gerechnet, ist gleichzeitig auch ein guter Ansatzpunkt im SelfHTML Wiki nochmal das ein oder andere Kapitel über HTML 5 zu lesen.

Werde mich wieder melden!

@cloned Top Beitrag, mir ist echt aufgefallen das zuviele <br />' vorhanden sind, sieht voll uncool aus, bei nochmaligem drüberfliegen!
Mit Zitat antworten
  #5 (permalink)  
Alt 17.11.2016, 16:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Wenn du beschreiben würdest wofür die Seite überhaupt gedacht ist und welche Informationen sie anzeigen soll kann ich dir gerne eine aktuelle Beispielseite als Vorlage oder zum Testen und Rumspielen erstellen. Dass drei Container mit dem selben Inhalt angezeigt werden sollen ist doch höchst unwahrscheinlich.

Die Informationen müssen nicht die endgültigen oder gar persönliche Daten von dir sein. Aber es sollte schon ersichtlich sein ob Bilder oder Listen erforderlich sind. Oder ein Lebenslauf. Oder eine Adresse.

Im Moment vermute ich dass die Webseite eine Bewerbung, ein Lebenslauf oder berufliche Informationen oder eine Mischform davon anzeigen soll.

Solche Seiten werden heutzutage häufig von Personen mit Tablets aufgerufen und sollten dort im Quer- und Hochformat vernünftig angezeigt werden.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 18.11.2016, 09:34
Benutzerbild von dabe2k16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2016
Ort: Köln
Beiträge: 4
dabe2k16 befindet sich auf einem aufstrebenden Ast
Standard

Die Seite soll ne Art Lebenslauf werden, wo es auch ein paar Software Downloads geben soll, und Verlinkungen auf externe Seiten das war es es schon. Ist auf jedenfall ein Super Vorschlag von dir, es soll auch kein komplexes Layout werden.
Mit Zitat antworten
  #7 (permalink)  
Alt 18.11.2016, 13:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ich habe mal eine Grundlagenseite mit deinen mageren Informationen erstellt.

Die Rahmen und Abstände dienen nur der Erkennbarkeit der Container. Im endgültigen Layout können sie angepasst oder auf Null gesetzt werden, je nachdem was gewünscht ist.

Die Seite nimmt mindestens die Seitenhöhe an. Falls der endgültige Inhalt mehr Platz beansprucht wächst die Seite einfach in der Höhe ohne das irgendwelche Anpassungen erforderlich sind.

Ein Fallback für ältere Browser und ein einfaches Responsive Design sind auch bereits eingebaut.

Einige CSS-Angaben haben sich aus der Erfahrung heraus bewährt oder sind bereits für spätere Anpassungen aufgeführt, die mit dem wachsenden Inhalt meist erforderlich sind.

Den HTML-Teil habe ich den Regeln vom aktuellen HTML5 gemäß angepasst sowie einige inhaltliche Korrekturen vorgenommen, damit sie seriöser beim Besucher ankommen.

Du kannst dir den gesamten Quelltext ja einfach sichern und Kopien machen, mit denen du dann rumspielst:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grundlagenseite 01</title>
   <title>Daniel Belleflammes Personal Homepage</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>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* mindestens 100% Höhe - Wichtig zum Beispiel für Sticky Footer mit Flexbox */
   /* Flexbox-Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         min-height: calc(100vh - 1rem);
         height: calc(100% - 1rem);
      }
   }
   @media only screen and (min-width: 100px) {
      body {
         min-height: calc(100vh - 0.5rem);
      }
   }

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
      }
   }

   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0.5rem 0 0 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Grundlayout*/
   @media all {
   }
   @media only screen and (min-width: 100px) {
      body {
         display: flex;
         flex-direction: column;
      }
      .stickycontainer {
         flex-grow: 1;
         flex-shrink: 0;
         flex-basis: auto;
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*.stickycontainer*/
   @media all {
      .stickycontainer {
         padding: 0;
         margin: 0;
      }
      .hauptheader,
      .hauptnav {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      .stickycontainer {
         display: flex;
         flex-direction: column;
      }
      .hauptheader {
      }
      .hauptnav {
      }
      main {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*main*/
   @media all {
      main {
      }
   }
   @media only screen and (min-width: 800px) {
      main {
         display: flex;
         flex-wrap: wrap;
      }
      main>aside {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(350px - 0rem - 0px - 0rem);
         order: 0;
      }
      main>article {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 350px - 1rem - 4px - 0.5rem);
         order: 1;
      }
   }

   /*main>article*/
   @media all {
      main>article {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
   }

   /*main>aside*/
   @media all {
      main>aside {
         padding: 0;
         border: 0;
         margin: 0;
      }
      main>aside>* {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem  0 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      main>aside {
         display: flex;
         flex-wrap: wrap;
      }
      main>aside>* {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 0.5rem - 4px - 0.5rem);
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*Spezielle Einstellungen*/
   @media all {
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <div class="stickycontainer">
      <header class="hauptheader">
         <h1>Grundlagenseite</h1>
      </header>
      <nav class="hauptnav">
         <h2>Navigation</h2>
      </nav>
      <main>
         <article>
            <h2>article</h2>
            <p>Originaldiskussion: <a href="http://xhtmlforum.de/73072-wiedereinstieg.html">http://xhtmlforum.de/</a></p>
            <p>Das gesamte CSS befindet sich im head-Bereich des Quelltextes in dem style-Element und kann komplett in eine externe CSS-Datei ausgelagert werden.</p>
         </article>
         <aside>
            <section>
               <h2>Steckbrief</h2>
               <p>Name: Daniel Belleflamme</p>
               <p>Geb.: 09.10.1983</p>
               <p>Wohnort: Köln / Nippes</p>
               <p>Tel.: 0449933550088</p>
               <p>Mail: daniel.belleflamme@ruru.ru</p>
            </section>
            <section>
               <h2>Originalseite</h2>
               <p><a href="http://dabe2k16.likesyou.org/">http://dabe2k16.likesyou.org/</a></p>
            </section>
            <section>
               <h2>section</h2>
            </section>
         </aside>
      </main>
   </div>
   <footer>
   </footer>
</body>
</html>
Und noch ein temporärer Link zu meinem Testbereich zum ausprobieren und rumspielen, den ich aber immer wieder mal aufräume:

Testseite

So kannst du sehen wie eine Webseite mit aktuellem HTML5 und CSS3 erstellt wird und mit deinen Kenntnissen vergleichen.

Zusatzinfo: Ich habe grade gesehen dass du auf deiner Seite neuen Inhalt aufgespielt hast. Beziehungsweise: Ich habe zunächst nur eine leere Seite gesehen. Das liegt daran, dass von deiner Seite bei blockiertem JavaScript nichts angezeigt wird. So ewas solltest du vemeiden, grade wenn du die Seite für konkrete Bewerbungen nutzen möchtest. Eine Grundregel: Auch bei blockiertem JavaScript muss eine Seite alle Informationen strukturiert anzeigen.

Gruss

MrMurphy

Geändert von MrMurphy (18.11.2016 um 14:14 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 18.11.2016, 17:09
Benutzerbild von dabe2k16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2016
Ort: Köln
Beiträge: 4
dabe2k16 befindet sich auf einem aufstrebenden Ast
Standard

Hallo @MrMurphy,

genau so habe ich mir ein Layout vorgestellt, und so in etwa wollte ich es auch hinbekommen. Die Seite soll nicht konkret als Bewerbungs Referenz dienen, ich wollte einfach mal wieder was Just for Fun machen. Ich merke gerade meine Kenntnisse sind aus der Steinzeit, wenn ich mir das CSS3 so ansehe, werde nun erstmal etwas damit herumspielen, und mich dann nochmal melden falls irgendeine Frage auftaucht, ich dank dir jedenfalls für das Layout.

ps // Wo wird denn dort die Layoutlänge definiert, also von Links nach Rechts die Größe ?

mfg
dabe
Mit Zitat antworten
  #9 (permalink)  
Alt 18.11.2016, 18:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
also von Links nach Rechts die Größe
Das geschieht in der Regel durch die Container selbst. Als sogenannte Blockelemente nutzen sie immer den gesamten zur Verfügung stehenden Platz. Das sollten Webseitenersteller auch ausnutzen und so weit wie möglich nichts daran ändern. Das gilt in dem Beispiel für den Header (header-Element) und die Navigation (nav-Element).

Und auch für das unsichtbare main-Element.

In dem main-Elment gibt es zwei Container, die nebeneinander stehen. Das Nebeneinanderstehen, die Breite und die Höhe der Container werden durch Flexbox bestimmt. Der schmalere Container ist wiederum unsichtbar.

Bei schmalen Containern hat sich eine feste Breite bewährt, so habe ich es auch in dem Beispiel gehalten. Der breitere Container nimmt dann den Rest der zur Verfügung stehenden Breite ein.

Wenn der Platz für die beiden Container nebeneinander zu knapp wird werden sie mittels sogenannter Media Queries untereinander angeordnet und nehmen dann jeweils die gesamte Fensterbreite ein, zum Beispiel auf Smartphones oder Tablets.

Innerhalb des schmaleren Containers befinden sich drei weitere Container. Von Haus aus stehen sie bereits untereinander. Aber damit sie die volle Höhe einnehmen werden auch sie per Flexbox zusätzlich angeordnet.

Als Flexbox wird das Flexbox-Modell bezeichnet (display: flex). Das ist eine bereits seit einigen Jahren ins CSS übernommene Möglichkeit Containern den zur Verfügung stehenden Leerraum zuzuweisen und damit ihre Größe zu bestimmen.

Dabei können sie auch auf nebenstehende Container reagieren und so zum Beispiel alle die gleiche Höhe annehmen. Eine Möglichkeit, die bislang überhaupt nicht vorgesehen war und früher nur durch mehr oder weniger gut funktionierende Tricks erreicht werden konnte.

Sehr hilfreich ist auch zum Beispiel das Flexbox eine reine Eltern-Kind-Beziehung aufbaut und nicht weiter vererbt wird. Probleme wie beim floaten, dass durch ein clear oder clearfix immer wieder eingefangen werden muss, fallen dadurch einfach weg.

Gruss

MrMurphy

Geändert von MrMurphy (18.11.2016 um 18:34 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 08:08 Uhr.