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

Frage Seite für kleinere Bildschirme anpassen!

M

mely

Neues Mitglied
Hallo an alle nochmal,
dieses Mal glaube ich poste ich richtig meine Frage. Also nochmal:
Ich erstelle eine statische Seite und habe mehrere Probleme, die ich nicht lösen konnte. Ich hoffe ihr könnt mir helfen.
1) Also ich habe eine Seite mit 3 Layouts gemacht und das Problem ist dass ich von kleinere Bildschirmme die Seite ganz anders aussierht als bei großere. Beim verkleinern passieren viele Dinge, z.b Das bild schiebt sich nach unter. Daten gehen verloren.
Ich habe schon einbisschen versucht, sieht aber alles sehr schlecht aus.

2) Das zweites Problem ist, dass die Bilder beim verkleinern sich bewegen und nicht zu den zugehörenden Text bleiben. Was auch eigentlich mit dem ersten Problem verbunden ist.


3) Die Seite hat 6 unterseiten, die sich sowohl beim ankliken als auch beim weiterscrollen am Ende der eine Seite automatisch überspringen müssen. Klingt zu kompliziert.

Ich hoffe iht könnt mit helfen.

Viele Grüße,
Mely

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> Online Ausstellung </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;">

<link rel="shortcut icon" type="image/x-icon" href="http://www.census.de/census/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- Main stylesheet /-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>

</head>

<body>

<div id="container" >
<div id="info">
        <ul>
            <li><a href="index.html"><font color="#80AD53">Eingangswand</font></a></li><br />
            <li><a href="geburtsstunde.html">Geburtsstunde eines Motivs</a></li><br />
            <li><a href="documentation.html">Dokumentation und Variation</a></li><br />
            <li><a href="neupraegung.html">Neupr&auml;gung der alten Form</a></li><br />
            <li><a href="unstreblichkeit.html">Unsterblichkeit eines Motivs</a></li><br />
            <li><a href="salon.html">Vom Salon in den Atlas</a></li><br />
            <li><a href="literatur.html">Literatur und Links</a></li><br />
    </ul>
    </div>

    <div id="text" style="height: 50em;" >
        <!--<p style="padding-left:10px;"><b>Eine Online-Ausstellung, die ab 27.10 - 18.12.2014 im Atrium des Pergamonpalais zu sehen war.</b></p>-->
       
       
       
       
       
       
        <h2><b><p style="padding-top: 36%;">„... zur g&ouml;ttlichen Fr&uuml;hst&uuml;ckspause”  <br /> </p></b></h2>
        <p style="padding-left:20%; margin-top: -6%;"><b>Eine Motivwanderung von der Antike bis heute</b></p>

   
        <p class="justify" style="padding-top: 5%;">Ein Frühstück im Grünen mit Raffael und Manet, Picasso und Tacita Dean: Angeregt von einem Aufsatz Aby Warburgs verfolgt die Ausstellung des Projekts Census of Antique Works of Art and Architecture Known in the Renaissance die Wanderung eines antiken Sarkophagmotivs durch Kunst und Kunstwissenschaft, durch Rezeption und Adaption.</br>Fünf thematische Sektionen führen anhand eines konkreten Beispiels an Kernfragen der Antikenrezeption und ihrer Erforschung heran.
        </br>Im Zentrum der Ausstellung lädt ein Wiesenstück zu eigenen Frühstückserlebnissen ein.
         </p>
        </div>
      <div id="content" >
   
    <video src="video2.mp4"
        poster="video2.mp4" autoplay  controls loop> <!-- http://www.html-seminar.de/html-5-video.htm-->
    </video>
</div>
    </div>
     </body>
  </html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> Online Ausstellung </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;">

<link rel="shortcut icon" type="image/x-icon" href="http://www.census.de/census/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- Main stylesheet /-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>

</head>

<body>

<div id="container" >
<div id="info">
        <ul>
            <li><a href="index.html"><font color="#80AD53">Eingangswand</font></a></li><br />
            <li><a href="geburtsstunde.html">Geburtsstunde eines Motivs</a></li><br />
            <li><a href="documentation.html">Dokumentation und Variation</a></li><br />
            <li><a href="neupraegung.html">Neupr&auml;gung der alten Form</a></li><br />
            <li><a href="unstreblichkeit.html">Unsterblichkeit eines Motivs</a></li><br />
            <li><a href="salon.html">Vom Salon in den Atlas</a></li><br />
            <li><a href="literatur.html">Literatur und Links</a></li><br />
    </ul>
    </div>

    <div id="text" style="height: 50em;" >
        <!--<p style="padding-left:10px;"><b>Eine Online-Ausstellung, die ab 27.10 - 18.12.2014 im Atrium des Pergamonpalais zu sehen war.</b></p>-->
       
       
       
       
       
       
        <h2><b><p style="padding-top: 36%;">„... zur g&ouml;ttlichen Fr&uuml;hst&uuml;ckspause”  <br /> </p></b></h2>
        <p style="padding-left:20%; margin-top: -6%;"><b>Eine Motivwanderung von der Antike bis heute</b></p>

   
        <p class="justify" style="padding-top: 5%;">Ein Frühstück im Grünen mit Raffael und Manet, Picasso und Tacita Dean: Angeregt von einem Aufsatz Aby Warburgs verfolgt die Ausstellung des Projekts Census of Antique Works of Art and Architecture Known in the Renaissance die Wanderung eines antiken Sarkophagmotivs durch Kunst und Kunstwissenschaft, durch Rezeption und Adaption.</br>Fünf thematische Sektionen führen anhand eines konkreten Beispiels an Kernfragen der Antikenrezeption und ihrer Erforschung heran.
        </br>Im Zentrum der Ausstellung lädt ein Wiesenstück zu eigenen Frühstückserlebnissen ein.
         </p>
        </div>
      <div id="content" >
   
    <video src="video2.mp4"
        poster="video2.mp4" autoplay  controls loop> <!-- http://www.html-seminar.de/html-5-video.htm-->
    </video>
</div>
    </div>
     </body>
  </html>

HTML: 
body {
     font-family:Minion Pro,Verdana,Helvetica,sans-serif;
     font-size: 1.2rem;    
    margin: 0;
    padding: 0;
    background-size: 100% 100% 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;;
}

#container {
    font-family: Minion Pro;
    max-width: 100%;
    min-width: 80%
    margin: 0px auto;
}

#info {
    float: left;
    width: 16%;
    margin-left: 2%;
    background-color: white;
    padding-top: 14%; // Text stelle(census---)
    overflow: auto;
}

/*#info li {
    position:fixed;
}*/

#text {
    float:left;
    width: 30%;
    background-color: #80AD53;
    color: black;    
    margin-left: 5%;
    padding: 2% 1.5% 0 1.5%;
    overflow: auto;
}
   
#content {
   float:left;
    text-decoration: none;
    width: 30%;
    margin: 15% 0 0 2%;
    min-width: 16em;
}

.justify { text-align: justify; }

/*damit das Text drin in menue bleibt*/
#info ul{
     list-style-type: none;/* Listenabstaende */
}

/*buchstabeleri yesil gösteriyor*/
#info a{
    text-decoration:none; /*Hyperlinkunterstreichung entfernen*/
    color:grey;
}
   
/* die textveraenderung*/
/*#info a:hover{
        color: white; // die Buchstabenfarbe nach dem Veraenderung
        background-color: green;
        text-transform: uppercase;
}*/

.center {
   text-align: center;
}
/*.fixed {position: fixed; top:0;}*/

a{color:darkgreen; text-decoration:none; }

img { width:80%; height: auto }
.reframe { max-width: 96%; margin: 0 auto }

video { width:80%; height: auto}
.reframe { max-width: 96%; margin: 0 auto }

/* Tabletts */
@media only screen and (min-width: 760px) {
    .reframe { max-width: 760px }
…
}

/* Mittlere Monitore */
@media only screen and (min-width: 980px) {
    .reframe { max-width: 980px }
}

/* Große Monitore */
@media only screen and (min-width: 1280px) {
    .reframe { max-width: 1280px }
…
}
@viewport {
    width: device-width;
   zoom: 1;
}
 
Google mal nach Responsive Webdesign.
Entweder erlernen oder machen lassen wobei das natürlich was kostet.
Bei Interesse kannst du mir gerne eine Nachricht senden.

Grüße
 
Du musst deine Seite auf mobile Endgeräte optimieren. Das machst du mit Media Queries oder Frameworks wie Bootstrap. Ich weiß nicht wie weit deine Kenntnisse sind aber für den Anfang ist Bootstrap glaube ich zu mächtig.
 
Hallo,
danke für die Antworten.
Irgendwie dank diese Code

img { width:80%; height: auto }
.reframe { max-width: 96%; margin: 0 auto }

video { width:80%; height: auto}
.reframe { max-width: 96%; margin: 0 auto }

/* Tabletts */
@media only screen and (min-width: 760px) {
.reframe { max-width: 760px }
…
}

/* Mittlere Monitore */
@media only screen and (min-width: 980px) {
.reframe { max-width: 980px }
}

/* Große Monitore */
@media only screen and (min-width: 1280px) {
.reframe { max-width: 1280px }
…
}

funktioniert es auch, aber ich kriege andere Problemen wie z.b, dass beim verkleinern sich die Bilder Nach oben verschieben und es stimmt nicht mehr das Verhältnis Text zu Bild.
Was kann ich da tun?
Vielen Dank im voraus!

Liebe Grüße
Mely
 
Also habe vergessen zu schreiben, dass ich ein 3 Layouts habe und die Texte befinden sich in der 2 Layout und die Bilder in der 3ten.

Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben