Wie erstelle ich einen Text-Content der sich dem Vollbild anpasst mit wenig Inhalt
-1 1 
beatovich
0 0 
Gunnar Bittersmann
0 Gunnar Bittersmann
Wie erstelle ich einen Text-Content der sich dem Vollbild anpasst mit wenig Inhalt
Matthias Scharwies
Matthias Apsel
HenryHallo und guten Tag,
ich bin ganz neu hier und wie mein Benutzername verrät aus der Printbranche 😉 Leider habe ich HTML und CSS nie so wirklich gelernt und versuche mich gerade daran eine Bewerbungsseite zu basteln.
Mein Problem besteht darin, dass ich ein Fixed Head und Fixed Feed habe, bei Massentext (wie zB. Lebenslauf) sieht es richtig toll aus, nur möchte ich, dass dieser Fixed Head/Feed auch bei kürzeren Text am unteren Rand des Browsers erscheint, was es auch tut, nur endet der Text Content weit vor dem Feed. Die Hintergrundfarbe ist natürlich auch ganz anders, als die vom Text Content was nicht so toll aussieht. Kann mir jemand einen Tipp geben, wie man den Text Content hinter dem Fixed Feed variabel an der Größe des Browserfensters an Top und Bottom anpassen kann?
Vielen Dank im Voraus
-
Im Prinzip geht das so:
header: Position: fixed; Höhe: h rem; main: Position absolute; margin-top: h rem; margin-bottom: f rem; footer: Position: fixed; Höhe: f rem;h und f sind Platzhalter für Zahlen.
-
Servus!
Im Prinzip geht das so:
Das war früher wohl so!
Ich würd's mit Flexbox oder Grid Layout machen:
- CSS/Tutorials/feststehender_footer_mit_Flexbox
- CSS/Tutorials/Grid/Grid-Container#feststehender_Footer
Herzliche Grüße
Matthias Scharwies
--
"Survive or die trying!" -
@@Regina Schaukrug
h und f sind Platzhalter für Zahlen.
Magische Zahlen. Welche die unangenehm Eigenschaft haben, dass sie vielleicht bei dir passen, aber nicht bei allen anderen. Deshalb sollte man sie tunlichst vermeiden.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar Bittersmann,
h und f sind Platzhalter für Zahlen.
Magische Zahlen. Welche die unangenehm Eigenschaft haben, dass sie vielleicht bei dir passen, aber nicht bei allen anderen.
Die passen immer. 😂
$$\mathrm{h} = 6{,}626\ 070\ 040(81)\cdot 10^{-34},\mathrm{J,s}$$
$$\mathrm{F} = 96\ 485{,}332\ 89(59),\mathrm{\frac{C}{mol}}$$
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
h und f sind Platzhalter für Zahlen.
Magische Zahlen. Welche die unangenehm Eigenschaft haben, dass sie vielleicht bei dir passen, aber nicht bei allen anderen.
Die passen immer. 😂
$$\mathrm{h} = 6{,}626\ 070\ 040(81)\cdot 10^{-34},\mathrm{J,s}$$
$$\mathrm{F} = 96\ 485{,}332\ 89(59),\mathrm{\frac{C}{mol}}$$
Die Klammern sollen wohl verdeutlichen, dass man sich über den genauen Wert nicht im Klaren ist? Die können gar nicht passen. Viel zu ungenau.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
hallo
Kann mir jemand einen Tipp geben, wie man den Text Content hinter dem Fixed Feed variabel an der Größe des Browserfensters an Top und Bottom anpassen kann?
<!doctype html> <html> <head> <title>new</title> <style> html, body {margin:0; padding:0; height:100%} body {display:flex; flex-flow:column;} header, footer {flex:0 1 auto;} main {flex:1 1 auto;} </style> </head> <body> <header>header</header> <main>main</main> <footer>footer</footer> </body> </html>--
Neu im Forum! Signaturen kann man ausblenden!-
Ihr seit ja super klasse ❤️ so schnell kam ich gar nicht hinterher um es an meiner Webseite anzuwenden 😉
Nur leider hat keiner von den tollen Tipps eine Änderung des bestehenden Problems gelöst 😟 Es kann natürlich auch daran liegen, dass durch meine Versuche der Code so verbaut ist, und deshalb gar keine Auswirkung mehr zeigt auf meiner Seite!?! Oder ich bin durch die sommerliche Hitze einfach nur verblödet 😜
Gerne würde ich Euch die Homepage als Zip-Datei hochladen, nur ist es auf dieser Plattform nicht wirklich möglich!?! Aber es wäre echt SUPER wenn mir jemand aus diesem Dilemma helfen könnte…
Nochmal ein ganz liebes DANKE SCHÖN!?!
-
Servus!
Gerne würde ich Euch die Homepage als Zip-Datei hochladen, nur ist es auf dieser Plattform nicht wirklich möglich!?!
Das müsste dann ja erst entpackt und analysiert werden.
Lade deine seite auf Deien Webspace hoch oder nutze eine kostenlose Alternative:
Aber es wäre echt SUPER wenn mir jemand aus diesem Dilemma helfen könnte…
Dafür brauchen wir Deinen Code.
Nochmal ein ganz liebes DANKE SCHÖN!?!
Herzliche Grüße
Matthias Scharwies
--
"Survive or die trying!"-
Nochmal Hallo an alle,
ich habe es endlich geschafft auf bplaced meine unfertige Seite hochzuladen. Vielleicht könnt Ihr mir im Angesicht des Grauen (meine Hompage) sagen welchen Fehler ich begangen habe. Die Seiten Lebenslauf und Qualifikationen sehen SUPER aus, wahrscheinlich wegen dem Massentext, die anderen Seiten sind wegen zu wenig Text/Bild abgeschnitten zum Footer. Da wäre mir ein Rat sehr hilfreich.
Ich bedanke mich jetzt schon einmal für Eure hilfe
link zur Seite: http://mediengestalter.bplaced.net/
-
Servus!
Nochmal Hallo an alle,
ich habe es endlich geschafft auf bplaced meine unfertige Seite hochzuladen. Vielleicht könnt Ihr mir im Angesicht des Grauen (meine Hompage) sagen welchen Fehler ich begangen habe. Die Seiten Lebenslauf und Qualifikationen sehen SUPER aus, wahrscheinlich wegen dem Massentext, die anderen Seiten sind wegen zu wenig Text/Bild abgeschnitten zum Footer.
Du musst Deiner Seite, bzw. dem Haupt-Inhalt eine bestimmte (Mindest)-Höhe geben. Falls die Seite dann sehr viel Inhalt hat, darf sie nach unten wandern, sodass der footer nicht mehr sichtbar ist, dann aber gescrollt werden kann.
@beatovich hatte Dir in seinem Tipp bereits die Elemente genannt: body, header, footer und main. (und auch die einzelnen Flex-Festlegungen).
Deine
<div id="site">hat keine Höhe und deshalb bei keinem oder wenig Inhalt auch eine Lücke zum Footer.Du verwendest etwas, was als „Div-Suppe“ verpönt ist: viele Divs, die eigentlich keinen Nutzen haben außer mich zu verwirren.
Mein Tipp: Mach mal eine produktive Pause und lies folgende Tutorials:
- HTML/Tutorials/HTML5-Grundgerüst
- HTML/Tutorials/HTML5-Seitenstrukturierung
- CSS/Tutorials/Einstieg in Grid
PS: Hast du deine Seite schon mal auf dem Handy angeschaut? Sie ist nicht repsonsiv! Die Inhalte verschwinden! Da wäre Grid Layout eine gute Möglichkeit, responsive Webseiten zu erstellen.
PPS: Von der Grafik her sieht deine Seite topp aus!
Herzliche Grüße
Matthias Scharwies
--
"Survive or die trying!"-
Servus!
Noch ein paar Anmerkungen:
Google und andere robots durchsuchen deine Webseite nach Inhalten. Deshalb sollte Text auch immer als Text und nicht als Rastergrafik wie Dein
head.jpgdargestellt und mit CSS formatiert werden. Google rankt gut erstellte HTML5-Webseiten höher als andere.Auch das
<div id="menu">(ich würde das nav-Element verwenden) könnte man mit Text realisieren; evtl als SVG.Das Qualifikationsprofil würde ich als Liste und nicht als Tabelle umsetzen. Mit CSS kanst du das runde Aufzählungszeichen durch den Strich ersetzen.
Im Footer fehlt ein Link auf's Impressum und, da du ein Kontaktformular hast, auch eine Datenschutzerklärung. Wenn Du das nicht hast, kommen innerhalb von 2 Wochen Abmahnbriefe von geldgeilen Anwälten.
Apropos Kontaktformular. Entferne die divs und verwende label für die einzelnen Eingabefelder.
Nichts für ungut, aber Print und WebDesign sind 2 verschiedene Welten, da ist es nur natürlich, dass du erst mal alles kennenlernen musst.
Herzliche Grüße
Matthias Scharwies
--
"Survive or die trying!" -
Vielen Dank für den Hinweis...
ich bin zwar gerade total überfordert, bin halt nur im Print Bereich ausgebildet und kann mit Grid Layout gar nichts anfangen!?! Ich würde dich eher Fragen ob das eine andere Art von Steak ist, aber kein HTML 🐮 Die Maße die @beatovich mir angegeben hat, hatte ich eigentlich eingebaut, das heißt ich muss 'site' eine x-beliebige größe eintragen? Tut mir wirklich leid wenn ich Euch löchere….
Und vielen Dank für das Kompliment, bezüglich meiner Seite 😀
Die Seite ist so auch noch nicht wirklich fertig, hab sie wegen des Chats online gestellt und vielen Dank für den Hinweis. Das mit dem Datenschutzerklärung wäre mir sonst nie in den Sinn gekommen.
Ihr seit TOP ❤️
-
Servus!
Vielen Dank für den Hinweis...
ich bin zwar gerade total überfordert, bin halt nur im Print Bereich ausgebildet und kann mit Grid Layout gar nichts anfangen!?!
Wie schon gesagt, mach mal 'ne kurze schöpferische Pause und lies dir die Tutorials durch.
Die Maße die @beatovich mir angegeben hat, hatte ich eigentlich eingebaut, das heißt ich muss 'site' eine x-beliebige größe eintragen?
Ja deshalb ist der footer ja auch unten am Rand, wie du wolltest. Du musst jetzt aber alles zwischen header und footer (das main) weiß einfärben und da stören deine divs.
Herzliche Grüße
Matthias Scharwies
--
"Survive or die trying!"-
Hallo Matthias Scharwies,
Wie schon gesagt, mach mal 'ne kurze schöpferische Pause und lies dir die Tutorials durch.
Nicht nur durchlesen sondern durcharbeiten. 😉
Bis demnächst
Matthias--
Rosen sind rot.
-
-
-
hallo
Vielleicht könnt Ihr mir im Angesicht des Grauen (meine Hompage) sagen welchen Fehler ich begangen habe. Die Seiten Lebenslauf und Qualifikationen sehen SUPER aus, wahrscheinlich wegen dem Massentext, die anderen Seiten sind wegen zu wenig Text/Bild abgeschnitten zum Footer. Da wäre mir ein Rat sehr hilfreich.
Kann ich nicht nachvollziehen.
Erst mal ist das auf den ersten Blick gar nicht grauenhaft.
Aber es knallt natürlich in deinem Design, sobald der Bildschirm 800px unterschreitet. Für diesen Fall musst du auf eine alternative flexiblere Gestaltung umschalten.
@media screen and (max-width: 50 em){ /* alternatives Layout*/ }dürfte da zutreffen.
Ferner solltest du im head ergänzen
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ich würde von altem xhtml auf <!doctype html> übergehen, und dann die semantischen Elemente header footer main benutzen, um die div-Suppe da aufzulösen.
Und <html lang="de"> kann nicht schaden.
-
Hallo nochmal,
ich habe jetzt wirklich angefangen und ein komplett neues HTML Gerüst + CSS aufgebaut. Habe mich nach der Stuktur von @beatovich gehalten. Jetzt weiß ich wo der Fehler an meiner Seite lag, es lag daran das ich alles Zentriert haben wollte indem ich ein DIV (margin: auto;) gegeben habe, was sich mit dem HTML/BODY margin nicht vertragen hat. Wie kann ich alles Zentrieren das es auch mittig auf der Seite erscheint?
Es tut mir wirklich total leid, dass ich Euch hier nerve 😟 ich bin echt nicht gut in Programmiersprachen und HTML, selbst nach den Links zum nachlesen komme ich mir noch dümmer vor als vorher.
HTML/CSS wird nicht mein bester Freund werden. Mein Ausbilder hat mir damals gesagt, entweder du kann gut Programmieren, oder du bist ein guter Grafiker, beides geht nicht...
-
hallo
ich habe jetzt wirklich angefangen und ein komplett neues HTML Gerüst + CSS aufgebaut. Habe mich nach der Stuktur von @beatovich gehalten. Jetzt weiß ich wo der Fehler an meiner Seite lag, es lag daran das ich alles Zentriert haben wollte indem ich ein DIV (margin: auto;) gegeben habe, was sich mit dem HTML/BODY margin nicht vertragen hat. Wie kann ich alles Zentrieren das es auch mittig auf der Seite erscheint?
z.B.
@media screen and(min-width:60ex){ body{width:60ex; margin:0 auto} }
-
@@beatovich
@media screen and(min-width:60ex){ body{width:60ex; margin:0 auto} }
Die Höhe der Kleinbuchstaben als Maßeinheit für die Breite von etwas zu verwenden scheint mir keine so gute Idee zu sein.
emist hier wohl besser geeignet alsex. Und ja, auchembezieht sich auf die Schrifthöhe.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
-
-
-
@@beatovich
Was fehlt:
<html>- die Angabe der Sprache des Inhalts; hier im Beispiel
<html lang="en">, für eine deutschsprachige Seite<html lang="de">
<head>
-
die Angabe
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> -
die Angabe der Zeichencodierung
<meta charset="UTF-8"/>kann auch nicht schaden
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
Was fehlt:
Ein Gespühr dafür, wann ein Beispiel angemessen genug ist, um das Problem zu behandeln.
-
Hallo Matthias,
ich habe mir jetzt von der bplaced webspace angemeldet, ich hoffe der ist noch nicht freigeschaltet... ansonsten liegt es wohl doch an meiner Dummheit 😟
Ich versuche es morgen nochmal.
Lieben Gruß René
-
@@beatovich
Was fehlt:
Ein Gespühr dafür, wann ein Beispiel angemessen genug ist, um das Problem zu behandeln.
Angemessen ist, Anfänger mit dem notwendigen Wissen zu versorgen und auch Fragen zu beantworten, die sie aufgrund ihres Wissensstandes noch nicht stellen konnten.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Hallo Gunnar, @RasterTonWert
- die Angabe der Zeichencodierung
<meta charset="UTF-8"/>kann auch nicht schaden
Das und komplett Doctype mal aktueller. Darüber hinaus reicht ein Bild, mit auch noch unscharfer Ansicht, oben als Impressum nicht aus. die DSGVO fehlt auch und sollte erst recht beachtet werden, da auch ein Kontaktformular(ist das wirklich notwendig?) drauf ist.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ - die Angabe der Zeichencodierung
- die Angabe der Sprache des Inhalts; hier im Beispiel
-
-
@@RasterTonWert
Mein Problem besteht darin, dass ich ein Fixed Head und Fixed Feed habe
Fixed Feet? Aus Springböcken Standböcke gemacht?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann