Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Homepage an auflösung anpassen

  1. #1
    Youngster
    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Homepage an auflösung anpassen

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Homepage an auflösung anpassen

    Zitat 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!
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Homepage an auflösung anpassen

    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 ?
    Geändert von reyman (12.05.2015 um 00:30 Uhr)

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    567
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Homepage an auflösung anpassen

    Hallo

    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?

    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

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Homepage an auflösung anpassen

    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.

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    567
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Homepage an auflösung anpassen

    Hallo,

    Also ich schreibe den reinen CSS Code in die Mediawiki.
    Das ist ein Problem werden, da ich das nicht kenne.

    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:

    Code:
    <!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>
    Gruss

    MrMurphy

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Homepage an auflösung anpassen

    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.

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Homepage an auflösung anpassen

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

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Homepage an auflösung anpassen

    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)
    Geändert von reyman (12.05.2015 um 16:55 Uhr)

  10. #10
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Homepage an auflösung anpassen

    Ich wiederhole mich mal.

    Zitat Zitat von Gastl Beitrag anzeigen
    Man kann Kontent nicht an Auflösungen anpassen!
    Was du wahrscheinlich machen musst, ist dein Kontent als ein Responsive_Webdesign zu gestalten.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

Ähnliche Themen

  1. HILFE!!! Auflösung anpassen
    Von Marina im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 19.07.2008, 15:54
  2. Seite der Auflösung anpassen
    Von im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 02.11.2006, 09:56
  3. Problem mit HP an Auflösung anpassen
    Von Zippo1979 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 06.12.2005, 21:58
  4. Auflösung anpassen die 10.
    Von Smint im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 10.04.2005, 18:02
  5. Auflösung anpassen
    Von Stalkerz im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.03.2005, 13:25

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •