Beiträge von DanielS

DanielS

Für meine Drupal Webseite möchte ich das folgende CSS show/hide Beispiel nutzen (http://cssdeck.com/labs/css-only-showhide) , jedoch musste ich schnell feststellen dass es in der Form nicht funktionieren wird, denn die Elemente <article> <content> usw. werden natürlich auf der Webseite bereits verwendet und besitzen auch CSS Eigenschaften mit denen dann ein Konflikt entsteht. Darum habe ich die Struktur in DIV's umgeschrieben und mit Klassen versehen, denen ich dann die nötigen CSS Eigenschaften zugeordnet habe. Jetzt muss ich einen Denkfehler haben, denn in meiner Version funktioniert es nicht so wie es soll. Ich finde aber den Fehler nicht, kann mir da einer helfen ?

Meine Version (CSS und HTML in einer Datei, ich entschuldige mich für die Formatierung sobald ich den Code hier einfüge sieht es schrecklich aus...):

HTML

<!doctype html><html>  <head>    <meta charset="utf-8">    <title>Test</title>    <style>/* css only show/hide */div#figure {    margin: 0 0 1.3rem 0;    -webkit-transition: .125s linear;    -moz-transition: .125s linear;    -ms-transition: .125s linear;    -o-transition: .125s linear;    transition: .125s linear;}div#figure img {    max-width: 100%;    height: auto;}div#post {    max-width: 480px;    width: 90%;    margin: 3em auto;    font-size: 75%;    line-height: 1.3rem;    font-family: sans-serif;    position: relative;    *zoom: 1;}div#post {    margin-bottom: 3rem;    position: relative;    *zoom: 1;}div#post:before, div#post:after {    content: "";    display: table;}div#post:after { clear: both }div#post div#figure {    float: left;    width: 32.5%;}div#post div.content:first-of-type {    float: right;    width: 62.5%;}div#post div.content:last-of-type {    display: none;    visibility: hidden;}div.content {    -webkit-transition: .125s linear;    -moz-transition: .125s linear;    -ms-transition: .125s linear;    -o-transition: .125s linear;    transition: .125s linear;}input[type=checkbox] {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    width: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;}[for='read_more'] {    position: absolute;    bottom: -3rem;    left: 0;    width: 100%;    text-align: center;    padding: .65rem;    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);}[for='read_more']:hover {    background: rgba(0,0,0,.5);    color: rgb(255,255,255);}[for='read_more'] span:last-of-type {    display: none;    visibility: hidden;}input[type=checkbox]:checked ~ div.content {    display: block;    visibility: visible;    width: 100%;}input[type=checkbox]:checked ~ div#figure { width: 100% }input[type=checkbox]:checked ~ [for='read_more'] span:first-of-type {    display: none;    visibility: hidden;}input[type=checkbox]:checked ~ [for='read_more'] span:last-of-type {    display: block;    visibility: visible;}    </style>  </head>  <body>   <div id="post">        <input type="checkbox" id="read_more" role="button">    <label for="read_more" onclick=""><span>Read More</span><span>Hide This Shit!</span></label>               <div id="figure">        <img src="http://cssdeck.com/uploads/media/items/8/8rDcElm.jpg" alt="I'm an owl" />    </div>    <div class="content">    <p>Owls are a group of birds that belong to the order Strigiformes, constituting 200 extant bird of prey species. Most are solitary and nocturnal, with some exceptions (e.g. the Northern Hawk Owl). </p>    </div>    <div class="content">    <p>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica, most of Greenland and some remote islands. Though owls are typically solitary, the literary collective noun for a group of owls is a parliament. Owls are characterized by their small beaks and wide faces, and are divided into two families: the typical owls, Strigidae; and the barn-owls, Tytonidae.</p>    <p>Owls have large forward-facing eyes and ear-holes; a hawk-like beak; a flat face; and usually a conspicuous circle of feathers, a facial disc, around each eye. The feathers making up this disc can be adjusted in order to sharply focus sounds that come from varying distances onto the owls' asymmetrically placed ear cavities. Most birds of prey sport eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing eyes permits the greater sense of depth perception necessary for low-light hunting. Although owls have binocular vision, their large eyes are fixed in their sockets — as are those of other birds — so they must turn their entire head to change views. Owls can rotate their heads and necks as much as 270 degrees in either direction. As owls are farsighted, they are unable to see clearly anything within a few centimeters of their eyes. Caught prey can be felt by owls with the use of filoplumes — like feathers on the beak and feet that act as "feelers". Their far vision, particularly in low light, is exceptionally good.</p></div></div>                       </body></html>

MfG

D

DanielS

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

<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>

Alles anzeigen

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;
    }

Alles anzeigen

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.

Beiträge von DanielS

Html css show/hide

Skalierbare <div> mit Grafik per CSS