Ergebnis 1 bis 1 von 1

Thema: CSS Bild nach 'float:none' unsichtbar

  1. #1
    HTML Newbie
    Registriert seit
    14.01.2015
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage CSS Bild nach 'float:none' unsichtbar

    Guten Abend!

    Dies ist mein erster Beitrag auf dem Forum, da ich auch erst mit HTML angefangen habe.

    Naja, mein Problem ist folgendes: Ich habe eine Website, die sich auf Handys anpassen soll. Dabei habe ich drei Bilder bzw. Links und Text (siehe JSFiddle für Verständnis), die nebeneinander sind. Das mache ich natürlich mit float: left.
    Wenn die Website nun allerdings auf einem Gerät aufgerufen wird, dessen Displayweite kleiner als 1200px ist, sollen sie untereinander sein. Das müsste doch mit float:none gehen oder?

    Ich poste hier den wichtigen Quelltext, ein Link zu einem Life-Beispiel mithilfe von jsfiddle folgt:

    HTML-Datei:
    HTML-Code:
    <a class="BigImage" href="b3d.html" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg')">                        
                        <div class="BigImageOver">
                            <div class="BigImageText">
                               <h3>Titel #1</h3>
                                <p>
                                    Text Test Text Eins </br>
                                   Text Test Text Eins Text Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text                                          EinsText Test Text Eins
                                </p>
                            </div>
                        </div>
                    </a>
    
                    <a class="BigImage Second" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg');" href="#">
                        <div class="BigImageOver">
                            <div class="BigImageText">
                                <h3>Titel #2</h3>
                                <p>
                                    Text Test Zwei </br>
                                   Text Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test Zwei
                                </p>
                            </div>
                        </div>
                    </a>
    
                   <a class="BigImage Second" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg');" href="#">
                       <div class="BigImageOver">
                           <div class="BigImageText">
                                <h3>Titel #3</h3>
                                <p>
                                    Text Test Drei </br>
                                Text Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test Drei
                                </p>
                            </div>
                        </div>
                    </a>
    Css-Datei:
    Code:
    .BigImage {    color: rgb(255, 255, 255);
        width: 360px;
        height: 360px;
        box-shadow: 0px 1px 2px rgb(10, 0, 0);
        border-bottom: 1px solid rgb(10, 0 ,0);
        float: left;
        background-size: 100% 100%;
        background-color: white;
    }
    
    
    .BigImageOver {
        opacity: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0);
    
    
        transition: opacity .30s ease-in-out;
       -moz-transition: opacity .30s ease-in-out;
       -webkit-transition: opacity .30s ease-in-out;
    }
    
    
    .Second {
        margin-left: 2%;
    }
    
    
    .BigImageText {
        opacity: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        
        transition: opacity .30s ease-in-out;
       -moz-transition: opacity .30s ease-in-out;
       -webkit-transition: opacity .30s ease-in-out;
    }
    
    
    .BigImageText h3 {
      padding-top: 5%;
      margin-top: 0%;
      padding-bottom: 5%;
      color: white;
      border-bottom: 1px solid #cccccc;
      font-size: 30px;
    }
    
    
    .BigImageText p {
      color: white;
      margin-left: 2%;
      margin-right: 2%;
      margin-bottom: 1%;
    }
    
    
    .BigImageText a {
      margin-left: 1%;
      font-family: "Lato";
      font-size: 18px;
      color: white;
    }
    
    
    .BigImage:hover .BigImageOver{
        opacity: 0.7;
    }
    
    
    .BigImage:hover .BigImageText{
        opacity: 1;
    }
    
    
    @media (max-width: 1200px) {
        .BigImage {
            margin-left: auto;
            margin-right: auto;
            width: 360px;
            height: 360px;
            float: none;
        }
    
    
        .Second {
            margin: 0%;
        }
    
    
        .BigImageText h3 {
            padding-top: 2%;
            padding-bottom: 2%;
        }
    }
    JSFiddle:
    http://jsfiddle.net/FERNman/bqmrq2mh/

    Verstehe nicht, warum es nicht geht bzw. die Größe des BigImage divs automatisch auf auto und somit auf 0x0 Pixel gesetzt wird. Achja, und kann mir bitte jemand sagen, warum der <p> Bereich die Opacity von .BigImageOver übernimmt?

    Hoffe ihr könnt mir helfen,

    MFG und Danke im Voraus!
    FERNman
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von FERNman (14.01.2015 um 20:21 Uhr)

Ähnliche Themen

  1. Neue Zeile nach Bild
    Von hellys-shop im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 24.06.2014, 18:21
  2. Bild- Float oder align="absmiddle"??
    Von [C]arp[h]unter im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.05.2011, 08:19
  3. Bild soll erst nach 30 sek erscheinen
    Von badmaxx im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 09.02.2007, 09:23
  4. Von links nach rechts fliegendes Bild
    Von felix3103 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 24.07.2006, 22:52
  5. Bild nach Rechts
    Von c0d3r 4NfÄn93r im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.09.2004, 21:35

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •