Want to make an image gallery and have a strange bug! - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

December 22, 2013 at 11:32 am #158982

Participant

Hey there!

I’m trying to make an image gallery (again) and theres (again -.-) a strange bug. There only appears one image, always at the same position.

I’m just gonna post my whole code, cuz i don’t know what is relevant.

        <!DOCTYPE html>

        <html>
            <head>
                <meta charset="UTF-8">
                <title>example</title>
                <link rel="stylesheet" type="text/css" href="style.css">
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
            </script>
            <script> 
            $(document).ready(function(){
            $("#flip").click(function(){
                $("#cover-content").slideUp("slow");
                });
            });
        </script>
            </head>
            <body>
                <header><span class="name">Florian Rammerstorfer</span></header>

                <div id="cover-content">
                    <div id="profile-picture"></div>
                    <div id="introduction">
                        <h2>Hello, I'm Florian.</h2>
                        <h3>I'm a Game Developer.</h3>
                    </div>

                    <div id="flip"><img src="img/arrow.png"/></div>
                </div>

                <div id="main-content">
                    <div id="gallery">
                        <img src="img/gamex.png">
                        <img src="img/gamex.png">
                    </div>
                </div>
            </body>
        </html>


body, html
{
    margin: 0;
}
@font-face
{
    font-family: proxima-nova;
    src: url(font/ProximaNova-Light.otf) format(opentype);
}
header
{
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    font-family: proxima-nova;
    color: #4d4444;
    background-color: #deddd8;
    border-bottom: 1px solid #c7c5bc;
}
.name
{
    margin-left: 210px;
}
#cover-content
{
    position: relative;
    width: 100%;
    height: 915px;
    background-color: #deddd8;
    text-align: center;
    border-bottom: 1px solid #c7c5bc;
}

#profile-picture
{
    position: absolute;
    top: 260px;
    left: 560px;
    background:url(img/unknown.jpg) no-repeat;
    background-size:360px 240px;
    background-position:-60px 0px;
    height:240px;
    width:240px;
    border-radius:50%;
    overflow:hidden;
    margin-right: 50px;
}
#introduction
{
    position: absolute;
    top: 235px;
    left: 870px;
}
img
{
    position: absolute;
    bottom: 80px;
    height: 80px;
    width: 80px;
}
h2
{
    font-family: proxima-nova;
    color: #4d4444;
    font-size: 70px;
    margin-bottom: 30px;
}
h3
{
    font-family: proxima-nova;
    color: #4d4444;
    font-size: 35px;
    opacity: 0.6;
}

/********************************************************/

#main-content
{
    position: relative;
    width: 100%;
    height: 915px;
    background: #deddd8;
}
#gallery
{
    position: relative;
    width: 70%;
    height: 700px;
    background-color: white;
    left: 15%;
    right: 15%;
    top: 107.5px;
    bottom: 107.5px;
}
.gallery-picture
{
    width: 390px;
    height: 219px;
    margin: 2% 10px 0px 0;
}

December 22, 2013 at 12:08 pm #158984

Senff

Participant

Can you show us a page where this issue occurs? Or, if you can’t, please create a pen on CodePen.io. At the very least, explain what the actual bug is.

December 22, 2013 at 12:36 pm #158985

Shanakor

Participant

I’m sorry I totally forgot to describe the actual bug!

I just figured out that it has something to do with the javascript function I’m working with!

In the following CodePen example under “I am a Game Developer” there would normally be a picture of an arrow. If you click on it you see what my javascript function does! In the following site there is a white area in this area there should be displayed the gallery. Without the javascript the pictures are put at the beginning of the white div, but with it there’s only one picture at a strange location.

http://www.codepen.io/anon/pen/ECIsb

December 22, 2013 at 1:08 pm #158986

Participant

The javascript seems to be functioning normally (as expected).

there’s only one picture at a strange location.

No, there are two pictures, in the same place. Because you said:

img
{
    position: absolute;
    bottom: 80px;
    height: 80px;
    width: 80px;
}

The js has nothing to do with this. If you remove the script and the .cover-content div, you’ll see the images in the same position.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tip: use firebug/ chrome dev tools/ whatever to investigate problems. In situations like this, the cause (and often, the solution) can be very easy to determine.

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.