Probleme bei Homepage-Erstellung

[Mike]

Hallo zusammen

Ich sollte für eine Kollegin eine ganz kleine Webseite (rein informativ 1 Seite) aufschalten und habe dabei leider 2 Probleme:

• Wie kann ich ein Hintergrundbild als Vollbild und unverzerrt optimal einbinden?
• Wie kann ich schauen, dass ich die Postadresse der Kollegin am unteren Bildschirm hinkriege? Habe da leider Probleme mit verschiedenen Bildschirmgrössen. Hatte probiert, eine Tabelle zu erstellen und eine Zeile mit flexibler Höhe, sodass die unterste Zeile (mit der Adresse drin) ganz unten wäre. Hat leider nicht geklappt. Ebenfalls probierte ich mit $_GET['height'] zu schauen, ob ich je nach erkannter Höhe mehr <br>'s einfüge, sodass es einigermaßen passt. Die Kollegin hat leider kein wirkliches Budget, sodass ich mich bereit erklärt habe, soweit es mir geht, Ihr behilflich zu sein.

Wäre toll, wenn ihr mir da irgendwie behilflich sein könnten. Ich danke euch vielmals.

Lieber Gruß, Mike

[Felix Riesterer]

Lieber Mike,

vielleicht findest Du hier in den Tutorials das nötige Handwerkszeug?

Liebe Grüße,

Felix Riesterer.

[Mike]

vielleicht findest Du hier in den Tutorials das nötige Handwerkszeug?

Hallo Felix Muss ehrlich sein, dass ich mich da etwas überfordert fühle, da es dort extrem viele andere Dinge drin hat, sodass ich vor lauter Bäumen den Wald nicht mehr sehe :( Falls du irgendwo ein Beispiel direkt zu meinen Problemen hättest, wäre ich extrem dankbar. Gestern in der Nacht habe ich bereits sehr viel gesucht und ausprobiert und war da fast am Verzweifeln.

LG Mike

[Felix Riesterer]

Lieber Mike,

Muss ehrlich sein, dass ich mich da etwas überfordert fühle, da es dort extrem viele andere Dinge drin hat, sodass ich vor lauter Bäumen den Wald nicht mehr sehe :(

Dir fehlen ganz offensichtlich Grundlagen. Dafür sind die Tutorials da.

Falls du irgendwo ein Beispiel direkt zu meinen Problemen hättest, wäre ich extrem dankbar.

Einen "quick fix" gebe ich Dir nicht. Aber Du kannst ja mal in einen schauen, in dem eine Fragestellerin sehr ähnliche Probleme zu lösen suchte.

Gestern in der Nacht habe ich bereits sehr viel gesucht und ausprobiert und war da fast am Verzweifeln.

Noch ein Grund mehr, Dich in die notwendigen Grundlagen einzuarbeiten. Ansonsten kann ja Deine Kollegin auch zu einer Firma gehen, die Websites erstellt...

Liebe Grüße,

Felix Riesterer.

[Mike]

Einen "quick fix" gebe ich Dir nicht.

Brauchst du auch nicht, aber weshalb bist du überhaupt auf diesem Forum aktiv? Einen Tipp mit einer möglichen Funktion wäre aber nicht zu wenig verlangt, falls du ja wirklich Hilfe anbieten möchtest.

Noch ein Grund mehr, Dich in die notwendigen Grundlagen einzuarbeiten.

Da ich dies hier nur einmalig mache weiß ich nicht, weshalb ich hier Tageweise lernen soll.

Ansonsten kann ja Deine Kollegin auch zu einer Firma gehen, die Websites erstellt...

Nicht möglich, da sie eigentlich kein Budget hat. Ist für ein Projekt am Studium, sodass dies einfach online wäre.

Leider ist SelfHTML nicht mehr das, was es noch vor Jahren war. Schade.

[Matthias Scharwies]

Hallo Mike,

für einen einfachen Tipp ist das Web zu vielfältig geworden. Dein Suchwort ist Webvisitenkarte: http://t3n.de/news/webvisitenkarte-template-html-589561/

Dann musst du dir eins aussuchen und umändern / nachbauen.

Leider ist SelfHTML nicht mehr das, was es noch vor Jahren war. Schade.

ja,ja - früher hätten wir dir alles programmiert, ne Schleife drum gebunden und nach Hause gebracht - aber seit's den Euro gibt, ist halt alles schlechter geworden!

Schönen Abend noch

[OliverD.]

Leider ist SelfHTML nicht mehr das, was es noch vor Jahren war. Schade.

Doch! Das Forum heißt nicht umsonst ! self ...... , und es tummeln sich hier verdammt viele Menschen die indirekt helfen und für Ihre Erfahrungen kein Entgeld verlangen, und sich hier stellenweise tagelang um die Fragesteller kümmern. So wie früher! Etwas Eigeninitiative ist nicht zuviel verlangt, zumal deine Kollegin dir dabei helfen kann.

Geteiltes Leid ist halbes Leid.

Btw OliverD.

[Auge]

Hallo

Einen "quick fix" gebe ich Dir nicht. Brauchst du auch nicht, aber weshalb bist du überhaupt auf diesem Forum aktiv?

Hier ist per se Hilfe zur Selbsthilfe angesagt. Die hast du (grundsätzlich) bekommen.

Leider ist SelfHTML nicht mehr das, was es noch vor Jahren war. Schade.

Komisch, ich lese hier andauernd, dass das Problem ist, dass SelfHTML eben doch genau das ist, was es (schon) vor Jahren war.

Tschö, Auge

[Tabellenkalk]

Hallo,

Leider ist SelfHTML nicht mehr das, was es noch vor Jahren war. Schade.

Komisch, ich lese hier andauernd, dass das Problem ist, dass SelfHTML eben doch genau das ist, was es (schon) vor Jahren war.

Aber war SelfHTML nicht schon damals nicht mehr das, was es früher mal war?

Gruß Kalk

[MrMurphy]

Hallo

• Wie kann ich ein Hintergrundbild als Vollbild und unverzerrt optimal einbinden?

Gar nicht. Dazu gibt es heutezutage einfach viel zu viele Seitenverhältnisse bei den Bildschirmen. Wobei bei Desktop-Computern noch jeder User seine eigene Fenstergröße zurechtschieben kann.

Von daher sind Vollbild-Hintergrundbilder für professionelle oder halbprofessionelle bzw. gewerbliche Seiten megaout. Zumal die in der Regel keine Informationen enthalten. (Texte in Grafiken sind auch keine Informationen.)

Wenn du es trotzdem so machen willst musst du dich entscheiden ob die Grafik bei unpassenden Seitenverhältnissen

a) verzerren soll b) beschnitten (nicht angezeigt) werden soll c) mit einem Rand erscheinen soll

Gruss

MrMurphy

[MrMurphy]

Hallo

b) beschnitten (nicht angezeigt) werden soll

Das soll eigentlich heißen

b) beschnitten (nicht vollständig angezeigt) werden soll

Gruss

MrMurphy

[Mike]

Hallo MrMurphy

b) beschnitten (nicht vollständig angezeigt) werden soll

b) wäre die gewünschte Option. Gibt es da irgendwo eine Vorlage, an der ich abschauen kann?

[MrMurphy]

Hallo

b) beschnitten (nicht vollständig angezeigt) werden soll

b) wäre die gewünschte Option. Gibt es da irgendwo eine Vorlage, an der ich abschauen kann?

Die ist doch schnell selbst erstellt. Zum Testen musst du nur noch Pfad und Name der Hintergrundgrafik setzen.

Je nachdem, welche der drei background-size-Anweisungen "am untersten" steht kannst du die drei Varianten durchtesten.

Durch die "center center"-Angabe bei der background-position wird das Bild entweder oben / unten oder links / rechts gleichmäßig beschnitten.

Die Rahmen (border) kannst du natürlich löschen. Die habe ich nur zum Testen eingesetzt.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Mike Hintergrundgrafik</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid blue;
         margin: 0;
      }
      body {
         width: 98%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 1rem auto;
         background-image: url(pfad/grafik.jpg);
         background-repeat: no-repeat;
         background-position: center center;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: contain; /* mit Rand */
         background-size: 100% 100%; /* verzerrt */
         background-size: cover; /* Bild beschneiden */
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid green;
         margin: 0;
      }
      main {
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid orange;
         margin: 0;
         display: flex;
         align-items: flex-end;
      }
      p {
         padding: 0;
         border: 4px solid yellow;
         margin: 0 auto;
         text-align: center;
      }
   </style>
</head>
<body>
   <main role="main">
      <p>Und hier noch etwas zentrierter Text am unteren Rand</p>
   </main>
</body>
</html>

Gruss

MrMurphy

[Robert R.]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

Hallo

• Wie kann ich ein Hintergrundbild als Vollbild und unverzerrt optimal einbinden?

Gar nicht. Dazu gibt es heutezutage einfach viel zu viele Seitenverhältnisse bei den Bildschirmen. Wobei bei Desktop-Computern noch jeder User seine eigene Fenstergröße zurechtschieben kann.

Von daher sind Vollbild-Hintergrundbilder für professionelle oder halbprofessionelle bzw. gewerbliche Seiten megaout. Zumal die in der Regel keine Informationen enthalten. (Texte in Grafiken sind auch keine Informationen.)

Wenn du es trotzdem so machen willst musst du dich entscheiden ob die Grafik bei unpassenden Seitenverhältnissen

a) verzerren soll b) beschnitten (nicht angezeigt) werden soll c) mit einem Rand erscheinen soll

d) wiederholt werden soll

Spirituelle Grüße Euer Robert

[ralphi]

Von daher sind Vollbild-Hintergrundbilder für professionelle oder halbprofessionelle bzw. gewerbliche Seiten megaout. ..

bing.de unprofessionell? Man kann Micrsoft ja viel nachsagen, aber zu schreiben, dass sie Amateure sind ist sehr mutig ;-)

Viele Grüße aus LA

[Baba]

Ebenfalls probierte ich mit $_GET['height'] zu schauen, ob ich je nach erkannter Höhe mehr <br>'s einfüge, sodass es einigermaßen passt.

YMMD