Webseite für alle Auflösungen gleich anzeigen

Unregistriert

Guten Tag,

ich betreue in meiner Freizeit mehrere Webseiten. Nun habe ich eine Anfrage erhalten ob es nach heutiger Codeentwicklung machbar ist, eine Webseite so ziemlich gleich auf allen Auflösungen aussehen zu lassen. Ich habe bisher auch noch keine Webseite entdecken können die das möglich macht.

An die Porifs unter euch: kennt jemand ein gutes Tutorial wo beschrieben wird wie das Stylesheet auszusehen hat. Und wenn ja dann darf nur eine style datei benutzt werden.

BITTE UM HILFE, habe seit Wochen versucht ein Ergebnis zu erzielen allerdings ohne Erfolg.

[Name anonymisiert]

Dodo

Du musst immer Bedenken, dess es nicht nur auf die Auflösung an,kommt. Ein größerer Bildschirm hat nunmal eine größere Auflösung.
Du kannst eine Website (fast) immer gleich anzeigen lassen, wenn nur nur mit Prozentangaben arbeitest, wovon ich dir aber abrate.
Wenn jemand auf einem FullHD-Breitbild-Giganten arbeitet und du ihm eine 1024:768-Auflösung zeigst, sieht es recht... seltsam aus... Vice versa.

Unregistriert

Hallo Dodo, danke für deine Antwort! Das wie und weshalb spielt in meinem Fall erstmal die geringere Rolle, ein Kunde hätte das gerne so.

Wieso bekommt man das nicht hin das es überall gleich aussieht, hauptsächlich soll der vertikale Scrollbalken nicht mehr erscheinen.

Wie müsste das Stylesheet denn grob aussehen, ich habe da einfach keine Vorstellung von und muss es unbedingt umsetzen. Kunde ist König und bezahlt auch dafür.

Gibt es deswegen keine Webseiten die auf Handy und HD Flachbildschrimen nur horizontal zu scrollen sind?

Ich verstehe es wohl auch nicht so ganz, denn es gibt soviele die auf Handy Seiten schauen oder an Ihren Rechner einen Fernseher anschliessen und es muss doch für alle zumindest zu optimieren sein?

[Name anonymisiert]

alxy

Wie Dodo sagte, % ist die Lösung!

Du arbeitest am besten ohne Container.
Das Menü wird einfach über die gesamte breite (bei horizontalem) gespannt.

Tobse

Du kannst die Webseite ziemlich klein optimieren, so für 800x600 und sie dann bei allen größeren auflösungen zentrieren

Code

margin: auto;

Allerdings sähe das dann z.B. bei mir (1680x1050) ziemlich blöd und gequetscht aus.
Ansonsten bleiben dir eben die % angaben, ist aber kein spaß, nur das du vorgewarnt bist.

Unregistriert

Hallo, das wiederspricht aber doch der Philosophe der Webseite ansich, Inhalt transportieren, Design ist zweitrangig

[Name anonymisiert]

Unregistriert

Hallo, ich habe es nun soweit hinbekommen das alles in % ist, nur ich kriege das ul#steuerung nicht horizontal nebeneinander, ich stelle das stylesheet mal dazu Kennt da jemand eie lösung?

Code

* {margin: 0; padding: 0;}


body {
    width: 100%;
    font: 0.8em verdana, arial sans-serif;
    line-height: 2.2em;
}
h1 {
    color: #000033;
    text-decoration: underline;
}
#header {
    height: 180px;
    background: url(bilder/head.jpg);
}
#header p {
    color: #000033;
    text-align: right;
    padding: 1.1em 1.2em 0 0;
    font-size: 2.2em;
}
ul#steuerung {
    height: 29px;
    text-align: center;
    word-spacing: 1.9em;
}
ul#steuerung li {
    display: inline;
    list-style-type: square;
}
ul#steuerung li a {
    text-decoration: none;
    color: #000033;
    background: #FFCB9C;
    font-size: 1.1em;
}
ul#steuerung li:hover {
    list-style-type: none;
}
#inhalt {
    padding: 2em;
    margin: 2.4em;
}
ul#footer {
    height: 29px;
    padding: 1em;
}
ul#footer li {
    display: inline;
    padding-left: 1.7em;
}
ul#footer li a {
    color: #003366;
    text-decoration: underline;
}
ul#footer li a:hover {
    text-decoration: none;
}

Alles anzeigen

Wenn die HTML Seite auch von Nöten ist bitte bescheid sagen

[Name anonymisiert]

Tobse

Wem willst du eine Webseiten basteln wenn du nichtmal float kennst? Das wird so nix.

Unregistriert

Hallo, es soll auch nicht steuerung links und bereich inhalt rechts sondern header 100% breite, steuerung 100% breite inhalt 100% breite und footer 100% breite. Daher wurde in diesem fall kein float verwendet. ich weiß durchaus wie float verwendet wird und habe es durchaus auch schon versucht bereich ul#steuerung zu links zu floaten, bereich inhalt auch links und den footer gecleart. Aber das ist ja nicht das was ich haben möchte. Bitte den ersten Beitrag lesen

Tobse

Was ist damit?

HTML

<ul id="horizontaleListe">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
</ul>
<br style="clear:both;">

Code

#horizontaleListe li {
    display: inline-block;
    float: left;
    margin-right: 10px;
}

Unregistriert

Hallo, bringt leider auch nicht den gewünschten Ergebnis. Die Steuerung überlappt den Inhalt bei weniger Platz

[Name anonymisiert]

Unregistriert

Hallo, ich habe für mich nun folgende Lösung gefunden:

Code

min-width: 240px;
width: 94%;
max-width: 1800px;
margin: 0 auto;

Das ganze habe ich dem zentralen Div im Stylesheet mitgegeben. Ich finde das ganze entsprechend meinem vorgegebenem Design gar nicht mal schlecht.

[Name anonymisiert]

Tags