Webseite automatisch jeweiligen Bildschirmauflösung anpassen lassen

gillesdoran · 28. August 2014

Hallo Zusammen!

Ich bin neu hier und habe beinahe keine Erfahrung mit HTML oder CSS oder oder... Ich habe eine Webseite mit Adobe Muse erstellt und habe zu Schluss festgestellt, dass sie sich nicht automatisch an die jeweiligen, unterschiedlichen Bildschirmauflösungen anpasst.
Ich habe schon viel gegooglet. Habe schon versucht solche "center"-container zu programmieren und dann diese <div> Elemente darin mit margin=auto automatisch zentrieren zu lassen (dazu habe ich die Adobe Muse datei als HTML exportiert und in Dreamweaver versucht zu bearbeiten, bekam beinahe Zustände als ich die 400 Zeilen mit all diesen Zeichen gesehen habe hahahaha hab mir gedacht wie man sowas verstehen sollte :)). Da ich aber sehr wenig Ahnung von dem Zeug habe, ging das irgendwie schief und alles klebte am Rand.

Könnt ihr bitte helfen? Hab so viel Zeit in diese Webseite gesteckt und nun droht alles zu zerfallen

Danke für eure Antworten!!

Gruss

The Scout · 28. August 2014

Nun, um hier mal den Bösen zu spielen:

Aktuelle Seite in die Tonne treten
Sich überlegen, wie die Seite aussehen soll, am Besten eine Grafik erstellen
Das HTML Seminar durcharbeiten und verstehen
Den PHP Kurs durcharbeiten und verstehen
Die Seite ohne WYSIWYG Editor sondern zB mit Notepad++ oder Sublime Text neu selber schreiben

Dabei wird dir hier auch gerne und viel geholfen

lauras · 29. August 2014

Mich wundert, dass Muse dir eine nicht-responsive Website rausspielen sollte, denn eigentlich ist das ja so ein bisschen das Aushängeschild des Programms.. Falls du keine Lust/Zeit hast, den Vorschlag von The Scout umzusetzen (was ich dir aber empfehlen würde), lade die Website mal irgendwo hoch, dann schauen wir mal kurz drüber, vielleicht ist es nur eine Kleinigkeit.
Grundsätzlich ist das hier natürlich ein Hilfe-Forum für Leute die HTML & Co. lernen - sprich wenn du das nicht willst, bist du hier evtl. falsch

gillesdoran · 29. August 2014

Danke für euere Antworten ich werde euren Rat befolgen:) Habe mich versucht ein bisschen ins Thema einzulesen:) Nun meine Frage:

Ist es korrekt, wenn ich versuche die einzelnen <div> Elemente in Container zu packen und diese Container dann in der Css Datei mit 100% breite zu definiere und die "margin" auf auto zu setzte?

Adobe Muse hat eine sehr unübersichtliche Html erstellt, wie kann ich hier die einzelnen Elemente unterscheiden?

Ein kleiner Ausschnitt:

HTML

</div>
<div class="clip_frame grpelem" id="u1902">
    <!-- image -->
    <img class="block" id="u1902_img" src="images/unbenannt-1.jpg" alt="" width="2121" height="423" />
</div>
<div class="grpelem" id="u1985">
    <!-- simple frame -->
</div>
<div class="clearfix grpelem" id="u1984">
    <!-- group -->
    <div class="clip_frame grpelem" id="u1401">
        <!-- image -->
        <img class="block" id="u1401_img" src="images/logo.png" alt="" width="569" height="132" />
    </div>
</div>
<div class="browser_width grpelem" id="u1908-bw">
    <div id="u1908">
        <!-- group -->
        <div class="_u1908 f9s_top_left" id="_u1908-f9s_top_left">
            <div class="_u1908 f9s_top_right" id="_u1908-f9s_top_right">
                <div class="_u1908 f9s_top_mid" id="_u1908-f9s_top_mid"></div>
            </div>
        </div>
        <div class="_u1908 f9s_mid_left" id="_u1908-f9s_mid_left">
            <div class="_u1908 f9s_mid_right" id="_u1908-f9s_mid_right">
                <div class="_u1908 f9s_center" id="_u1908-f9s_center">
                    <div class="clearfix" id="u1908_align_to_page">
                        <div class="clearfix grpelem" id="u1941">
                            <!-- group -->
                            <img class="grpelem" id="u1942-4" alt="Get Started" width="281" height="59" src="images/u1942-4.png" />
                            <!-- rasterized frame -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_u1908 f9s_bot_left" id="_u1908-f9s_bot_left">
            <div class="_u1908 f9s_bot_right" id="_u1908-f9s_bot_right">
                <div class="_u1908 f9s_bot_mid" id="_u1908-f9s_bot_mid"></div>
            </div>
        </div>
    </div>
</div>

Alles anzeigen

Vielen Dank!

The Scout · 29. August 2014

Zum ersten: DIVs sind selber schon Container, gib ihnen eine Klasse oder eine ID und sprich die DIVs in deiner CSS an.

Zum zweiten: So, wie diser Ausschnitt aussieht, würde ich dir DRINGEND empfehlen, wirklich meinen Rat aus meiner ersten Antwort zu befolgen

wolf · 29. August 2014

Wenn ein Element 100% breit ist, wo soll den da noch margin sein?
Margin auto würde bei einer box die KLEINER als das außenrum ist, bewirken das es in die mitte Rutscht, d.H. z.B.:

CSS

body{
    witdh: 100%;
    max-width: 2000px;
    margin: auto;
}

So ein Aufbau wäre (y)

Webseite automatisch jeweiligen Bildschirmauflösung anpassen lassen

Jetzt mitmachen!

Teilen