Text verschiebt sich bei verschiedenen Fenstergrößen

html.de-Forum HTML, XHTML & CSS
1

Hallo also ich bin noch ein totaler Noob wenn es um HTML geht und programmiere erst seit einer Woche Html/Css.
Mein Problem ist, dass wenn man das Browserfenster vergrößert oder verkleinert , meine Links zu den nächsten Seiten komplett verschoben werden. Und wenn man die Seite mit STRG+Mausrad vergrößert dann wird die komplette Struktur zerstört.

Ich würde mich über Hilfe sehr freuen, da ich seit drei Tagen daran verzweifle und die meisten Forumbeiträge habe ich nicht ganz verstanden wo es gelöst wurde. Ich habe meine ganze Internetseite hier hochgeladen:
https://www.file-upload.net/download-12602201/FrauMucha.rar.html

Am besten ihr nehmt Google Chrome und passt die Sicht mit STRG+Mausrad auf 75% an, denn so soll die Internetseite dann eigentlich aussehen.

Ich bin dankbar für jede Antwort
MFG Infictible

2

Hallo

Dein Grundproblem ist dass du noch immer dem Papierdenken verhaftet bist. Webseiten haben mit Papierseiten aber nur sehr wenig gemeinsam. Siehe zum Beispiel

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Heißt: Du willst wie auf Papier die Informationen an festen Positionen hinterlegen.

Da Webseiten aber im Gegensatz zu Papier keine Größen haben kann das nicht funktionieren.

Im Gegensatz zu Papierseiten bestimmen die Besucher das Aussehen der Seiten. Einerseits durch ihre Hardware, ihren Browser, die vorhandenen Schriftarten. Andererseits auch durch persönliche Einstellungen, wie dem Ändern der Browserfenstergröße, Ändern des Zoomfaktors oder auch Überschreiben der CSS-Angaben auf die unterschiedlichsten Arten. Hinzu kommen auch User und Maschinen, die keinen Bildschirm nutzen können.

Heißt: Du kannst nur einen Layoutvorschlag mitgeben, musst aber dafür sorgen dass auch alle Besucher an die Informationen kommen, die deinen Layoutvorschlag nicht benutzen wollen oder können.

Deshalb solltest du zum Beispiel auf position: absolute verzichten. Das ist heutzutage nur noch in Ausnahmefällen sinnvoll, die ich auf deiner Webseite nicht erkenne.

Hintergrundbilder wie deines sollten mittels CSS oder SVG erstellt werden.

Ein weiterer typischer Anfängerfehler ist viele Webseiten mit wenig Inhalt zu erstellen. Für Besucher ist schlicht nervig immer wieder neue Seiten aufrufen zu müssen die kaum Informationen enthalten.

Gruss

MrMurphy

3

Das Problem ist, dass du deinen Seite komplett mit margins angegeben hast. Wie soll sich etwas mitverschieben, wenn alles einen festen pixelwert hat?

Bevor ich mir die Mühe mache, mal zu korrigieren einen Rat von mir.
Ich rate von dem Aufbau der Website ab, dass wird sonst ganz schön haarig, wenn du eine mobile Version erstellen willst.

Es ist üblich und auch wichtig, auf der Startseite schon ein paar Infos zu geben.
https://www.frachtagentur-krüger.de/test/Unbenannt.jpg

Wie gesagt ist nur ein Beispieldesign.

@MrMurphy Du hast vollkommen recht. Ich war aber interessiert und habe es trotzdem mal hinbekommen NUR mit position absolute alles richtig einzurücken. Es ist so umständlich… lass es lieber.

[HTML]

Klavierunterricht Irene Mucha 
    <!-- CSS Definition -->
    <link rel="stylesheet" type="text/css" href="Stylesheet.css">   

    <!-- Meta-Angaben -->
    <meta http-euqiv="content-language" content="de">
    <meta name="keywords" content="Klavierunterricht, Mucha, Irene, Hiltrup, Musik, Musikschule">
    <meta "author" content="Alvin Jasic">


</head>

<body>
    <div class="main-div">
        <a id="Startseite" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Startseite.html">Startseite</a>
        <a id="Umich" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Umich.html">&Uuml;ber Mich</a>
        <a id="Unterricht" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Unterricht.html">Unterricht</a>
        <a id="Preise" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Preise.html">Preise</a>
        <a id="FAQ" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/FAQ.html">FAQ</a>       
        <a id="Kontakt" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Kontakt.html">Kontakt</a>
        <a id="Credits" href="file:///C:/Users/Alvin/Desktop/Frau%20Mucha/Credits.html">Impressum</a>
        <h1 id="Haupttext">Willkommen</h1>
        <h1 id="anderes">bei Klavierlernen mit Irene Mucha!</h1>

        <!-- Bilder -->
        <img src="images/Mucha.jpg" class="foto" alt="Bild konnte nicht geladen werden!">
    </div>
</body>
[/HTML]

[HTML]*{
padding: 0; margin: 0;
font-family: Arial
}

.main-div {
width: 100%;
height: 100vh;
background-image: url(background.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: 100%;
}

.main-div a {
font-size: 2.3vmax;
text-decoration: none;
position: absolute;
color: #cc0000;
margin-left: 15.3%;
}
/* Buttons */
#Startseite {
margin-top: 5.7%;
}

#Umich{
margin-top: 11.15%;
}

#Unterricht{
margin-top: 21.8%;
}

#Preise{
margin-top: 27%;
}

#FAQ{
margin-top: 32.4%;
}

#Kontakt{
margin-top: 43.15%;
}

#Credits{
margin-top: 48.5%;
}

/* Texte */

#Haupttext{
position: absolute;
margin-top: 10%;
margin-left: 35%;
font-size: 4vmax;
text-align: left;
}

#anderes {
position: absolute;
margin-top: 16%;
margin-left: 40%;
font-size: 3vmax
}

img.foto {
position: absolute;
width: 20%;
margin-left: 50%;
margin-top: 36.2%;
}

@media screen and
(min-width: 0) and (max-width: 930px) {
.main-div a {
font-size: 2.3vmin;
}

#Haupttext {
    font-size: 4vmin;
}

#anderes {
    font-size: 3vmin;
}

}[/HTML]

Nochmal: Es ist davon abzuraten, diesen Code zu benutzen. Höre lieber auf MrMurphy und versuch es nochmal richtig :wink: