kostenloser Webspace werbefrei: lima-city

HTML prozentuale Quadrate

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

bild browser code eigenschaft element falle funktion http idee karte machen problem quader quadrat standard tabelle url versuchen vollmond zeile
    1. «
    2. 1
    3. 2
  1. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    15:19, 29.1.2013
    xian schrieb:
    <nobr>
    ist nicht standard, es funktioniert bloß. :tongue:

    Selbst wenn es beim Firefox funktionieren würde, dann sollte man es trotzdem weglassen, denn nicht offizielle Tags können von verschiedenen Browsern sehr unterschiedlich gedeutet werden.
    xian schrieb: 
    white-space:nowrap;
    funtioniert zb auch bei <div>s :smile:

    hcms schrieb:
    ja denkste - funktioniert in diesem falle mit den bildern aber tatsächlich nicht.

    Ich stimme hcms zu.
    hcms schrieb:
    Warum muss <br> die CSS Eigenschaft "clear: left;" zugeordnet bekommen?

    nun, da wir die bilder ja mit float:left versehen haben um sie nebeneinander zu bekommen ist es nur konsequent die (nach x bildern pro zeile gewollten) zeilenumbrüche mit clear:left zu versehen. natürlich wäre es nicht unbedingt notwendig solange jedes bild genau die selbe größe hat, und diese identisch mit der line-height wäre - aber der explorer lehrt uns: `sicher ist sicher` ;-)

    außerdem sollte zumindest das allerletze <br> (nach allen bildern, vorm schließen des <div>) ein clear haben, damit das html-static layout wieder hergestellt wird (und somit das div auch browserübergreifend sicher richtig aufgespannt wird).

    Das leuchted ein, jetzt habe ich es glaube ich verstanden, danke.
    xian schrieb:
    darf man, wenns fertig ist, dein projekt sehen?

    Ja, betonung liegt auf WENN ;-). Ich bin mitlerweile seit einem halben Jahr dadran. Nicht nur die Positionierung von ein paar Bildern, sondern überhaupt PHP, CSS und Javascript zu lernen. Als ich angefangen habe konnte ich noch nur HTML. Ich nutze dieses Gesammtprojekt als Weg, Webseitenprogrammierung zu lernen.
    MFG THWBM

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. xian

    xian hat kostenlosen Webspace.

    20:49, 29.1.2013
    hcms schrieb: ja denkste - funktioniert in diesem falle mit den bildern aber tatsächlich nicht.
    bei mir schon:
    <html><head><style type="text/css">
.dinl {display:inline}
.nobr {white-space:nowrap;}
</style></head><body>

<p class="nobr">x x x x x
<img class="dinl" src="x.jpg">
<img class="dinl" src="y.jpg">
x x x x x</p>

</body></html>


    Beitrag zuletzt geändert: 29.1.2013 20:53:04 von xian
  4. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    21:10, 29.1.2013
    xian schrieb:
    hcms schrieb: ja denkste - funktioniert in diesem falle mit den bildern aber tatsächlich nicht.
    bei mir schon:
    <html><head><style type="text/css">
.dinl {display:inline}
.nobr {white-space:nowrap;}
</style></head><body>

<p class="nobr">x x x x x
<img class="dinl" src="x.jpg">
<img class="dinl" src="y.jpg">
x x x x x</p>

</body></html>

    Bei mir auch und das wundert mich. Anfangs hatte es nicht funktioniert, was eigentlich nicht sein kann. Gibt es eine CSS Eigenschaft, die 
    white-space: nowrap;
    blockiert und die gesetzt war? Warum hast du 
    display: inline;
    für die Bilder gesetzt? Bei mir funktioniert es auch ohne. Ist das für den Internet Explorer oder sollte es auch beim Firefox nötig sein?
    MFG THWBM

  5. xian

    xian hat kostenlosen Webspace.

    21:21, 29.1.2013
    was weiß ich, welcher browser in welchem modus bei vollmond an ungeraden tagen was macht.
    würden sich die browser-hersteller an die standards halten, wärs wohl zu einfach :-|
    <html><body>
<div style="white-space:nowrap;">x x x x x
<img src="x.jpg"> <img src="y.jpg"> x x x x x</div>
</body></html>
    funkt bei mir auch.
  6. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    21:52, 29.1.2013
    xian schrieb:
    was weiß ich, welcher browser in welchem modus bei vollmond an ungeraden tagen was macht.

    Ich schmeiß mich weg vor lachen :biggrin:.
    xian schrieb:
    würden sich die browser-hersteller an die standards halten, wärs wohl zu einfach :-|

    Ja, das wäre es leider.
    xian schrieb: 
    <html><body>
<div style="white-space:nowrap;">x x x x x
<img src="x.jpg"> <img src="y.jpg"> x x x x x</div>
</body></html>
    funkt bei mir auch.

    Und wofür war dann das 
    display: inline;
    ? Laut Selfhtml ist das um Elemente im Textfluss anzuzeigen, aber macht es einen Unterschied wenn man es weglässt?Es funktionieren ja beides, aber wie du schon sagtest:

    was weiß ich, welcher browser in welchem modus bei vollmond an ungeraden tagen was macht.

    MFG THWBM

  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    22:01, 29.1.2013
    thwbm schrieb:
    Und wofür war dann das 
    display: inline;
    ? Laut Selfhtml ist das um Elemente im Textfluss anzuzeigen, aber macht es einen Unterschied wenn man es weglässt?Es funktionieren ja beides, aber wie du schon sagtest:
    was weiß ich, welcher browser in welchem modus bei vollmond an ungeraden tagen was macht.
    Ein 
    <img>
    -Element ist sowieso ein 
    inline
    -Element (ganz genau: 
    inline-block
    ). Du brauchst das also nicht extra nochmal anzugeben.

  8. h**s

    9:21, 30.1.2013
    xian schrieb:

    hcms schrieb: ja denkste - funktioniert in diesem falle mit den bildern aber tatsächlich nicht.

    bei mir schon:
    na das <nowrap> bzw white-space:nowrap; nicht funktioniert habe ich ja auch gar nicht gesagt... ich bezog mich auf dein ursprünglich besagtes <nobr>

    nichts desto trotz ist wohl die variante ohne float einfacher und browser-entlastender...
    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>viele quadrate</title>
    
    <style type="text/css">
      div {
        line-height:1px;
        white-space:nowrap;
      }
      img {
        width:4%;   /* 32 mal 4% = 128% vom body */
      }
    </style>
    
  </head>
  <body>
  
    <div>
      <?php
        for($iZeile=1;$iZeile<=16;$iZeile++) {
          for($iSpalte=1;$iSpalte<=32;$iSpalte++) {
            echo '<img src="quadratischesbild.gif" alt="">';
          }
          echo '<br>';
        }
      ?>
    </div>
    
  </body>
</html>

  9. xian

    xian hat kostenlosen Webspace.

    12:01, 30.1.2013
    hcms schrieb:
    na das <nowrap> bzw white-space:nowrap; nicht funktioniert habe ich ja auch gar nicht gesagt... ich bezog mich auf dein ursprünglich besagtes <nobr>
    ich wollte bloß ideen liefern. wusstest du, dass der arme thwbm schon ½ jahr dran bastelt?
    wenn es darum geht, dass du recht hast: ok, du hast recht.
    oh nein, jüngst war wohl vollmond: bei meinen browsern ist auch das folgende bruchsicher:
    <html><body>
<nobr>x x x x x <img src="x.jpg"> <img src="y.jpg"> x x x x x</nobr>
</body></html>

  10. h**s

    12:25, 30.1.2013
    oh nein, jüngst war wohl vollmond

    hehe - ja anscheinend hat der vollmond wohl vor allem den firefox zum wehrwolf mutieren lassen... :pissed:
    habt ihr da auch so unglaubliche performanceprobleme (20% prozessorauslastung und rumgestocke) wenn man auch nur die maus bewegt seit dem neuesten update ?
  11. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    17:24, 31.1.2013
    xian schrieb:
    wusstest du, dass der arme thwbm schon ½ jahr dran bastelt?

    Ich bastel seit einem halben Jahr an der Gesammten Seite, die ich hauptsächlich mache, um PHP, Javascript und CSS zu lernen, wie ich bereits schrieb. Ich bin nicht schon so lange damit beschäfttigt, diese Bilder dementsprechend zu positionieren und die größe festzulegen. Für mich liest sich das so, als würdest du davon ausgehen.
    xian schrieb:
    bei meinen browsern ist auch das folgende bruchsicher:
    <html><body>
<nobr>x x x x x <img src="x.jpg"> <img src="y.jpg"> x x x x x</nobr>
</body></html>

    Bruchsicher, aber nicht HTML-Konform. <nobr> ist nicht teil des offiziellen HTML-Sprachstandarts, man sollte deshalb darauf verzichten.

    Ich habe jetzt eine funktionierende Lösung gefunden, wenn sie Fehler bzw. überflüssige Zeilen enthält, wäre ich euch über einen Hinweis dankbar (der äußere Div ist in einer Tabelle platziert.):
    index.php:
    <div id="KartePlatzierung">
  <div id="KarteBereich">
    <div id="KarteScrollbar">
      <div id="Karte">
        <?php
          for($iZeile=1;$iZeile<=48;$iZeile++) { //Die Bilder wuerde ich durch verschiedene ersetzen
            for($iSpalte=1;$iSpalte<=96;$iSpalte++) {
              ?>
                <img class="KarteBild" src="Bild.jpg" alt="">
             <?php
            }
            ?>
              <br class="BrKarteBild">
            <?php
          }
        ?>
      </div>
    </div>
  </div>
</div>

    CSS:
    #KartePlatzierung {
  position:relative;
  top:auto;
  left:auto;
  width: 100%;
  height: 100%;
}
#KarteBereich {
  position: absolute;
  width: 100%;
  height: 100%;
}
#KarteScrollbar {
  width: 100%;
  height: 100%;
  overflow:scroll;
}
#Karte {
  border-spacing: 0;
  width:300%;
  line-height:0%;
}
.BrKarteBild {
  clear:left;
}
.KarteBild {
  float: left;
}

    Javascript:
    //UEber jQuery wird bei jeder Größenveränderung die entsprechende Funktion aufgerufen,
//Zusaetzlich wird die Funktion auch ueber "<body onload="Groessenanpassung()" onresize="Groessenanpassung()">"
//aufgerufen
$(window).resize(function() {
  Groessenanpassung();
});
function Groessenanpassung() {
  $(document).ready(function() {
    $(".KarteBild").css("width", 100 / 96 + "%");
    $("#Karte").css('height', 48 * $(".KarteBild").width() + "px");
    $("#Karte").css('width', 300 + "%");
    $("#Karte").css('width', 96 * $(".KarteBild").width() + "px");
    $(".KarteBild").css("height", $("#Karte").height() / 48 + "px");	
  });

    Falls noch Fehler, um die ich mich kümmern sollte, enthalten sind, bitte Melden. Falls noch Fragen vorkommen, ebenfalls.
    MFG THWBM

  12. h**s

    17:52, 31.1.2013
    hmm - das sieht für mich irgendwie nicht nach einer funktionierenden lösung aus...

    ...und wozu denn jetzt wieder javascript ? ich dachte du wolltest mit relativen css-angaben arbeiten ? :wazzup:
  13. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    17:58, 31.1.2013
    hcms schrieb:
    hmm - das sieht für mich irgendwie nicht nach einer funktionierenden lösung aus...

    Was sieht für dich nicht nach einer funktionierenden Lösung aus? Was funktioniert nicht? Bei mir funktioniert es.

    ...und wozu denn jetzt wieder javascript ? ich dachte du wolltest mit relativen css-angaben arbeiten ? :wazzup:

    Ja, wollte ich, das hat aber nicht funktioniert, da dann, ich schätze auf grund von Rundungsungenauigkeiten der Prozentwerte auf Pixel, am unteren Rand der Scrollbox ein Rand geblieben ist. Ich habe die Höhe festgesetzt, weil ich die Bilder später nachladen will, erst wenn sie im sichtbaren Bereich sind, ohne dass die Scrollbar ihre größe ändert.
    MFG THWBM

  14. h**s

    9:59, 1.2.2013
    Was sieht für dich nicht nach einer funktionierenden Lösung aus? Was funktioniert nicht? Bei mir funktioniert es.
    nun ich habe den code mal so ausprobiert: 
    <!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--[if lt IE 9]><script type="text/javascript" src="ie-mod.js"></script><![endif]-->
        <script type="text/javascript" src="jq.js">
		</script>
		<script type="text/javascript">
        	$(window).resize(function() {
			  Groessenanpassung();
			});
			function Groessenanpassung() {
			  $(document).ready(function() {
				$(".KarteBild").css("width", 100 / 96 + "%");
				$("#Karte").css('height', 48 * $(".KarteBild").width() + "px");
				$("#Karte").css('width', 300 + "%");
				$("#Karte").css('width', 96 * $(".KarteBild").width() + "px");
				$(".KarteBild").css("height", $("#Karte").height() / 48 + "px");   
			  });
			}
        </script>
        <style type="text/css">
			#KartePlatzierung {
			  position:relative;
			  top:auto;
			  left:auto;
			  width: 100%;
			  height: 100%;
			}
			#KarteBereich {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			}
			#KarteScrollbar {
			  width: 100%;
			  height: 100%;
			  overflow:scroll;
			}
			#Karte {
			  border-spacing: 0;
			  width:300%;
			  line-height:0%;
			}
			.BrKarteBild {
			  clear:left;
			}
			.KarteBild {
			  float: left;
			}
		</style>
    </head>
    <body onLoad="Groessenanpassung()" onResize="Groessenanpassung()">
    	
        <div id="KartePlatzierung">
          <div id="KarteBereich">
            <div id="KarteScrollbar">
              <div id="Karte">
                <?php
                  for($iZeile=1;$iZeile<=48;$iZeile++) { //Die Bilder wuerde ich durch verschiedene ersetzen
                    for($iSpalte=1;$iSpalte<=96;$iSpalte++) {
                      ?>
                        <img class="KarteBild" src="Bild.jpg" alt="">
                     <?php
                    }
                    ?>
                      <br class="BrKarteBild">
                    <?php
                  }
                ?>
              </div>
            </div>
          </div>
        </div>
        
    </body>
</html>
    , natürlich mit einem Bild.jpg und jquery-ressource vorhanden - aber meine browser (ie8 & firefox15 & chrome24) zeigen mir dann nur einen weißen bildschirm ohne alles...
  15. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    11:56, 1.2.2013
    hcms schrieb:
    Was sieht für dich nicht nach einer funktionierenden Lösung aus? Was funktioniert nicht? Bei mir funktioniert es.
    nun ich habe den code mal so ausprobiert:
    [...]
    , natürlich mit einem Bild.jpg und jquery-ressource vorhanden - aber meine browser (ie8 & firefox15 & chrome24) zeigen mir dann nur einen weißen bildschirm ohne alles...

    Dann versuche mal das hier:
    <html>
  <head>
    <meta charset="utf-8">
    <title>
      Gr&ouml;&szlig;enanpassung
    </title>
    <script type="text/javascript" src="http://localhost/Websits/Browsergame/mit Registrierung/jQuery/jquery-1.8.2.js">
    </script>
    <script type="text/javascript">
      $(window).resize(function() {
        Groessenanpassung();
      });
      function Groessenanpassung() {
        $(document).ready(function() {
          $(".KarteBild").css("width", 100 / 96 + "%");
          $("#Karte").css('height', 48 * $(".KarteBild").width() + "px");
          $("#Karte").css('width', 300 + "%");
          $("#Karte").css('width', 96 * $(".KarteBild").width() + "px");
          $(".KarteBild").css("height", $("#Karte").height() / 48 + "px");  
        });
      }
    </script>
    <style type="text/css">
      #KartePlatzierung {
        position:relative;
        top:auto;
        left:auto;
        width: 100%;
        height: 100%;
        background-color: #FF0000;
      }
      #KarteBereich {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #0000FF;
      }
      #KarteScrollbar {
        width: 100%;
        height: 100%;
        overflow:scroll;
        background-color: #888888;
      }
      #Karte {
        border-spacing: 0;
        width:300%;
        line-height:0%;
        background-color: #00FFFF;
      }
      .BrKarteBild {
        clear:left;
      }
      .KarteBild {
        float: left;
      }
      html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow:auto;
        text-align:center;
      }
    </style>
  </head>
  <body onload="Groessenanpassung()" onresize="Groessenanpassung()">
    <div id="KartePlatzierung">
      <div id="KarteBereich">
        <div id="KarteScrollbar">
          <div id="Karte">
            <?php
              for($iZeile=1;$iZeile<=48;$iZeile++) {
                for($iSpalte=1;$iSpalte<=96;$iSpalte++) {
                  ?>
                    <img class="KarteBild" src="Bild.jpg" alt="">
                  <?php
                }
                ?>
                  <br class="BrKarteBild">
                <?php
              }
            ?>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

    Ich habe jetzt mal Hintergrundfarben für die Divs vergeben, damit man sie besser zuordnen kann, falls einer zu groß ist. Außerdem habe ich noch CSS-Eigenschaften für <html> und <body> vergeben, die ich vergessen hatte. Ich habe den Code getestet und direkt danach kopiert und hier eingefügt, es sollten also keine Fehler mehr auftauchen.
    MFG THWBM

  16. h**s

    12:19, 1.2.2013
    ja das funktioniert, mal abgesehen vom ie8... der zeigt mir nen halben bildschirm rot und zwei scroll-leisten...
  17. Autor dieses Themas

    thwbm

    thwbm hat kostenlosen Webspace.

    21:16, 1.2.2013
    hcms schrieb:
    ja das funktioniert, mal abgesehen vom ie8... der zeigt mir nen halben bildschirm rot und zwei scroll-leisten...

    Mir zeigt der Internet Explorer auch interessante Sachen an, Effekte von denen ich nicht wüsste, wie ich sie dem Firefox beibringen sollte, macht der IE von ganz alleine, aber ungewollt. Sieht Irgendjemand (und damit meine ich jetzt nicht nur hcms) noch Änderungsbedarf in dem Script? Falls nicht, hat sich das Thema hier an dieser Stelle erledigt.
    Ich denke, dass sollte eigentlich so in ordnung sein, denn bei den häufig verwendeten Browsern funktioniert es ja. Das sollte eigentlich reichen.
    MFG THWBM

  18. h**s

    9:21, 4.2.2013
    heh - bedenke das alle leute die windows-xp benutzen den ie8 haben, der ja für win-xp auch nicht weiter upgradebar ist... und zb in der arbeitswelt ist windows-xp leider noch sehr sehr verbreitet weil viele arbeitgeber die ausgaben für viele neue lizenzen scheuen solange das system läuft...

  19. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

    1. «
    2. 1
    3. 2

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!