[ERLEDIGT] Div schiebt sich unter anderes Div

Praktikant123 · 15 November 2016

Hallo,
ich bin dabei eine Seite zu erstellen, auf der PDF's angezeigt werden sollen. Dabei befinden sich auf der linken Seite der Oberfläche die Links und rechts soll dann eine Vorschau erzeugt werden.
Danke an alle, die mir dabei geholfen haben.

Nun habe ich das problem, dass bei der Erstellung der Vorschau sich die Boxen verschieben. Wie kann ich am besten ein starres Layout erzeugen, sodass sich beim Vergrößern und Verklienern der Webseite (habe schon Bootstrap integriert) die PDF-Vorschau mit verändert und an ihrem Platz rechts auf der Seite bleibt?

Mein CSS:

Code:

/*NavigationLinks-----------------------------------*/

div#left {
   float:left;
   width:40%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   background-color:#FF8700;
   overflow:auto;
   align:top;
 
}

   a {
       text-decoration:none;
       color: black;
   }
   ul, li {
       list-style: none;
   }
   #nav li {
       padding: 2px 2px 2px 15px;
       cursor: default;
   }
   #nav ul {
       display: none;
       background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
   }
   #nav li.expand {
       background: url(img/arrow-down.gif) no-repeat scroll 0px 12px transparent;
   }
   .expanded {
       background: url(img/arrow-up.gif) no-repeat scroll 0px 12px transparent !important;
   }
 
   /*Überschrift Home-----------------------------------*/

   #home
   {
 
       font-size: 20px;
       vertical-align: bottom;
       border-bottom: 2px solid #F6F1F1;
   }

/*PDFObject-----------------------------------*/

#pdf {
   float:right;
   width:60%;
}

.pdfobject-container {
   width: 100%;
   max-width: 600px;
   height: 600px;
   margin: 2em 0;
}

.pdfobject { border: solid 1px #666; }
#results { padding: 1rem; }
.hidden { display: none; }
.success { color: #4F8A10; background-color: #DFF2BF; }
.fail { color: #D8000C; background-color: #FFBABA; }

Also links ist ein div und rechts, wobei das Rechte mit "#pdf" angesprochen wird.
".pdfobject-container" ist das Feld, was aufploppt, wenn man auf einen Link drückt.
Dieser soll rechts dargestellt werden und sich nicht verschieben.

M.f.G.

SpiceLab · 15 November 2016

Aus:

CSS:

div#left {
   float:left;
   width:40%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   background-color:#FF8700;
   overflow:auto;
   align:top;
}
...
#pdf {
   float:right;
   width:60%; 
}

wird:

CSS:

div#left {
   float:left;
   width:40%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   background-color:#FF8700;
   overflow:auto;
   /*align:top;*/ /* obsolet, denn das gibt es so nicht */
   box-sizing:border-box; /* Innenabstände werden nicht zur Breite addiert */
}
...
#pdf {
   margin-left:41%;
}

Praktikant123 · 16 November 2016

Vielen Dank, jedoch besteht das Problem immernoch.
Es bleibt jetzt zwar rechts, aber leider füllt es nicht den ganzen Bereich und geht auch über das Layout hinaus.
Ich werde mal den Code hier einfügen. Vielleicht kann mir noch geholfen werden.

HTML

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   
    <title>MiniTec Intranet</title>
   
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="language" content="de" />
   
    <!-- CSS -->
   
    <link rel="stylesheet" type="text/css" href="style.css" />
   <link href="css/bootstrap.min.css" rel="stylesheet">
   
    <!-- Script -->
   
   
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
   <script src="js/bootstrap.min.js"></script>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   
   <script type="text/javascript">
   $(document).ready(function() {
       $("#nav").on('click', 'li.expand', function(e) {
           $(this).toggleClass("expanded");
           $(this).children("ul:first").slideToggle("300");
           e.stopPropagation();
       });   
       $("#nav").on('click', 'li.expanded a', function(e) {
           e.stopPropagation();
       });
   }); //$(document).ready
   </script>
   
  </head>
  <body>
 
     
     <!-- ###DOKUMENT### begin -->
     
    <div id="wrapper">
       
      <div id="header">
       
       <img src="logo.png" alt="Logo">
       
      </div>
     
     <!-- Toplevel-Navigation -->
     
      <div id="top_nav">
        <ul id="navigation_ul">
           <li id="navigation_li"><a class="active" href="#home">Home</a></li>
           <li id="navigation_li"><a href="#news">News</a></li>
           <li id="navigation_li"><a href="#contact">Contact</a></li>
           <li id="navigation_li"><a href="#about">About</a></li>
       </ul>
      </div>
     
     <!-- Linke Navigation -->
     
      <div id="left">
     
           <!-- Home -->
     <p></p>
     
     <div id="home"> Home/Dokumente </div>
     
           <!-- Trennlinie -->
     
     
     <ul id="nav">
       <li class="expand">&Uumlber das IQB
           <ul>
               <li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster</a></li>
               <li><a href="PDF/a.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster </a></li>
               <li>Partner/Links</li>
           </ul>
       </li>
       <li>Personal</li>
       <li class="expand">Bildungsstandards
           <ul>
               <li>Aufgabenbeispiele</li>
               <li>EMSE</li>
               <li class="expand">Downloadserver
                   <ul>
                       <li>Audiofiles</li>
                       <li>Videofiles</li>
                   </ul>
               </li>
           </ul>
       </li>
       <li>VERA/Lernstandsvergleich</li>
       <li class="expand">Arbeitsbereiche</li>
           <ul>
               <li>Testentwicklung</li>
               <li>Kompetenzerwerb</li>
               <li class="expand">Implementation</li>
                   <ul>
                       <li>Was wird</li>
                       <li>denn eigentlich</li>
                       <li class="expand">so alles</li>
                           <ul>
                               <li>test</li>
                               <li>test2</li>
                           </ul>
                       <li>implementiert??</li>
                   </ul>
               <li>Bildungsmonitoring</li>
               <li>Datenzentrum (FDZ)</li>
           </ul>
   </ul>
     
       
<!-- search -->
       
<div>
             ###SEARCH###
</div>

</div>     

<!-- right -->

<div id="right">
     
<p><a href="/pdf/sample.pdf" class="embed-link">Click this link to embed the second PDF ("sample.pdf").</a></p>

<div id="results" class="hidden"></div>
<div id="pdf"></div>

<script src="js/pdfobject.min.js"></script>
<script>

var clickHandler = function (e){

   e.preventDefault();

   var pdfURL = this.getAttribute("href");

   var options = {
       pdfOpenParams: {
           navpanes: 0,
           toolbar: 0,
           statusbar: 0,
           view: "FitV"
       }
   };

   var myPDF = PDFObject.embed(pdfURL, "#pdf", options);

   var el = document.querySelector("#results");
   el.setAttribute("class", (myPDF) ? "success" : "fail");
   el.innerHTML = (myPDF) ? "PDFObject successfully embedded '" + pdfURL + "'!" : "Uh-oh, the embed didn't work.";

};

var a = document.querySelectorAll(".embed-link");

for(var i=0; i < a.length; i++){
   a[i].addEventListener("click", clickHandler);
}

</script>
             
</div>

<!-- center -->
<div id="center">

<!-- head -->
<div id="head">
             ###DATE###<br/>
             ###BREADCRUMB###
</div>
               
       
</div>

<!-- footer -->
<div id="footer">
        ###FOOTER###
</div>


</div>
   
    <!-- ###DOKUMENT### end -->
 
  </body>
</html>

CSS

Code:

body{
   text-align:center;
}

h1 {
   font: normal 12px Arial;
   font-weight: bold;
}

hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: white;
   
   
}

img.block {
   display:block;
}

div, img {
  margin:0;
  padding:0;
  border:0;
}

/*-----------------------------------*/

div#wrapper {
  width:auto;           
  height:auto;
  margin-left: 10%;
  margin-right: 10%;
  text-align:left;

  /*margin:0px auto;*/
  border:1px solid silver;
  background: url(../fileadmin/images/background.gif) center repeat-y;
 
}

/*TopNav-----------------------------------*/

div#top_nav {
  font: bold 10px Verdana,Arial;
  clear:both;
  background-color:white;
  text-align:right;
  color:#FFFFFF;  
  padding:5px;
 
 
}

/*TopNav-----------------------------------*/

div#top_nav a {
   text-decoration: none;
   color:white;
   }
   
/*Aufzählung-----------------------------------*/
   
   #navigation_ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

   #navigation_li {
    float: left;
   }

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

    #navigation_li a:hover {
    background-color: #111;
    }

    .active {
    background-color: #FCC330;
    }

/*Header-----------------------------------*/

div#header {
background-color:white;
color:white;
padding:10px;
background-image: url(Hintergrundbild.jpg);

background-repeat:no-repeat;



}

/*NavigationLinks-----------------------------------*/

div#left {
   float:left;
   width:40%;
   padding-top:5px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom:10px;
   background-color:#FF8700;
   overflow:auto;
   /*align:top;*/ /* obsolet, denn das gibt es so nicht */
   box-sizing:border-box; /* Innenabstände werden nicht zur Breite addiert */
}


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

   ul, li {
       list-style: none;
   }

   #nav li {
       padding: 2px 2px 2px 15px;
       cursor: default;
   }

   #nav ul {
       display: none;
       background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
   }

   #nav li.expand {
       background: url(img/arrow-down.gif) no-repeat scroll 0px 12px transparent;
   }

   .expanded {
       background: url(img/arrow-up.gif) no-repeat scroll 0px 12px transparent !important;
   }
   
   /*Überschrift Home-----------------------------------*/
   #home
   {
       
       font-size: 20px;
       vertical-align: bottom;
       border-bottom: 2px solid #F6F1F1;
       
   }

/*Head-----------------------------------*/

div#head {
   font: normal 10px Helvetica,Verdana,Arial;
   padding-top:5px;
   padding-bottom:5px;
}

/*Center-----------------------------------*/

div#center {
   margin-left:190px;
   width:490px;
}
/*-----------------------------------*/


/*Right-----------------------------------*/

.float-left {
   float:left;
}

/*Footer-----------------------------------*/

div#footer {
  clear:both;
  background-color:#FF8700;
  padding:10px;
  text-align:right;
}
/*-----------------------------------*/

/*PDFObject-----------------------------------*/

#pdf {
   margin-left:41%;
}
   

.pdfobject-container {
   width: 100%;
   max-width: 600px;
   height: 600px;
   margin: 2em 0;
}

.pdfobject { border: solid 1px #666; }
#results { padding: 1rem; }
.hidden { display: none; }
.success { color: #4F8A10; background-color: #DFF2BF; }
.fail { color: #D8000C; background-color: #FFBABA; }

SpiceLab · 16 November 2016

Praktikant123 schrieb:
Vielen Dank, jedoch besteht das Problem immernoch.
Es bleibt jetzt zwar rechts, aber leider füllt es nicht den ganzen Bereich und geht auch über das Layout hinaus.

Dann werf halt einfach mal einen Blick auf diesen Regelsatz, der die Ausdehnungen definiert, und den Du 1:1 unverändert aus der Vorlage übernommen hast:

CSS:

.pdfobject-container {
   width: 100%;
   max-width: 600px;
   height: 600px;
   margin: 2em 0;
}

Praktikant123 · 16 November 2016

Danke, ich habe es nun hinbekommen.
Fange erst wieder an mich mit den ganzen Sachen zu beschäftigen.
Gruß.

[ERLEDIGT] Div schiebt sich unter anderes Div

Praktikant123

Mitglied

Anhänge

SpiceLab

Mod | ZENmechanic

Praktikant123

Mitglied

Anhänge

SpiceLab

Mod | ZENmechanic

Praktikant123

Mitglied

Neueste Beiträge