Header quer

feitzi15.12.1108:13

Hallo,

ich soll eine Website programmieren die einen Header hat der quer abgeschnitten ist.
Ich vermute mal, dass das nicht möglich ist.

Der Header kann ein oder mehere Bilder sein oder einfach nur eine div mit einer Farbe.
Wie es ca. aussehen sollte, habe ich in einer Grafik veranschaulicht.

vielen dank
mfg
feitzi

0

Eddie-Vollgas15.12.1108:19

Verstehe ich nicht so ganz. Ich geh mal davon aus, dass anscheinend eine Lösung per Bild NICHT für Dich in Frage kommt? Gib doch bitte ein wenig mehr preis von Deiner Idee.

0

Eddie-Vollgas15.12.1108:27

0

feitzi15.12.1108:38

ja das war eigentlich der Ansatz den ich machen wollte.

Aber die Breite der Seite ist doch bei jedem User anders. Wenn ich nun ein Bild über die ganze Seite ziehe dann ist die höhe des Bildes doch bei jedem anders?

0

Eddie-Vollgas15.12.1109:02

Du hast eine Background Grafik oder Farbe, dann setzt Du mittels DIV den Header-, Content- und Footer-Bereich fest - mit einer festen Größe. So wäre die Seite für alle Betrachter gleich - weil in seinen Maßen fest definiert.

0

feitzi15.12.1109:21

Dann hätte ich aber links und rechts weiß ränder oder?

0

dreyfus15.12.1109:27

Mit dem Canvas Element in HTML5 kannst Du die Dreiecke auch dynamisch mit JavaScript zeichnen, dann ist es völlig egal wie groß das Browserfenster ist.

0

Eddie-Vollgas15.12.1110:04

dreyfus

Mit dem Canvas Element in HTML5 kannst Du die Dreiecke auch dynamisch mit JavaScript zeichnen, dann ist es völlig egal wie groß das Browserfenster ist.

Gut der Mann!

feitzi

Dann hätte ich aber links und rechts weiß ränder oder?

Frage: wie weit reichen Deine Kenntnisse in HTML & Co?

0

feitzi15.12.1110:31

dreyfus

Mit dem Canvas Element in HTML5 kannst Du die Dreiecke auch dynamisch mit JavaScript zeichnen, dann ist es völlig egal wie groß das Browserfenster ist.

danke, das schaut ziemlich nach dem aus was ich suche.

Eddie-Vollgas

feitzi

Dann hätte ich aber links und rechts weiß ränder oder?

Frage: wie weit reichen Deine Kenntnisse in HTML & Co?

mit den Grundlagen bin ich vertraut aber irgendwie muss man ja mal anfangen

0

feitzi15.12.1110:49

Wenn ich das jetzt mit Canvas mache dann schliesse ich doch viele User aus.

0

Eddie-Vollgas15.12.1111:10

Grundsätzlich, ohne jetzt Deine Idee zu kennen, würde ich immer ein Layout bevorzugen, welches für alle Betrachter gleich aussieht. Wenn ich also ein DIV Content von 900px mittig platziere, den Background und den Content farblich anpasse, sollte die grafische und technische Ausprägung gegeben sein.
Da man ja immer davon ausgehen muss, dass Bildschirmbreiten von 800px bis (oh je, nu kommen auch noch Retina´s dazu) über 2000px, ist das Erscheinungsbild immer recht unterschiedlich und nicht immer schön. Daher wird in der Regel versucht mit festen Breiten ein einheitliches Erscheinungsbild zu schaffen.
Ausnahmen bestätigen die Regel
Aber vielleicht verfolgt da jeder seine eigene Philosophie

0

feitzi15.12.1111:26

Eddie-Vollgas

Grundsätzlich, ohne jetzt Deine Idee zu kennen, würde ich immer ein Layout bevorzugen, welches für alle Betrachter gleich aussieht. Wenn ich also ein DIV Content von 900px mittig platziere, den Background und den Content farblich anpasse, sollte die grafische und technische Ausprägung gegeben sein.
Da man ja immer davon ausgehen muss, dass Bildschirmbreiten von 800px bis (oh je, nu kommen auch noch Retina´s dazu) über 2000px, ist das Erscheinungsbild immer recht unterschiedlich und nicht immer schön. Daher wird in der Regel versucht mit festen Breiten ein einheitliches Erscheinungsbild zu schaffen.
Ausnahmen bestätigen die Regel
Aber vielleicht verfolgt da jeder seine eigene Philosophie

ich danke mal für deine Unterstützung. Ich werde das ganze nochmal von neu auf überdenken.

0

lex15.12.1111:56

Zudem kann man Grafiken abhängig von der Screen-Grösse in reinem CSS skalieren.

Kurzer Ausschnitt aus einem CSS, das ich verwende:

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

0

Kommentare

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.