Ergebnis 1 bis 3 von 3

Thema: Skalierbare <div> mit Grafik per CSS

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

    Standard Skalierbare <div> mit Grafik per CSS

    Guten Tag !

    Ich habe in meinem Projekt zur Zeit ein kleines Problem, was ich nicht gelöst kriege. Es geht um den folgenden Code:

    HTML-Code:
    <div id="homepage-slider-wrap" class="clr flexslider-container">
    
        <div class="imageBox">        
    <div class="imageBoximage4"></div>     
     <div class="figure tr-slideIn">        
    <div class="text">        
    <div class="textinner">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr        
    </div>        
    </div>        
    </div>    
    </div>        
    
    <div class="imageBox">        
    <div class="imageBoximage5"></div>        
    <div class="figure tr-slideIn">        
    <div class="text">        
    <div class="textinner">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr        
    </div>        
    </div>        
    </div>    
    </div>       
    </div>
    Das CSS dazu:

    Code:
    .imageBoximage4 {
    position: relative;
            
            width: 1280px;
            height: 557px;
            margin: 0;
         
            -webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
            animation: animation linear 20s;
            background-image: url(http://wallalay.com/wp-content/uploads/2014/08/Backgrounds-44.jpg);
        }
        
    .imageBoximage5 {
            position: relative;
            width: 1280px;
            height: 557px;
            margin: 0;
            -webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
            animation: animation linear 20s;
            background-image: url(http://www.realrock993.com/wp-content/uploads/2014/03/3d-black-cubes-backgrounds-wallpapers1.jpg);
        }
        
        /* Chrome, Safari, Opera */
    @-webkit-keyframes animation {
        from {right:0px;}
        to {right:250px;}
    }
    
    
    /* Standard syntax */
    @keyframes animation {
        from {right: 0px;}
        to {right: 250px;}
    }
        
    
    
    .text {
    float:left;
    width: 313px;
    height: 557px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    } 
    
    
    .textinner {
    transform:translateX(-75px);
    } 
    
    
    .imageBox {
            position: relative;
            overflow: hidden;
            width: 313px;
            height: 557px;
            float: left;
            float:left;
    
    
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
             
        }
        
    .figure {
            position: absolute;
            bottom: 0; left: 0;
            padding: 5px;
            margin:5px;
            background: white;
        }
        
     .imageBox .tr-slideIn {
            left: -330px;
            width: 313px;
            height: 557px;
            margin: 0;
            padding-top: 85px;
            opacity: 0.7;   
            background:grey;
            color: white;
            -webkit-transition: all 0.5s;
        }
        
    .imageBox:hover .tr-slideIn {
            left: 0;
        }

    Allgemein geht es um zwei animierte DIV Links <imageBox> die per CSS mit einem Hintergrund und Animationen versehen sind. Diese befinden sich in einer anderen DIV <homepage-slider-wrap>.

    Das Ziel:

    Im Moment, wenn man die Größe der Seite verändert (Mit der Maus die Größe des Fensters), verdrängen sich die Elemente <imageBox> wenn der Platz nicht mehr ausreicht und die Formatierung der Seite wird unbrauchbar. Was erreicht werden soll, ist dass das DIV <homepage-slider-wrap> sich bei verkleinern des Fensters samt Inhalt verkleinert und dabei das Seitenverhältnis beibehalten wird.

    Hat jemand vielleicht einen Tipp wie ich das mit CSS schaffen kann ? Falls nicht, kann mir jemand mit Java weiterhelfen ?

    Vielen Dank !!!


    S.
    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 !!!!!

  2. #2
    Teeny
    Registriert seit
    01.08.2011
    Ort
    bei München
    Beiträge
    45
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Skalierbare <div> mit Grafik per CSS

    Für ein Responsive Layout darfst du keine festen Pixelgrößen verwenden.
    Nimm stattdessen Prozent oder bei Schriften em.

    VG Nadja

  3. #3
    HTML Newbie Avatar von Helpstar24
    Registriert seit
    18.11.2014
    Beiträge
    9
    Danke
    0
    Bekam 2 mal "Danke" in 2 Postings

    Standard AW: Skalierbare <div> mit Grafik per CSS

    Wie schon oben erwähnt. Es wäre sinnvoll nicht mit festen Größen zu arbeiten


    Du gibst jeder Div Ebene eine Width: von 100%. Wenn du 2 Nebeneinander haben möchtest,
    teilst du die 100% durch 2 also 50 % mal 50%.

    Beim Live Minimieren des Webbrowsers wirst du dann feststellen, dass die Box Ebene sich dann anpassen tut.

    Bzgl. deines Background Problems: Das hier könnte dir aber vielleicht helfen

    Code:
    .imageBoximage4 {width:100%; min-height:992px;  position:relative;  text-align:center;}
    .imageBoximage4 { background-position:center; backgound-size:cover; float:left;} 
    .imageBoximage4 {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    .imageBoximage4 {background: url(images/background3.jpg) no-repeat center center fixed;}

    HTML-Code:
    <div class="imageBoximage4"></div>
    oder alternativ:


    HTML-Code:
    <div><img src="bilder/background.jpg" width="100%"></div>
    Allerdings dann ohne das CSS


    Mit:
    Code:
    /* for 1000px or less */
    @media screen and (max-width: 100px) {
    .imageBoximage4       {width:50%}
    
    }
    media screen wirst du auch Vieles erreichen können. Probier's einfach aus.
    Erstellen einer eigenen Homepage - Anleitung: www. helpstar24. de

Ähnliche Themen

  1. Html: Grafik auf Grafik
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.10.2010, 13:47
  2. CSS skalierbare Höhe
    Von Longbow im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.04.2010, 12:47
  3. Kann eine Grafik in einer anderen Grafik durchlaufen
    Von Bianca77 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 09.07.2007, 09:04
  4. grafik über grafik
    Von Rocco im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 19.06.2004, 07:30
  5. Antworten: 2
    Letzter Beitrag: 27.05.2004, 18:09

Stichworte

Berechtigungen

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