donnerkai: Bilder verschwinden

Hallo,

ich habe zu einem Programm eine Onlinehilfe in HTML geschrieben und diese mit einer CSS Datei designt. Gestern habe ich nun versucht alle HTML in 2 Spalten darzustellen. Dazu habe ich diese Zeile im CSS hinzugefügt:
#navi { float:left;}  #inhalte { float:right;}

Das funktioniert auch soweit ganz gut. Leider werden mir alle Bilder in meinen HTML nicht mehr angezeigt sobald ich die Zeile hinzufüge. Weiss jemand warum das so ist???

Hier noch mal der komplette Quelltext des CSS:

body         { font-family:arial,sans-serif; background-color:#EBE9D8; margin-left:10%; margin-right:20%; margin-top:10px; margin-bottom:10px; } <!-- Farb- und Schriftbestimmung der Hauptanwendung-->
  p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i { font-family:arial,sans-serif; color:#070204; }
  h1     { font-size:18pt; color:#070204; }
  h2     { font-size:14pt; color:#070204; }
  h3,    { font-size:12pt; color:#070204; }
  h4     { font-size:12pt; color:#070204; }
  p, ul, ol, li, div, td, th, address, nobr, b, i { font-size:12pt; color:#070204; }
  pre          { font-family:courier new,courier; font-size:12pt; color:#070204; }
  a:link       { color:##0000FF; text-decoration:underline; }
  a:visited    { color:#800080; text-decoration:underline; }
  a:hover { color:#FF0000; text-decoration:none;}
  a:active     { color:#FF0000; text-decoration:none; }
  a.an         { text-decoration:none; }
  tt           { font-family:courier new,courier; font-size:12pt; color:#070204; }
  td.xmpcode   { background-color:#FAF8F3; color:#C0C0C0; border:1pt solid #999999; }
  .code        { background-color:#FAF8F3; }
  td.xplcode   { background-color:#FAF8F3; }
  .doc         { background-color:#FAF8F3; }
  .qbar        { background-color:#FAF8F3; font-size:9pt; font-family:arial,sans-serif; }
  pre.normal   { color:#000000; }
   #navi { float:left;}  #inhalte { float:right;}

  1. Moin!

    Kannst Du ein Beispiel online stellen?

    --
    Signaturen sind blöd!
    1. hier mal der code eines dazugehörigen html

      !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">  
      <html>  
      <head>  
      <meta name="keywords"content="kalender,kalenderelement,datumsfenster,datum,>  
      <meta name="robots" content="all">  
        <title>das kalenderelement</title>  
        <link rel="stylesheet" type="text/css" href="formate.css">  
      </head>  
      <body lang="de-DE">  
       <h1><a name="das kalenderelement"></a>Das Kalenderelement</h1>  
       <br>  
       <hr>  
       <br><br>  
       <h2>Datumsauswahl mit dem Kalenderelement</h2>  
          An mehreren Stellen kann eine Datumsauswahl über das so genannte Kalenderelement durchgeführt werden.  
      	Das Datum in den Datumsfeldern kann manuell überschrieben werden. Alternativ dazu kann das Datum über das Kalenderelement gesetzt werden.  
      	Hierfür muss im Bearbeiten Modus zunächst über einen Klick auf den Pfeil am Ende eines Datumsfeldes das Kalenderelement geöffnet werden.  
      	<br><br>  
       <p><img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnene"width="14%" height="16%"</p>  
       <br><br>  
       Anschließend kann das gewünschte Datum, per Doppelklick auf den enstprechenden Tag, übernommen werden.  
       Über die Schaltflächen < und > kann jeweils einen Monat vor- oder zurückgeblättert werden, über die Schaltflächen << und >> jeweils ein Jahr.  
       <br><br><br><br>  
      <br><br>  
      </body>  
      </html>
      
      1. @@donnerkai:

        nuqneH

        !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

        Das fehlende '<' ist beim Kopieren/Einfügen verlorengegangen?

        HTML 3.2?? Das ist sowas von veraltet! Verwende HTML 4.01 bzw. HTML5!

        <html>

        <body lang="de-DE">

        Die Angabe der Sprache gehört nicht ins 'body'-, sondern ins 'html'-Element. (Die Sprache gilt ja auch für die Elemente im 'head': Seitentitel, Meta-Angaben.) "de-DE" ist meist sinnlos (Wo ist der Unterschied zu "de-AT"?), verwende "de"! Also:

        <html lang="de"><body>
        

        <br><br><br><br>
        <br><br>

        Was ist das für ein Geräusch?

        Weg mit den 'br'! Abstände erzeugst du mit CSS.

        Und wo ist dein Online-Beispiel?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Ok, ich werde Eure Tipps versuchen zu beherzigen. Ich bin totaler Anfänger in diesem Bereich. Die fehlenden End Tags sind beim copy and paste verloren gegangen. Die anderen Tipps werde ich beherzigen :-)
          Hier das fehlende HTML...

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
          <html>
          <head>
          <meta name="keywords"content="kalender,kalenderelement,datumsfenster,datum,>
          <meta name="robots" content="all">
            <title>das kalenderelement</title>
            <link rel="stylesheet" type="text/css" href="formate.css">
          </head>
          <body lang="de-DE">

          <div id="navi"> <ul>   <li>Startseite</li>   <li>Impressum</li> </ul> </div>
          <div id="inhalte">
           <h1><a name="das kalenderelement"></a>Das Kalenderelement</h1>
           <br>
           <hr>
           <br><br>
           <h2>Datumsauswahl mit dem Kalenderelement</h2>
              An mehreren Stellen in Basis Web kann eine Datumsauswahl über das so genannte Kalenderelement durchgeführt werden.
                  Das Datum in den Datumsfeldern kann manuell überschrieben werden. Alternativ dazu kann das Datum über das Kalenderelement gesetzt werden.
                  Hierfür muss im Bearbeiten Modus zunächst über einen Klick auf den Pfeil am Ende eines Datumsfeldes das Kalenderelement geöffnet werden.
                  <br><br>
           <p><img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnen"width="14%" height="16%"></p>
           <br><br>
           Anschließend kann das gewünschte Datum, per Doppelklick auf den enstprechenden Tag, übernommen werden.
           Über die Schaltflächen < und > kann jeweils einen Monat vor- oder zurückgeblättert werden, über die Schaltflächen << und >> jeweils ein Jahr.
           <br><br><br><br>
          <br><br>
          </div>
          </body>
          </html>

          @@donnerkai:

          nuqneH

          !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

          Das fehlende '<' ist beim Kopieren/Einfügen verlorengegangen?

          HTML 3.2?? Das ist sowas von veraltet! Verwende HTML 4.01 bzw. HTML5!

          <html>

          <body lang="de-DE">

          Die Angabe der Sprache gehört nicht ins 'body'-, sondern ins 'html'-Element. (Die Sprache gilt ja auch für die Elemente im 'head': Seitentitel, Meta-Angaben.) "de-DE" ist meist sinnlos (Wo ist der Unterschied zu "de-AT"?), verwende "de"! Also:

          <html lang="de">


          <body>

          
          >   
          >   
          > >  <br><br><br><br>  
          > > <br><br>  
          >   
          > Was ist das für ein [Geräusch](http://community.de.selfhtml.org/zitatesammlung/zitat1275)?  
          >   
          > Weg mit den 'br'! Abstände erzeugst du mit CSS.  
          >   
          > Und wo ist dein [Online-Beispiel](http://community.de.selfhtml.org/zitatesammlung/zitat1632)?  
          >   
          > Qapla'
          
      2. Hallo,

        Neben dem was Gunnar schon schrieb:

        <meta name="keywords"content="kalender,kalenderelement,datumsfenster,datum,>[...]

        <img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnene"width="14%" height="16%"

          
        Vielleicht solltest du Attribute und Elemente auch anständig wieder schließen und nicht einfach " oder > weglassen ...  
          
        
        >  `<h1><a name="das kalenderelement"></a>Das Kalenderelement</h1>`{:.language-html}  
          
        vergiss <a name=""> und verpass dem <h1> stattdessen ein id-Attribut (und lass bei der Gelegenheit das Leerzeichen im Ankernamen gleich weg).  
          
        
        > </html>  
          
        Und wo sind jetzt #navi und #inhalte welche du floaten möchtest?  
          
        zum CSS-Code aus deinem ersten Posting: <!-- […] --> ist in CSS kein Kommentar.  
          
          
        Gruß,  
        Tobias
        
      3. Hi!

        Interessanter Effekt. Kann ich mit nem IE8 nachvollziehen. Nen portable FF 3.6.10 hat keine Probleme.

        <img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnene" width="14%" height="16%">

        Entferne die merkwuerdigen width und height Attribute. Dann klappts auch mitm Nachbarn aus Redmond. Die beiden Attribute sind dafuer da, dass der Browser weiss, wieviel Platz er reservieren soll und nicht zum skalieren von Grafiken. Erstelle also Grafiken in der gewuenschten Groesse oder formatiere sie mit CSS.

        --
        Signaturen sind blöd!
        1. PS: Gunnars Anmerkungen ueber einen ordentlichen Doctype (z.B. mit HTML 4.1) loesen Dein Problem allerdings auch. Ich denke mir allerdings, dass es irgendeinen komischen Grund fuer 3.4 gibt. Oder?

          --
          Signaturen sind blöd!
          1. Genau! Das Programm in das diese Hilfe nachher implementiert ist, nutzt eine Java Help Engine die nach Aussage der Programmierer nur mit dieser alten Version zurecht kommt. Ein Update wäre ein zu hoher Aufwand.

        2. Hallo,

          ich habe die Grafiken extra in Prozent angegeben, damit sie sich der Browsergröße anpassen. Wenn ich das Fenster minimiere sollen sich die Grafiken in der Größe anpassen. Das kann ich doch nur so erreichen, oder?

          1. ich habe die Grafiken extra in Prozent angegeben, damit sie sich der Browsergröße anpassen. Wenn ich das Fenster minimiere sollen sich die Grafiken in der Größe anpassen. Das kann ich doch nur so erreichen, oder?

            Du kannst auch im CSS die Grafiken in % angeben. Allerdings tritt dort auch der gleiche Bug auf, dass das Bild verschwindet, sobald Du Hoehe und Breite angibst. Das kannst Du umschiffen: Das Bild wird in meinem IE8 angezeigt, wenn Du nur width angibst.

            --
            Signaturen sind blöd!
            1. Das hat wunderbar geklappt! Vielen Dank!!

  2. Hi,

    ich habe zu einem Programm eine Onlinehilfe in HTML geschrieben und diese mit einer CSS Datei designt. Gestern habe ich nun versucht alle HTML in 2 Spalten darzustellen. Dazu habe ich diese Zeile im CSS hinzugefügt:
    #navi { float:left;}  #inhalte { float:right;}

    Das funktioniert auch soweit ganz gut. Leider werden mir alle Bilder in meinen HTML nicht mehr angezeigt sobald ich die Zeile hinzufüge. Weiss jemand warum das so ist???

    Nein, das kann man auf Basis der spärlichen Information höchstens vermuten.

    Vermutung: Du redest von Hintergrundbildern, und die sind jetzt „weg“, weil du nicht berücksichtigt hast, dass die Vorfahrenelemente der gefloateten jetzt durch diese keine automatische Höhe mehr bekommen.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  3. Ok, ich werde Eure Tipps versuchen zu beherzigen. Ich bin totaler Anfänger in diesem Bereich. Die fehlenden End Tags sind beim copy and paste verloren gegangen. Die anderen Tipps werde ich beherzigen :-)
    Hier das fehlende HTML...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">  
    <html>  
    <head>  
    <meta name="keywords"content="kalender,kalenderelement,datumsfenster,datum,>  
    <meta name="robots" content="all">  
      <title>das kalenderelement</title>  
      <link rel="stylesheet" type="text/css" href="formate.css">  
    </head>  
    <body lang="de-DE">  
      
    <div id="navi"> <ul>   <li>Startseite</li>   <li>Impressum</li> </ul> </div>  
    <div id="inhalte">  
     <h1><a name="das kalenderelement"></a>Das Kalenderelement</h1>  
     <br>  
     <hr>  
     <br><br>  
     <h2>Datumsauswahl mit dem Kalenderelement</h2>  
        An mehreren Stellen in Basis Web kann eine Datumsauswahl über das so genannte Kalenderelement durchgeführt werden.  
    	Das Datum in den Datumsfeldern kann manuell überschrieben werden. Alternativ dazu kann das Datum über das Kalenderelement gesetzt werden.  
    	Hierfür muss im Bearbeiten Modus zunächst über einen Klick auf den Pfeil am Ende eines Datumsfeldes das Kalenderelement geöffnet werden.  
    	<br><br>  
     <p><img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnen"width="14%" height="16%"></p>  
     <br><br>  
     Anschließend kann das gewünschte Datum, per Doppelklick auf den enstprechenden Tag, übernommen werden.  
     Über die Schaltflächen < und > kann jeweils einen Monat vor- oder zurückgeblättert werden, über die Schaltflächen << und >> jeweils ein Jahr.  
     <br><br><br><br>  
    <br><br>  
    </div>  
    </body>  
    </html>
    

    Hallo,

    ich habe zu einem Programm eine Onlinehilfe in HTML geschrieben und diese mit einer CSS Datei designt. Gestern habe ich nun versucht alle HTML in 2 Spalten darzustellen. Dazu habe ich diese Zeile im CSS hinzugefügt:
    #navi { float:left;}  #inhalte { float:right;}

    Das funktioniert auch soweit ganz gut. Leider werden mir alle Bilder in meinen HTML nicht mehr angezeigt sobald ich die Zeile hinzufüge. Weiss jemand warum das so ist???

    Hier noch mal der komplette Quelltext des CSS:

    body         { font-family:arial,sans-serif; background-color:#EBE9D8; margin-left:10%; margin-right:20%; margin-top:10px; margin-bottom:10px; } <!-- Farb- und Schriftbestimmung der Hauptanwendung-->
      p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i { font-family:arial,sans-serif; color:#070204; }
      h1     { font-size:18pt; color:#070204; }
      h2     { font-size:14pt; color:#070204; }
      h3,    { font-size:12pt; color:#070204; }
      h4     { font-size:12pt; color:#070204; }
      p, ul, ol, li, div, td, th, address, nobr, b, i { font-size:12pt; color:#070204; }
      pre          { font-family:courier new,courier; font-size:12pt; color:#070204; }
      a:link       { color:##0000FF; text-decoration:underline; }
      a:visited    { color:#800080; text-decoration:underline; }
      a:hover { color:#FF0000; text-decoration:none;}
      a:active     { color:#FF0000; text-decoration:none; }
      a.an         { text-decoration:none; }
      tt           { font-family:courier new,courier; font-size:12pt; color:#070204; }
      td.xmpcode   { background-color:#FAF8F3; color:#C0C0C0; border:1pt solid #999999; }
      .code        { background-color:#FAF8F3; }
      td.xplcode   { background-color:#FAF8F3; }
      .doc         { background-color:#FAF8F3; }
      .qbar        { background-color:#FAF8F3; font-size:9pt; font-family:arial,sans-serif; }
      pre.normal   { color:#000000; }
       #navi { float:left;}  #inhalte { float:right;}

    1. Hallo donnerkai,

      Die fehlenden End Tags sind beim copy and paste verloren gegangen.

      Das fehlende Anführungszeichen im ersten meta-Element fehlt aber immernoch ...

      <p><img src="bilder/kalenderelement.jpg" alt="Kalenderelement öffnen"width="14%" height="16%"></p>

      Da du immernoch keine Onlinebeispiel verlinkt hast kann ich nur raten, aber vielleicht "verschwindet" das Bild da das Elternelement eine Breite von 0 hat und 14% von 0 eben immer noch 0 sind.

      Hallo, [Fullquote entsorgt]

      http://learn.to/quote

      Gruß,
      Tobias

      1. Ein Onlinebeispiel kann ich nicht verlinken, da das alles noch nicht online ist.

        Das mit dem Elternelement verstehe ich nicht. Ich habe ja lediglich die letzte Zeile im CSS ergänzt. Vorher ging es.