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

Homepage Größe automatisch an Bildschirm Größe/Auflösung anpassen.

D

djsteve

Neues Mitglied
Hey

Ich bin dabei eine Homepage mit Magix Web Designer zu erstellen bzw zu vollenden. Allerdings weis ich nicht wie man das macht dass sie die Seite automatisch wenn man zb Firefox an den rand zieht der Größe des Fensters anpasst oder wenn man zb einen 24" Bildschirm hat sie nicht so klein ist. Oder gibt es ein HTML Code den ich in die Index Datei eingeben muss? Wenn ja in welche Zeile?

Gruss
 
HTML: 
<html>
<head>
</head>

<body>
<div class="container">
SEITENINHALT
</div>


</body>

</html>

[CSS]
.container {
width: 920px;
margin: 50px auto;
padding: 0 42px;
background-repeat: no-repeat;
background-position: center 0px;
}
[/CSS]

so hab ich es gelößt, egal bei welcher bildschirmauflösung / größe, bleibt die seite immer in der mitte und gleich groß, falls du sowas gesucht hast
 
Denke mal das war es, Danke. Hatte die Homepage auf eine Größe gemacht dass es bei kleineren Bildschirmen gut aussieht aber bei großen 24" ist es einfach zu klein. Was sind die Standardmaße die ich für eine Homepage nehmen sollte? Dann design ich es schnell neu und schau mal wie es aussieht mit deinem HTML Code.
 
Naja, wenn man bedenkt das fast jeder 1280x1024 auflösung hat, würde ich auch diese maße sagen.

Ich glaub du weist nicht was dieses "div" bezwecken soll :D
Das grenzt sozusagen die hompage ein.
Zu sehen auf meiner seite

Tempxon || News, Games and more.

Ich habe auf meiner hompage eine breite von 920px.
Wie oben zu sehen ist "width: 920px;"

Ob es das ist was du suchst ist allerdings eine andere frage
 
Ey deine Seite ist perfekt. Die nächste frage wo ich stellen wollte wäre wie man einen slider mit HTML einrichtet. Wie hast du den gemacht? Kannst du das? Oder mit welchem Programm hast du deine Homepage gemacht?
 
Programm nennt sich macromedia Dreamweaver ;D
Leider nur 2004er Version :'(

Und zum Slider: Davon findest du im internet sehr sehr viele, bassieren alle auf Javascript / jquery ^^, ob welche mit HTML gehen weis ich garnicht, da ich im Kopf habe = HTML = Nicht Dynamisch :D sondern statisch :D
 
Ja stimmt die gehen ja über Javascript. Werde mal nach dem Programm schauen und bisschen damit arbeiten und ein neues Design mit den Maßen von dir erstellen. Hab dich als Freund hinzugefügt. Wenn ich fragen habe denke kann ich mich an dich wenden.

Danke
Gruss
 
Hi, ich weiß es ist ein alter thread, aber genau das suche ich, ich würde gerne meine HP so machen das sie auf jeder Auflösung in Vollbild ist, aber es klappt irgendwie nicht, da sie für FHD ausgelegt war, hatte die HP mit Photoshop und Dreamweaver geamcht ... wollte sie jetzt mal etwas überarbeiten und habe das thema gefunden und denke es könnte mir helfen, nur weiß ich nicht wie ich die css datein über den index ansprechen soll. sorry aber ich bin nicht all so firm im HP bauen

www.mg4l.de

das ist die Seite um die es geht
 
wie gesagt ich bin nicht all so firm darin, ich habe mir in paar tagen damals das nötigste zusammen gelesen um etwas zu machen damit unsere community ne hp hat, wollte jetzt nach 3 jahren mal wieder drüber gehen, weil sich ja auch einiges mit auflösung getan hat, darum die frage, aber danke ich werde mich mal da durch fuchsen

EDIT
-------

Die schlampigen fehler sind behoben, der code sollte soweit sauber sein, nur checke ich es immer noch nciht mit dem skalieren ...
 
Zuletzt bearbeitet:
wiesbadenfinest schrieb:
der code sollte soweit sauber sein
Zum Vergrößern anklicken....
Ehrlich?... hast du den Code nochmal durch den Validator prüfen lassen?
Mir werden da weiterhin 13 Fehler angezeigt - die meisten davon sind allerdings dadurch hervorgerufen, dass du offensichtlich kein CSS verwendest sondern alles irgendwie mit 'veralteten' Inline-Formatierungen machst. Oder ist das der Dreamweaver, dann solltest du dich schnell von diesem Programm verabschieden!
Auf jeden Fall solltest du aber den DOCTYPE richtig machen...
<!DOCTYPE psd> ist falsch... das muss <!DOCTYPE html> sein (gleich die erste ERROR-Meldung im Validator).
Im übrigen ist dein Wunsch mit deinem derzeitigen Layout nicht umzusetzen - du solltest die Seite eigentlich einmal komplett neu machen, sonst hast du und die Besucher deiner Seite auf Dauer keinen Spaß damit.
Warum?
Die Seite basiert zu 100% auf eine Tabellen-Layout. Das ist ein No-No... Tabellen werden nur für die Darstellung von tabellarischen Daten verwendet (so was wie ein Stundenplan oder eine Preisliste). Tabellen lasen sich kaum bis gar nicht an unterschiedliche Bildschirmgrößen anpassen - für mobile Endgeräte schon mal gar nicht.

Die meisten deiner Elemente sind Bilder, die im Code mit festen Größenangaben (height / width) versehen sind - das ist ein echter 'Killer', denn egal wie du es machst, bei Größenänderung des Displays stimmt das dann vorne und hinten nicht mehr. Die Bilder verzerren (weil das Höhen- Seitenverhältnis nicht mehr stimmt) oder werden an den Rändern abgeschnitten.

Auf die Schnelle gib es keine richtige Lösung für dein Problem... außer neu und dann gleich richtig machen!

Als Notlösung.. bis du was Richtiges hast... könntest du versuchen den folgenden CSS Code in deine Seite einzufügen...
CSS: 
* {
  box-sizing: border-box;
}
html, body {
  width: 100% !important;
  max-width: 1940px !important;
  overflow: auto !important;
  margin: 0px auto;
  padding: 0px;
}
img {
  width: 100%;
  max-width: 1940px;
}
iframe {
  max-width: 100%
}

Wie das mit dem Einfügen von CSS im Dreaweaver geht musst du allerdings selbst herausfinden... damit kenne ich mich nicht aus.
Wie gesagt, das ist keine wirkliche Lösung, sondern höchstens ein Notbehelf - wo die Probleme liegen, wirst du erkennen, wenn du die Größe des Browserfensters veränderst.
 
Ja es ist mit DW gemacht worden
und wie gesagt, ich habe es nicht gelernt und sonstiges, ich habe mir in kürzester zeit das nötigste angeeignet um eine recht funktionierende Seite zu machen, in FHD hat es dei ganze zeit gepasst nur jetzt mit WQHD oder UHD passt sie nicht mehr komplett in den Browser

<!DOCTYPE psd>
<html style="overflow: hidden;">
<head>
<title>MultiGaming4Life Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:image" content="https://lh3.googleusercontent.com/3...AueIMpj6zetKjr9Cj0YEtliXH8EziTOr1OhLU=s500-no">
</head>
<body class="grad" scroll="no" style="overflow: hidden; width: 1920px" oncontextmenu="return false" bgcolor="#000000">

<!-- Save for Web Slices (MG4LHP.psd) -->
<table align="center" id="Tabelle_01" width="auto" height="auto" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="15">
<img src="images/Headline.jpg" width="1920" height="173" alt=""></td>
</tr>
<tr>
<td>
<img src="images/MG4LHP_02.jpg" width="27" height="71" alt=""></td>
<td colspan="2">
<a href="index.html"><img src="images/Home.jpg" width="161" height="71" alt="" onmouseover="this.src='images/HoverHome.jpg';" onmouseout="this.src='images/Home.jpg';"></a></td>
<td>
<a href="uberuns.html" target="haupt"><img src="images/UberUns.jpg" width="210" height="71" alt="" onmouseover="this.src='images/HoverUberUns.jpg';" onmouseout="this.src='images/UberUns.jpg';"></a></td>
<td colspan="2">
<a href="member/member.html" target="haupt"><img src="images/Member.jpg" width="193" height="71" alt="" onmouseover="this.src='images/HoverMember.jpg';" onmouseout="this.src='images/Member.jpg';"></a></td>
<td colspan="2">
<a href="joinus.html" target="haupt"><img src="images/JoinUs.jpg" width="184" height="71" alt="" onmouseover="this.src='images/HoverJoinUs.jpg';" onmouseout="this.src='images/JoinUs.jpg';"></a></td>
<td>
<a href="downloads/downloads.html" target="haupt"><img src="images/Impressum.jpg" width="240" height="71" alt="" onmouseover="this.src='images/HoverImpressum.jpg';" onmouseout="this.src='images/Impressum.jpg';"></a></td>
<td>
<a href="http://www.guestbook-free.com/books3/wiesbadenfinest/" target="haupt"><img src="images/Gastebuch.jpg" width="240" height="71" alt="" onmouseover="this.src='images/HoverGastebuch.jpg';" onmouseout="this.src='images/Gastebuch.jpg';"></a></td>
<td>
<a href="Links.html" target="haupt"><img src="images/Forum.jpg" width="173" height="71" alt="" onmouseover="this.src='images/HoverForum.jpg';" onmouseout="this.src='images/Forum.jpg';"></a></td>
<td>
<a href="impressum.html" target="haupt"><img src="images/Downloads.jpg" width="266" height="71" alt="" onmouseover="this.src='images/HoverDownloads.jpg';" onmouseout="this.src='images/Downloads.jpg';"></a></td>
<td colspan="2">
<img src="images/MenueLeiste.jpg" width="162" height="71" alt=""></td>
<td>
<img src="images/MG4LHP_12.jpg" width="64" height="71" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="images/MG4LHP_13.jpg" width="1920" height="69" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/MG4LHP_14.jpg" width="71" height="621" alt=""></td>
<td colspan="3">
<iframe src="wichtig.html" width="489" height="554" frameborder="0" name="wichtig" body style="background:url(images/MG4LHP_15.jpg);"></iframe></td>
<td colspan="2" rowspan="2">
<img src="images/MG4LHP_16.jpg" width="76" height="621" alt=""></td>
<td colspan="6">
<iframe src="haupt.html" width="1213" height="554" frameborder="0" name="haupt" body style="background:url(images/MG4LHP_17.jpg);"></iframe></td>
<td colspan="2" rowspan="2">
<img src="images/MG4LHP_18.jpg" width="71" height="621" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/MG4LHP_19.jpg" width="489" height="67" alt=""></td>
<td colspan="6">
<img src="images/MG4LHP_20.jpg" width="1213" height="67" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="images/MG4LHP_21.jpg" width="1920" height="36" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Abstandhalter.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="117" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="210" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="162" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="31" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="45" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="139" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="240" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="240" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="173" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="266" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="155" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/Abstandhalter.gif" width="64" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->


</body>
</html>
 
Nun ja... die Seite funktioniert nur auf deinem FHD Display... ich schätze mal, dass es etwa 1% der Internetnutzer gibt, die genau mit so einem Display unterwegs sind. Für die anderen 99% der Besucher ist die Seite nicht zu gebrauchen. Spätestens wenn die sehen, dass Teile gar nicht zu sehen sind (weil außerhalb des sichtbaren Bereiches) und sie auch nicht scrollen können, sind die Besucher wieder weg.... so werden und wurden Webseiten nicht konfiguriert.

Hast du mal den CSS Code aus meinem letzten Beitrag getestet?
 
wiesbadenfinest schrieb:
ja, ich werde sie auch noch mal von vorne machen,...
Zum Vergrößern anklicken....
Bestimmt eine gute Idee - ich fürchte allerdings, dass du da mit deinen Wissensstand in Sachen HTML und CSS nicht so schnell zu brauchbaren Ergebnissen kommen wirst deswegen gebe ich dir (ausnahmsweise) hier mal eine kleine Starthilfe, wie man so ein Projekt ohne Dreamweaver .. ohne Tabellen... ohne zerstückelte Bilder und mit validem HTML 5 umsetzen könnte.
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>MultiGaming4Life Homepage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--  Verlinkung des Stylesheets - falls externes Stylesheet vorhanden

      <link rel="stylesheet" href="mein_stylesheet.css" type="text/css">
-->

<!-- Internes Stylesheet sollte in eine externe Datei (mein_stylesheet.css) ausgelagert werden -->

<style>
* {
   box-sizing: border-box;
}
html, body {
   width: 100%;
   max-width: 1940px;
   margin: 0px;
   padding: 0px;
}
body.grad {
   background-image: url('http://www.mg4l.de/images/MG4LHP_13.jpg');
   background-repeat: no-repeat;
   background-size: cover;
}
#header {
   width: 100%;
   max-width: 1920px;
   margin: 0px auto;
}
#header img {
   width: 100%;
   max-width: 1920px;
}
nav.top-nav {
   display: flex;
   width: 100%;
   max-width: 1920px;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
   background-image: url('http://www.mg4l.de/images/MG4LHP_02.jpg');
   background-size: cover;
}
.top-nav-item {
   display: inline;
   padding: 0px;
}
.top-nav-item a img {
   width: 100%;
   height: auto;
   max-height: 71px;
}
main#hauptteil {
   display: flex;
   width: 100%;
   max-width: 1920px;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
}
div.frame_links {
   width: 30%;
   padding: 50px 20px 50px 20px;
}
iframe.i_frame_links {
   width: 100%;
   height: 600px;
   border: 0;
   border-radius: 5px;
   background-color: #000;
}
div.frame_rechts {
   width: 70%;
   padding: 50px 20px 50px 20px;
}
iframe.i_frame_rechts {
   width: 100%;
   height: 600px;
   border: 0;
   border-radius: 5px;
   background-color: #000;
}
footer div.seiten_fuss {
   width: 100%;
   max-width: 1920px;
}
footer div.seiten_fuss img {
   width: 100%;
   max-width: 1920px;
   height: auto;
}

@media screen and (max-width: 1140px) {
   main#hauptteil {
      justify-content: center;
      flex-wrap: wrap;
   }
   div.frame_links {
      width: 60%;
      padding: 50px 20px 30px 20px;
   }
   div.frame_rechts {
      width: 100%;
      padding: 0px 20px 50px 20px;
   }
}
@media screen and (max-width: 750px) {
   iframe.i_frame_rechts {
      height: 650px;
   }
}
</style>
</head>
<body class="grad" oncontextmenu="return false">

<div id="header">
   <img src="http://www.mg4l.de/images/Headline.jpg" alt="">
</div>
<nav class="top-nav">
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/index.html"><img src="http://www.mg4l.de/images/Home.jpg" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverHome.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Home.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/uberuns.html" target="haupt"><img src="http://www.mg4l.de/images/UberUns.jpg" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverUberUns.jpg';" onmouseout="this.src='http://www.mg4l.de/images/UberUns.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/member/member.html" target="haupt"><img src="http://www.mg4l.de/images/Member.jpg" width="193" height="71" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverMember.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Member.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/joinus.html" target="haupt"><img src="http://www.mg4l.de/images/JoinUs.jpg" width="184" height="71" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverJoinUs.jpg';" onmouseout="this.src='http://www.mg4l.de/images/JoinUs.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/downloads/downloads.html" target="haupt"><img src="http://www.mg4l.de/images/Impressum.jpg" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverImpressum.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Impressum.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.guestbook-free.com/books3/wiesbadenfinest/" target="haupt"><img src="http://www.mg4l.de/images/Gastebuch.jpg" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverGastebuch.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Gastebuch.jpg';"></a>
   </div>

   <div class="top-nav-item">
      <a href="http://www.mg4l.de/Links.html" target="haupt"><img src="http://www.mg4l.de/images/Forum.jpg" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverForum.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Forum.jpg';"></a>
   </div>
   <div class="top-nav-item">
      <a href="http://www.mg4l.de/impressum.html" target="haupt"><img src="http://www.mg4l.de/images/Downloads.jpg" width="266" height="71" alt="" onmouseover="this.src='http://www.mg4l.de/images/HoverDownloads.jpg';" onmouseout="this.src='http://www.mg4l.de/images/Downloads.jpg';"></a>
   </div>
</nav>

<main id="hauptteil">
   <div class="frame_links">
      <iframe class="i_frame_links" src="http://www.mg4l.de/wichtig.html" name="wichtig"></iframe>
   </div>
   <div class="frame_rechts">
      <iframe class="i_frame_rechts" src="http://www.mg4l.de/haupt.html" name="haupt"></iframe>
   </div>
</main>

<footer>
   <div class="seiten_fuss">
      <img src="http://www.mg4l.de/images/MG4LHP_21.jpg" alt="">
   </div>
</footer>

</body>
</html>
Das ist dein Code, nur sind die Tabellenelement durch <div>'s ersetzt - zum Teil mit 'flexbox'.
Die Inline-Formatierungen sind aus dem Code raus und im <style>...</style> untergebracht. Diese CSS Anweisungen sollten aber besser in ein externes Stylesheet.
Die maximale Anzeigebreite der Seite ist auf 1920px begrenzt... das entspricht der Breite der verwendeten Bilder. Wenn du das ändern willst, dann brauchst du nur die 'max-width' Anweisungen im CSS Teil entsprechend anpassen.
Die grafischen Elemente (Bilder) skalieren sich automatisch bei Breitenänderungen des Browserfenstern... das sieht bei Breiten etwa kleiner als 1000px etwas mickrig aus... hmm... da müsstest du dir was einfallen lassen... @media ist da das Zauberwort!
Viel Erfolg beim Umbau.

.. ach ja... ich musst die Verlinkungen im Code auf absolute Adressierung umstellen, kannst du wieder auf 'relative URL's' umstellen, wenn die Seite auf deinem Server läuft.
 
Wenn man 8 Links auf einer Site hat, die vom Smartphone bis zum Desktop alle Größen abdecken soll, platziert man die Nav-Items nicht nebeneinander, sondern versteckt sie hinter einem Menü-Button.

Außerdem sind iFrames ein no-go. Statt dessen sollte man Routen erstellen und die dazugehörigen Inhalte per Ajax nachladen. Hat den Vorteil, dass man dann auch Deeplinks zu den Unterseiten setzen kann.

Hier ist ein Grundgerüst mit zwei Unterseiten. Ohne Bilder und Formatierungen.

Beispiel
 
Wie gesagt, ich habe das ganz schnell zusammen gelesen und halt mit den informationen wo ich mir besorgt habe, das gebaut.
ich war heil froh dieses bewerbungsformular hinzubekommen war nicht so ohne, aber es hat zumindest, um present zu sein, gereicht.
danke für die tipps, ich bin mich am einarbeiten und werde die seite dann von grund auf komplett neu anfangen, immerhin habe ich mit der vorherigen paar erfahrungen sammeln können, auch wenn diese falsch sind
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben