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

Seite verschoben bei anderer Auflösung

Z

Zyt90

Neues Mitglied
Moin,

das ist mein erster Beitrag in diesen Forum, also seht mir bitte ein paar Fehler nach.

Mein Problem ist, dass ich meine HTML Seite morgen in der Schule vorstellen und abgeben muss.

Ich habe auf meinem Heim Pc eine interne Webseite erstellt. Leider verschiebt sich die komplette Seite bei anderer Auflösung ( auf anderen Computern oder beim Zoomen im Browser ). Ich habe versucht eine Lösung zu googleln, aber konnte leider nichts hilfreiches finden. Ich habe nicht die Zeit, die komplette Seite neu zu machen.

Habe gelesen, dass es an position: absolute liegen koennte.

Hab mal einen Screenshot von der Problematik gemacht

Bitte euch also um schnelle Antworten

Vielen Dank im voraus
 

Anhänge

  • Webseite.png
    Webseite.png
    320,9 KB · Aufrufe: 6
Hallo

Um dir helfen zu können benötigen wir den Quelltext (HTML und CSS) sowie die Bilder. Am besten ist ein Link zu der Seite.

Habe gelesen, dass es an position: absolute liegen koennte.
Zum Vergrößern anklicken....

Ja, das ist erfahrungsgemäß eines der Probleme.

Außerdem benötigen wir eine Beschreibung wie sich die Seite überhaupt verhalten soll.

Gruss

MrMurphy
 
Die Seite ist intern, also offline ( ist ein Schulprojekt )
Ich füge mal den Code einer Seite ein, die sind alle ähnlich aufgebaut.

Es geht dabei nicht um die Richtigkeit der Seite, sondern nur um das Positionieren.
Code: 
<html>
<head>
<title> Startseite </title>
<meta charset="utf-8">
<meta name=author content=xxxxx>
<meta name=description content=Auf dieser Seite werde ich mich, Danny Kläwke, vorstellen.>
<meta name=keywords content=xxx, xxx, Wassersport, Fotografie>
<meta name=robots  content=noindex

</head>
<body bgcolor="black">
<div style="position: relative">
<font face=Aríal">
<header>
<center>
<h1><b><u><font color="white">Das ist meine Kontaktseite</u></b></h1>
<img src="Bilder/StartseitenBild.Jpg"height="350" width="1199>"</img>
</CENTER>
</header>
<main>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: table;
    margin-left: auto;
    margin-right: auto;}

li {float: left;}

li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}

li a:hover:not(.active) {background-color: #111;}
.active {background-color: #4CAF50;}
</style>
</head>
<body>
<ul>
  <li><a href=indexdanny.html>Startseite</a></li>
  <li><a href=UeberMich.html>&Uumlber Mich</a></li>
  <li><a href=SocialMedia.html>Social Media</a></li>
  <li><a class="active" href=Kontakt.html>Kontakt</a></li>
  <li><a href=Impressum.html>Impressum</a></li>
</ul>
<br><br><br><br>
<p style="position: relative;font-size:x-large;color:red;left:350px">Kontakt</p>
<p style="position: relative;left:350px;right: 1000px;top:0px;bottom:0px;">


&Uuml;ber diese Informationen k&ouml;nnt Ihr mich kontaktieren.<br><br>

xxxxxxx<br>
Musterstra&szlig;e 1<br>

D-12345 Musterort <br>
Tel: +49(0)12345678<br>
Fax: +49(0)87654321<br>
</p>

<form  style="position: absolute;left:1000px;right:1000px;top:650px;bottom:100px;width:80%;lenght:50" id="kontaktformular" name="kontaktformular" action="">
<div>
  <label for="absender">Ihre E-Mail-Adresse:</label>
  <input type="text" id="absender" name="absender" />
</div>
<div>
  <label for="nachricht">Ihre Nachricht:</label>
  <textarea id="nachricht" name="nachricht" cols="20" rows="5"></textarea>
</div>
<div>
  <input type="submit" value="Abschicken" />
</div>
</form>
  <div style="position:absolute;left:780px;right:800px;top:1280px;bottom:0px;">
<form target="_blank" method="GET" action="http://www.google.de/search; ">
<table><tr><td>
<input TYPE="text" name="q" size="25" maxlength="255">
<input TYPE="hidden" name="q" value="">
<input TYPE="hidden" name="hl" value="de">
<input type="submit" name="btnG" VALUE="Google Dich!">
</td></tr></table>
</form>
</div>
<footer style="position:absolute;left:750px;right:800px;top:1300px;bottom:0px;">
  <p>Das ist mein Footer. Schaut gerne in mein: <a href=Impressum.html>Impressum</a></p>
</footer>
</p>
<br><br><br><br>
</div>
</body>
</html>


EDIT : DER <div style="position: relative"> TEIL IST VON MIR , WEIL ICH GERADE AM RUMPROBIEREN BIN
 
Hallo

Es geht dabei nicht um die Richtigkeit der Seite, sondern nur um das Positionieren.
Zum Vergrößern anklicken....

Das hängt aber zusammen. Wenn der Quelltext Fehler enthält kann das gewünschte Layout einer Webseite nicht funktionieren.

Und deine Seite enthält leider sehr viele sachliche Fehler die korrigiert werden müssen.

Code: 
<html>

Der Doctype fehlt.

Code: 
<head>
   <title> Startseite </title>
   <meta charset="utf-8">

Die charset-Angabe sollte direkt hinter dem head-Element erfolgen. Auf unnötige Maskierungen sollte dann auch verzichtet werden.

Code: 
<meta name=robots content=noindex

Diese Angabe ist nicht korrekt geschlossen.

Code: 
  <body bgcolor="black">

Das body-Element wird zweimal geöffnet obwohl es nur einmal vorhanden sein darf.

Code: 
<div style="position: relative">

Inline-CSS sollte grundsätzlich im gesamten Quelltext vermieden werden.

Code: 
<center>

Das center-Element ist veraltet und sollte (darf) nicht mehr verwendet werden.

Code: 
<h1><b><u><font color="white ">Das ist meine Kontaktseite</u></b></h1>

Die b- und u-Elemente haben eine semantische Bedeutung und dürfen nicht verwendet werden um ein bestimmtes Aussehen (fett, unterstrichen) zu erreichen. Das font-Element ist veraltet und wird zudem nicht geschlossen.

Code: 
<img src="Bilder/StartseitenBild.Jpg "height="350 " width="1199>"</img>

Für das img-Element gibt es kein schließendes Tag. Die width-Angabe enthält einen Fehler.

Code: 
<style>

Das style-Element mit dem inside-CSS gehört in den head-Bereich.

Code: 
<br>

Das br-Element sollte nicht verwendet werden um Abstände zu erzeugen.

Code: 
<main>

Das main-Element wird geöffnet aber nicht geschlossen.

Code: 
</head>

Das head-Element wird zweimal geschlossen obwohl es nur einmal geöffnet wird.

Und noch einiges mehr.

Außerdem fehlt noch die Information wie sich die Seite bei anderen Fenstergrößen überhaupt verhalten soll.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben