✔ Webseite mit Hilfe von CSS in der Größe begrenzen

J

jk89

Grünschnabel
Hallo zusammen,

ich konnte in diesem Forum schon einige nützliche Tipps finden, komme allerdings bei einem Problem nicht weiter.

Ich habe eine Webseite die aus verschiedenen Grafiken besteht. Die Gesamtgrafik ist für kleine Bildschirme etwas zu groß. Daher möchte ich die Größe der Darstellung immer auf circa 80% des vorhandenen Platzes beschränken. Mit einer Grafik habe ich schnell eine Lösung gefunden (mit der % Begrenzung bei width) - allerdings nicht bei mehreren zusammenhängenen Grafiken.

Eine Auszug aus meinem Code:
HTML: 
<style type="text/css">
      body, html {
        display: flex;
        align-items: center;
        justify-content: center;
   }   
</style>

Damit die Grafiken horizontal und vertikal mittig ausgerichtet sind. Das funktioniert wunderbar.

Dann geht es schon los mit:
HTML: 
<body>
    <table width="700" border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
....
        </tr>
      </tbody>
    </table>
  </body>

Ich habe bereits einige Versuche unternommen über CSS einen "Container" einzubauen, der in der Größe begrenzt ist. Allerdings ohne Erfolg ;-)

Über eine einfache Lösung, die gut in meinen vorhanden Code passt, wäre ich sehr dankbar! Leider bin ich noch ein Neuling auf diesem Gebiet. Vermutlich ist die Lösung nah :-)

Vielen Dank!
 
Falls du deine Bilder mit dem img-Tag einfügst, so sollte dir diese CSS-Codeschnippsel weiterhelfen:

CSS: 
body, html {  /*übernommen*/
        display: flex;
        align-items: center;
        justify-content: center;
   } 
  img{
  display:block;
  max-width:80%;
  height:auto;
  }
 
Hi,
als erstes löscht Du mal die Tabelle. Tabellen responsive zu bekommen ist sehr schwer und semantisch hat die an der Stelle glaube ich auch nichts zu suchen.
Das Flexmodel einzusetzen solltest Du dir genau überlegen bzgl. Browserunterstützung.
Ansonsten einfach erstmal die Bilder per img einbinden und dann schauen das die richtig floaten bzw. mit inline-block sich richtig anordnen.
Leider kann man ohne richtigen Code Dir auch keine wirklich helfenden Lösungen anbieten.

Grüße
 
Anstelle der relativen Einheit "%" (Prozent), könnten auch CSS3 Viewport Units (vw, vh) von Interesse sein.

Hierbei ist lediglich zu beachten, dass sich diese Angaben immer auf die aktuelle Breite u. Höhe des Browserfensters beziehen, und beispielsweise in einer verschachtelten HTML-Struktur nicht die Dimension eines übergeordneten Parent-Elements herangezogen werden kann.
Ansonsten für weitere Quellen: https://www.google.de/search?q=css3+viewport+units
 
Danke an @abdellaui @Jan-Frederik Stieler und @SpiceLab !

@abdellaui
Deine Lösung habe ich getestet. Ich habe die Grafik mittels Photoshop gesliced. Wenn ich deinen Code einfüge, funktioniert das zwar für die einzelnen Grafiken, allerdings nicht für die Tabelle. Daher kommt dann ein verschobenes Gesamtbild zum Vorschein.

@Jan-Frederik Stieler
Die Tabelle entsteht, da ich die Grafik mittels Photoshop gesliced habe. Für andere Lösungen reichen meine Webdesign Erfahrungen noch nicht aus ;-)

@SpiceLab
Ich werde mich mal einlesen.

Falls noch wer eine gute und einfache Lösungsidee hat, würde ich mich freuen.

Viele Grüße
 
Hallo

Eine Tabelle ist für geslicte Bilder weder gedacht noch geeignet.

Die Lösung im Photoshop ist für Anfänger gedacht, die die erstelle Tabelle ohne Änderungen in ihre Webseite übernehmen.

Sie ist nicht dafür gedacht nachträglich in der Größe geändert oder gar flexibel gestaltet zu werden.

Eine Tabelle ist nur für Tabellendaten geeignet. Tabellendaten sollen immer komplett angezeigt werden. Deshalb ist es nur über Umwege möglich, aber nicht sinnvoll, eine Tabelle größenmäßig einzuschränken.

Deshalb wird es kaum funktionieren, eine Tabelle flexibel zur Anzeige von geslicten Bildern zu verwenden.

Konkret können wir dir auch nur helfen, wenn wir die Bilder kennen.

Gruss

MrMurphy
 
@MrMurphy vielen Dank für deinen Beitrag.

Ich fürchte, es gibt keine richtige Lösung für mein Problem.

Meine Webseite ist so in der Art aufgebaut:
beispiel.png

Unter 1,2 und 3 befinden sich Verlinkungen. Zunächst hatte ich diese über HTML (usemap/map) verlinkt. Da der Code sich jedoch bei einer Größenänderung (mit width %) nicht anpasst, habe ich mich für das slicen mit Photoshop entschieden.
Wie wäre hier die professionelle Lösung?

Viele Grüße
 
Hi,
kann es sein das Du ein layout gemacht hast und nun das ganze einfach als Bild veröffentlichen willst ohne wirklich ein HTML-Konstrukt bauen zu müssen?


jk89 hat gesagt.:
Wie wäre hier die professionelle Lösung?
Zum Vergrößern anklicken....
Ein Layout mit HTML bauen, heißt auch Elemente des Layouts welche per CSS umgesetzt werden können zu bauen und nur dort wo es nicht geht Bilder einsetzen.

Kann st Du den nicht einfach das Bild welches gesliced wurde hier veröffentlichen?
 
Danke @Jan-Frederik Stieler

Wie kann ich den auf einem Bild verschiedene Verlinkungen einbinden ohne HTML? Das Bild soll ja eine "Funktion" haben?

Das Beispielbild spiegelt meine Webseite wieder!? Warum benötigt man für den Code das Originalbild? Das Originalbild ist eine Zeichnung einer Künstlerin. Dies kann man nicht mit HTML nachbilden.

So sieht der Code aus:

HTML: 
<HTML>
<HEAD>
<TITLE>Beispiel</TITLE>
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type">
<style type="text/css">
      body, html {
        display: flex;
        align-items: center;
        justify-content: center;
   } 
</style>
</HEAD>
<BODY>
<TABLE WIDTH=400 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD COLSPAN=6>
            <IMG SRC="Bilder/Beispiel_01.png" WIDTH=400 HEIGHT=97 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=97 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=5>
            <IMG SRC="Bilder/Beispiel_02.png" WIDTH=72 HEIGHT=303 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/Beispiel_03.png" WIDTH=66 HEIGHT=64 ALT=""></TD>
        <TD COLSPAN=2 ROWSPAN=3>
            <IMG SRC="Bilder/Beispiel_04.png" WIDTH=97 HEIGHT=122 ALT=""></TD>
        <TD ROWSPAN=2>
            <IMG SRC="Bilder/Beispiel_05.png" WIDTH=73 HEIGHT=75 ALT=""></TD>
        <TD ROWSPAN=5>
            <IMG SRC="Bilder/Beispiel_06.png" WIDTH=92 HEIGHT=303 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=64 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=4>
            <IMG SRC="Bilder/Beispiel_07.png" WIDTH=66 HEIGHT=239 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=11 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=3>
            <IMG SRC="Bilder/Beispiel_08.png" WIDTH=73 HEIGHT=228 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=47 ALT=""></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="Bilder/Beispiel_09.png" WIDTH=74 HEIGHT=70 ALT=""></TD>
        <TD ROWSPAN=2>
            <IMG SRC="Bilder/Beispiel_10.png" WIDTH=23 HEIGHT=181 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=70 ALT=""></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="Bilder/Beispiel_11.png" WIDTH=74 HEIGHT=111 ALT=""></TD>
        <TD>
            <IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=111 ALT=""></TD>
    </TR>
</TABLE>
</BODY>
</HTML>

Einzelne Bilder wurden im Originalbild dann natürlich noch verlinkt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück