Beiträge von djheke

djheke

Warum fühlst Du Dich außerstande, die zwei Selektorblöcke, zu übernehmen?

djheke

Du hast doch ein Beispiel bekommen.Besser ist, du lernst die Grundlagen.

Code

#content {
   margin-left: 220px;
}


.group {
    border: 1px solid;
    background: #676767;
    padding:10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

Alles anzeigen

djheke

Garnicht. #content nimmt sich den Rest. Du darfst nur nicht versuchen zu Floaten.

Hier mal etwas nachgebaut.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Float/Margin-Layout</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


body {
 margin:5px;
 background:#333;
}


header ul {
 margin-bottom:2px;
 float:left;
 width:100%;
 background:#fff;
}
header li {
 float:left;
}


header li:nth-child(3) {
 float:right;
}


header a {
 display:block;
 padding:15px;
 color:#e00;
 font-size:75%;
}


header h1  , header h2 {
 clear:both;
 background:#fff;
}


header form {
 padding-left:15px;
 background:#fff;
 padding-bottom:20px;
 color:#e00;
}


nav {
 float:left;
 width:160px;
 padding:10px;
 margin:10px 10px 10px 0;
 background:#fff;
}
nav h3 , nav a {
 display:block;
 padding:15px;
 color:#e00;
 font-size:75%;
}


main {
 margin:10px 10px 10px 200px;
 color:#fff;
}


main .thumbs li {
 float:left;
 margin:10px;
 padding:10px;
 background:#fff;
 border-radius:5px;
}


main p {
 padding:10px;
}
main .total {
 font-size:75%;
 margin-bottom:20px;
}


main .ort {
 color:#f00;
}


main .ort b {
 color:yellow;
}


footer {
 clear:both;
 background:#fff;
 padding:30px;
}
</style>
</head>
<body>
<header>
 <ul>
   <li><a href="impressum.php">Impressum </a></li>
   <li><a href="agb.php"> § AGB´s</a></li>
   <li><a href="logout.php"> Abmelden</a></li>
 </ul>
  <h1><a href="http://archiv.marcusweier.de">BILDERSYSTEM</a></h1>
  <h2><a href="http://archiv.marcusweier.de">Marcus Weier Fotografie GbR</a></h2>
    <form action="/index.php" method="get">
    <label for="search">Suchbegriff:</label><input type="input" name="search" id="search" value="">
    <input type="submit" value="Suchen &raquo;">
    </form>
</header> 


<nav>
 <h3>Kategorien</h3>
  <ul>
   <li><a href="http://archiv.marcusweier.de/index.php?category=Lokales">Lokales</a></li>
  </ul>
</nav>


<main>
 <p class="total">14809 Bilder in Datenbank gefunden</p>
 <p class="ort">Fuerth (04.07.2014) <b>Public Viewing auf der Fuerther Freiheit</b></p>
   <ul class="thumbs">
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
    <li><a href="http://archiv.marcusweier.de/picture.php?id=1448"><img src="http://archiv.marcusweier.de/images/thumbnail/mwei_20140704_public_viewing_fuerth_016.jpg"></a></li>
   </ul>

</main>


<footer>
 &copy; 2014 Marcus Weier - Alle Fotos sind honorarpflichtig! | <a href="impressum.php"><i class="mdfi_action_announcement"></i> Impressum</a> | <a href="agb.php"> § Allgemeine Geschäftsbedingungen</a>
</footer>
</body>
</html>

Alles anzeigen

djheke

Hab es mir nicht getraut zu erwähnen.

djheke

Wenn du Geld ausgeben möchtest, dann Kauf dir doch eine fertige Shoplösung.

djheke

Wenn du bei deinen floats bleiben möchtest, dann suchst du ein float/margin layout.

Bsp
nav {
float:lwft:
width:200px;
}

#content {
margin-left:220px;
}

Hier musst du deine restlichen Marginwerte und Paddings berücksichtigen.(Boxmodell) Oder auf alle Elemente box-sizing:border-box anwenden.

djheke

So ist natürlich viel besser. Cool!

djheke

Glaube schon.
http://php.net/manual/de/function.sort.php

djheke

Mit sort() funktioniert's.

PHP

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lottozahlen</title>
<style>


article {
 width:50%;
 border:1px solid #000;
 text-align:center;
}
b , i {
 margin:10px;
 width:30px;
 height:30px;
 display:inline-block;
 line-height:30px;
 text-align:center;
 border-radius:50%;
 background:#333;
 color:#fff;
}


i {
 background:#a33;
 font-weight:bold;
}
</style>
</head>
<body>
<article>
<?php
$datum = date("d.m.Y");
$zeit = date("H:i:s");
$lottozahlen = range (1,49); //alle Lottozahlen
$superzahlen = range (0,9); //alle Superzahlen


shuffle($lottozahlen); //Lottozahlen mischen
shuffle ($superzahlen); //Superzahlen mischen


echo "<h3>Hier die Lottozahlen in geordneter Reihenfolge vom $datum</h3>";
for($zahlen = 1; $zahlen <= 6; $zahlen++) 
{
$sort[]=$lottozahlen[$zahlen];
sort($sort);
}


foreach($sort as $zahl){
  echo "<b>$zahl</b>";
}




for ($superzahl = 0; $superzahl <=0; $superzahl++)
    {
        echo "<i>$superzahlen[$superzahl]</i>";
    }  
?>
</article>
</body>
</html>

Alles anzeigen

djheke

Ich gehe mal davon aus, dass Google unterscheiden kann, ob HTML-Elemente dauerhaft ausgeblendet sind oder nicht. Ansonsten halte ich das Thema für Panikmache.

djheke

In diesem Fall werden ja auch keine Links versteckt. Alternativ zu display:none könnte man bspw. auch font-size:0; oder position.absolute verwenden.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 position:relative;
 left:0;
 top:0;
/*oder
 font-size:1rem;
*/
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox  p span {
 position:absolute;
 left:-999999rem;
 top:-99999rem;
/*oder
 font-size:0;
*/
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet,
       <span>
         dolor sit amet, 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

djheke

meinst du das hier
http://www.w3schools.com/jsref/tryit.as…yclassname_loop

djheke

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
 letter-spacing:2px;
 line-height:20px;
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 display:inline;
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox span {
 display: none;
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
       <span>
         dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

Goggle kaputt?
Lesestoff

http://www.peterkroener.de/schoenes-neues…ing-combinator/
http://www.html-seminar.de/block-elemente…ne-elemente.htm
http://www.peterkroener.de/schoenes-neues…ing-combinator/

http://www.peterkroener.de/schoenes-neues…ing-combinator/

djheke

Wir können nich wissen, dass es noch komliziertere Tabellen gibt. Das Beispiel bezog sich auf deine Tabellen. Und weil keiner die Struktur kennt, sollten wir es auch dabei belassen.

djheke

Für arme Schulen gibt es Linux. Eine weitere Alternative wäre eine PDF Vorlage.

djheke

Wollte nur Stef seinen Wunsch nachkommen.:)

djheke

Hier eine CSS-Spielerei

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


input {
 display:none;
}


input:checked ~ #textb {
    display: block;
}


label {
 text-decoration:underline;
 color:blue;
}


input ~ label:before {
 content:"weiter...";
}


input:checked ~ label:before {
 content:"weniger";
}


#textb {
 display: none;
}
</style>
    </head>
    <body>
 <input type="checkbox" name="weiter" id="weiter">  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
</p>

        <div id="textb">
        <p >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

        </div>
 <label for="weiter"></label>    

    </body>
</html>

Alles anzeigen

djheke

Es könnte am fehlendem transition-origin:wert1 wert2(top left right bottom) liegen. Warum nimmst du soviel Klassen. Die meisten können weg und über :nth-of-type() angesprochen werden.

Beispiel mit nur einigen Klassen

HTML

<!DOCTYPE html>


<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Testplan mit wenigen Klassen</title>


<style>


table {
 width:100%;
 border-collapse:collapse;
}


table.odd_table  {
 page-break-before: always;
}




table.odd_table th , table.odd_table td {
 padding:5px;
 text-align:center;
 vertical-align:top;
}




table.odd_table b {
 display:block;
 padding:3px 0;
 font-weight:normal;
 color:#000;
}


thead tr:nth-child(1) th {
 text-align:left;
}




/*studentsset*/
tbody b:nth-of-type(1) {
 color:#f00;
}


/*subject*/
tbody b:nth-of-type(2) {
 color:#09c;
}
/*room*/
tbody b:nth-of-type(3) {
 color:#444;
}
/*empty*/
.empty {
 background:#eee;
}


 .vertikal thead tr:nth-of-type(2) th:nth-of-type(1),
.vertikal thead tr:nth-of-type(2) th:nth-of-type(4),
.vertikal thead tr:nth-of-type(2) th:nth-of-type(7),
.vertikal tbody td:nth-of-type(1),
.vertikal tbody td:nth-of-type(4),
.vertikal tbody td:nth-of-type(7)  {
 font-size:0;
 padding:0;
 border:none;
 position:relative;
}










.vertikal thead th , .vertikal tbody td  {
 border-left:none;
}


.vertikal tbody th  {
 vertical-align:middle;
}


.vertikal .info b {  
 font-size: 16px;
 position:absolute;
 left:11px;
 top:40px;
 background:yellow;
 color:black;
 transform-origin:bottom left;
 transform: rotate(-90deg); 
 z-index:99; 
}
</style>
  </head>


  <body id="top">
    <table>
      <tr>
        <th>Name der Institution:</th>
        <td> </td>
      </tr>
    </table>
    <table>
      <tr>
        <th>Kommentare:</th>
        <td> </td>
      </tr>
    </table>
    <p><strong>Inhaltsverzeichnis</strong></p>
    <ul>
      <li><a href="#table_10">Jenny</a></li>
    </ul>
    <p>&nbsp;</p>


    <table id="table_10" border="1" class="odd_table vertikal">
      <caption> </caption>
      <thead>
        <tr><td rowspan="2"></td><th colspan="9">Jenny</th></tr>
        <tr>
         <th><b>Früh</b></th>
          <th>1</th>
          <th>2</th>
          <th>P1</th>
          <th>3</th>
          <th>4</th>
          <th>P2</th> 
          <th>5</th>
          <th>6</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
         <td colspan="10">19.07.16 18:41</td>
        </tr>
      </tfoot>
      <tbody>
         <tr>
          <th>Montag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Dienstag</th>
          <td class="info"><b>Eingang</b></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Mittwoch</th>
           <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td class="info"><b>J-WC</b></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Donnerstag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td class="info"><b>Flure</b></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Freitag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td class="empty"></td>
          <td class="empty"></td>
        </tr>
      </tbody>
    </table>




  </body>
</html>

Alles anzeigen

djheke

Wenn's nicht gegen den Datenschutz verstößt, dann kannst du uns ja mal ein Beispielplan zeigen. Nur so aus reiner Neugier.

djheke

CSS GEÄNDERT

Code

#loginauf:target 
{
    display: block;
}
#loginauf
{
    display:none;
}

HTML GEÄNDERT

Code

<div id="loginauf" class="login">

Du solltest besser input mit :checked nutzen.

Beiträge von djheke

Probleme in der CSS Anpassung

Probleme in der CSS Anpassung

Probleme in der CSS Anpassung

Probleme in der CSS Anpassung

wie mit Api arbeiten ? DLE

Probleme in der CSS Anpassung

Zufallszahlen von klein nach groß sortieren

Zufallszahlen von klein nach groß sortieren

Zufallszahlen von klein nach groß sortieren

verlinkter text nach klick nicht mehr anzeigen

verlinkter text nach klick nicht mehr anzeigen

Html + CSS Zugriff durch Javascript

verlinkter text nach klick nicht mehr anzeigen

row einer Tabelle verstecken, aber nicht entsprechendes relative td

row einer Tabelle verstecken, aber nicht entsprechendes relative td

verlinkter text nach klick nicht mehr anzeigen

verlinkter text nach klick nicht mehr anzeigen

row einer Tabelle verstecken, aber nicht entsprechendes relative td

row einer Tabelle verstecken, aber nicht entsprechendes relative td

Mit :target Login form öffnen