Homepage an auflösung anpassen

reyman

Hallo,

Ich habe eine Seite Basierend auf CSS & HTML erstellt (Wikipedia)

Nun ist die Seite fast fertig. Und stelle fest das diese Seite nicht auf die unterschiedlichen Auflösung angepasst wird.

Ich habe im Bild 2 Boxen (Box 1 & 2)

Bei einer Auflösung von 1920x1080 ist alles in Ordnung.
Bei einer Auflösung von 1366x768 ist Box 2 in der Box 1.

Bild: http://prntscr.com/742rv2

Box 1 hat folgenden Code:

Code

<div style="margin:0 auto; max-width: 800px;">
{| class="SOtableTop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
}


(das ist ein Wiki Code für Tabellen.)

Box 2 hat folgenden Code:

Code

.boxtest1 {
position: fixed;
top: 480px;
left: 160px; 
width: auto; 
height: auto; 
color: #000;  
}

Ich hoffe Ihr könnt mir helfen

Gastl

Zitat von reyman

Und stelle fest das diese Seite nicht auf die unterschiedlichen Auflösung angepasst wird.

Man kann Kontent nicht an Auflösungen anpassen!

reyman

Und wenn ich Box 1 noch in eine Box mache ?

Mit folgenden Code:

Code

.rundrum {
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 0 auto;
display: flex;
justify-content: center;
}

Wenn das anders geschrieben ist. Geht es dann ?

Oder anders gefragt. Wie könnte ich es denn hinbekommen ?

MrMurphy

Hallo

Zitat

Wie könnte ich es denn hinbekommen ?

Indem du uns zunächst das Problem nachvollziehbar beschreibst. Zum Beispiel:

Schreibst du den Quelltext direkt oder benutzt du den Editor eines Wikis?

Stelle uns den gesamten HTML- und CSS-Quelltext mit passendem Inhalt zur Verfügung und nicht nur ein paar nichtssagende Quelltextschnipsel.

Benutze einheitliche Bezeichnungen. In deinem CSS ist Box1 fixiert, in der Zeichnung ist Box1 offensichtlich der große Inhaltsbereich in der Mitte. Das passt irgendwie nicht.

Wieso benutzt du für div CSS-Anweisungen für Tabellen?

Zitat

Und stelle fest das diese Seite nicht auf die unterschiedlichen Auflösung angepasst wird.

Das ist keine nachvollziehbare Problembeschreibung. Du musst schon schreiben wie sich die Boxen verhalten sollen wenn der Platz nicht mehr ausreicht.

Gruss

MrMurphy

reyman

Okay.

Also ich schreibe den reinen CSS Code in die Mediawiki.

Kann ich dir die gesamten Quellcodes per Email schicken ? Weil das ist ja schon ein großer Batzen.

Also Box 1 soll, wenn es eine kleinere Auflösung gibt weiter nach links gehen. (Da ist ja am noch Platz). So dass dann Box 2 ihren Platz hat.

Box 2 ist eine Box die beim Scrollen mit fährt.

MrMurphy

Hallo,

Zitat

Also ich schreibe den reinen CSS Code in die Mediawiki.

Das ist ein Problem werden, da ich das nicht kenne.

Zitat

Kann ich dir die gesamten Quellcodes per Email schicken ?

Nein danke. Wenn du den nicht auf das Problem reduzieren kannst wäre ein Link zu der Seite besser. Außerdem sind meine Tips für alle Interssierten User gedacht.

Mit den vorhandenen Infos von dir biete ich folgende Lösung an:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Box neben zentrierter Box</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
         line-height: 1.3;
      }
      body {
         padding: 0;
         width: 98%;
         padding: 0;
         margin: 1rem auto;
      }
      main {
         width: 80%;
         margin-left: 20%;
         display: flex;
         align-items: flex-start;
      }
      section {
         width: 70%;
         padding: 1rem;
         margin-right: 10%;
      }
      header {
         border: 1px solid #666;
         padding: 0.5rem;
         margin-bottom: 2rem;
      }
      article {
         padding: 0.5rem;
         border: 1px solid #666;
      }
      nav {
         width: 30%;
         padding: 0.5rem;
         border: 1px solid #666;
         margin-top: 7rem;
      }
      nav h2 {
         margin-top: 0.5rem;
      }
      ul {
         padding: 0;
         margin: 0;
      }
      li {
         list-style-type: none;
      }
      a {
         text-decoration: none;
         color: black;
         display: block;
         padding: 0.1rem 0.5rem;
         border: 1px solid #666;
         margin-bottom: 0.2rem;
      }
      a:hover {
      }
   }
   </style>
</head>
<body>
   <main>
      <section>
         <header>
            <h2>Banner</h2>
         </header>
         <article>
            <h2>Box1</h2>
            <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!</p>
            <p>Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um.</p>
            <p>Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen.</p>
            <p>Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei, waren alle Mühe und alle Vorbereitungen umsonst? Er presste sich ganz eng an die Wand hinter ihm und hoffte, der Verfolger würde ihn übersehen, als plötzlich neben ihm mit kaum wahrnehmbarem Quietschen eine Tür im nächtlichen Wind hin und her schwang. Könnte dieses der flehentlich herbeigesehnte Ausweg aus seinem Dilemma sein? Langsam bewegte er sich auf die offene Tür zu, immer dicht an die Mauer gepresst. Würde diese Tür seine Rettung werden? Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im</p>
         </article>
      </section>
      <nav>
         <h2>Box2</h2>
         <ul>
            <li><a href="#">Birne</a></li>
            <li><a href="#">Orange</a> </li>
            <li><a href="#">Kiwi</a> </li>
            <li><a href="#">Banane</a> </li>
         </ul>
      </nav>
   </main>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

reyman

Okay. Ich wollte die Seite eig. nicht Posten. Mache es aber dennoch.

Evtl wirst du bei manchen dingen die Hände über den Kopf schlagen, da ich mich mit der Materie nicht zu 100% auskenne. Sondern viel über Google.

http://sopedia.gamescampus.eu/index.php/Testhomepage

Das ist die Seite um die es sich handelt.

Der teil in der Mitte soll bei geringer Auflösung weiter nach links rutschen. (ist ja noch viel Platz).

Die Box rechts ist fixiert um beim Scrollen mit zu laufen.

Das Problem: Bei geringer Auflösung ist die rechte Box im mittleren Teil drin und schiebt sich drüber. bisher habe ich es geschafft die Auflösung bis 1366x768 zu reduzieren.

MFG

p.s. Vielen Dank erstmal für deine Hilfe.

djheke

Verzichte auf fixe Positionierungen. Du könntest aber diese Box in der linken Spalte verfrachten. So hast du keine Probleme mehr.

reyman

Wenn sie links wäre. Wäre alles ok ?

Edit: Nein das löst das Problem nicht.

Wenn ich das fixed weg mache, verschiebt sich die erste box (Grundlagen)

Gastl

Ich wiederhole mich mal.

Zitat von Gastl

Man kann Kontent nicht an Auflösungen anpassen!

Was du wahrscheinlich machen musst, ist dein Kontent als ein Responsive_Webdesign zu gestalten.

reyman

Naja das ist doch mal eine Aussage. Und habe dies auch oben nicht wiederlegt. Sondern lediglich andere Vorschläge angenommen und getestet.

Mit dem Responsive_Webdesign müsst ich mich nun auch erst einmal auseinandersetzen. Sonst bleibt es so wie es ist. Auch wenn es doof ist.

Homepage an auflösung anpassen

Tags

Benutzer online in diesem Thema