• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Homepage Anpassung an Browser

A

apache2131

Neues Mitglied
Hallo,

ich weiß, dass zu der Frage bereits ein Thema gibt, jedoch wurde dieses geschlossen. Und zwar wollte ich fragen, wie ich die Auflösung meiner Website so einstelle kann, dass sie auf jedem Monitor ohne Scrollbalken nach links und rechts und ohne schwarzen Hintergrund angezeigt wird.

Hier der Link

Vielen Dank im Vorraus!
 
Prinzipiell lediglich die Tabelle beziehungsweise eben alles, was mit dem „Grundgerüst“ der Seite zu tun hat. Also, du kannst relative und absolute Maßangaben beliebig vermischen und etwa eine Schriftgröße in Pixel und eine Spaltenbreite in Prozent angeben. Ich nehme an, darauf zielte deine Frage ab.
 
Und wie mache ich das mit der Spry Menu Bar. Denn diese wird, wenn ich alle anderen Bereiche mit % versehe, nicht größer.

Könnte ich das ganze auch mit einem seperaten Java-Script machen?

Vielen Dank im Vorraus
 
Wobei ich sagen muss, dass wenn ich eine % Angabe mache, es auf jedem Bildschirm eine andere Darstellung hat. Alternativ könntest du den X-Achsen Scrollbalken Deaktivieren, aber das ist wohl eine unschöne Lösung.
 
Ich schaff es einfach nicht.
Ich habe versucht, die px Werte in % abzuändern, doch entweder es kommen schwarze Balken oder die Spry Menu Bar verschiebt sich beim verkleinern.

Hat jemand eine Idee, wie man das hinbekommt?
Hier der Link für die Seite (Quellcode wisst ihr ja, wie man den bekommt)

Danke im Vorraus
 
Mir ist nicht ganz klar, wie du dir das genau vorstellst. Wenn du möchtest, dass sich alle „Layout“-Bestandteile der Seite prozentual an die Viewport-Breite anpassen, musst du ihre Breiten jeweils in Prozent angeben. Dazu sei aber gesagt, dass Browser nicht so richtig gut in Berechnungen mit Kommazahlen sind.

Beispiel:

Eine Menüleiste mit 4 Einträgen, die jeweils ein Viertel des Platzes einnehmen, soll sich über 60 % der zur Verfügung stehenden Viewport-Breite erstrecken. Der Viewport wird nun mit der Maus auf eine Breite von 950 px gezogen. Das gibt dem Menü einen Raum von 570 px. Die 25 % davon, die jedes Menüelement einnehmen soll, betragen 570 px / 4 = 142.5 px. Jedes Menüelement soll also 142.5 px breit sein. Halbe Pixel sind auf normalen Bildschirmen allerdings nicht darstellbar.

Der Client hat nun die Wahl, ob er 142 px oder 143 px annehmen möchte. Nimmt er 142 px an, entsteht rechts vom Menü ein Rand von 2 px. Nimmt er 143 px an, rutscht vermutlich das letzte Menüelement in die nächste Zeile, da es nicht mehr in den Bereich von 570 px passt.

In der Realität sind die Berechnungsalgorithmen etwas komplexer, aber das grundsätzliche Problem existiert und sollte bedacht werden.​

Ich würde zum Beispiel empfehlen, ein Hintergrundbild über den gesamten Viewport zu legen (siehe Link im vorherigen Post) und für den Inhaltsbereich mit min-width und max-width zu arbeiten.

In etwa so (habe die CSS3-Variante genommen, wird nur in einem neuen Browser klappen):

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">
html {
    background: url(http://upload.wikimedia.org/wikipedia/commons/0/0e/Corot_Rome_View_from_the_Farnese_Gardens.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    padding: 50px;
    font-family: Garamond, Georgia, 'Times New Roman', serif;
}

.wrapper {
    min-width: 400px;
    max-width: 1000px;
    padding: 20px;
    border: 5px solid #ccc;
    margin: 0 auto;
    background: white;
}
        </style>
    </head>

    <body>

        <div class="wrapper">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
        </div>

    </body>

</html>
 
Ich habe das halt mit Photoshop slicen lassen. Aber ich werde mal versuchen die Randbilder wegzumachen und dafür ein komplettes Hintergrundbild einzustellen. Jedoch habe ich auch das Logo und die Links oben slicen lassen.

Aber so wie es aussieht, habe ich keine andere Wahl...
 
apache2131 schrieb:
Aber so wie es aussieht, habe ich keine andere Wahl...
Zum Vergrößern anklicken....

Meines Wissens jedenfalls keine simpel umzusetzende andere Wahl. Ich habe vorhin mal probiert, eine Grafik (gegebenenfalls verzerrt) eine gesamte Tabellenzelle ausfüllen zu lesen, habe es aber mit „Bordmitteln“ (kein JavaScript, keine bisher nicht verbreiteten CSS-Eigenschaften) nicht hinbekommen.

Ich will nicht ausschließen, dass es geht (vielleicht sogar mit einem der in Beitrag #11 verlinkten Tricks).

Auch mit JavaScript kannst du im Grunde beliebig auf eine veränderte Viewport-Größe reagieren und allen relevanten Elementen explizit berechnete Werte zuweisen. Um im Beispiel von oben zu bleiben: Du lässt nicht den Browser entscheiden, ob er ein Element 142 px oder 143 px breit darstellt, sondern du nimmst die 570 px her und teilst sie durch einen eigens geschriebenen JavaScript-Algorithmus so auf, dass manche Elemente 143 px und manche 142 px Breite erhalten.

Na ja, was ich sagen will: Mit deinem derzeitigen gesliceten Aufbau wird es ein ziemliches Gefrickel ergeben. Selbst wenn es möglich wäre, es so hinzubiegen, wie es dir vorschwebt, glaube ich nicht, dass der Aufwand den Nutzen rechtfertigt. Ich würde auf ein überschaubareres Layout setzen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben