17.11.2016, 14:26
|
||||
|
||||
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 
|
| Sponsored Links |
|
17.11.2016, 14:39
|
|||
|
|||
|
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.
|
| Sponsored Links |
|
17.11.2016, 14:45
|
|||
|
|||
|
Hallo
Zitat:
Zitat:
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
|
|
17.11.2016, 15:12
|
||||
|
||||
|
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!
|
|
17.11.2016, 15:47
|
|||
|
|||
|
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
|
|
18.11.2016, 08:34
|
||||
|
||||
|
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.
|
|
18.11.2016, 12:34
|
|||
|
|||
|
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>
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 13:14 Uhr)
|
|
18.11.2016, 16:09
|
||||
|
||||
|
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
|
|
18.11.2016, 17:31
|
|||
|
|||
|
Hallo
Zitat:
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 17:34 Uhr)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
