CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user15159247
user15159247

Reputation:

Problems positioning element with CSS, Javascript, and Bootstrap

I have been struggling for the past few hours with a positioning problem. I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial. The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well. Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section. That part works just fine. The problem is that the tutorial includes this little X, using the html code × I will include the full code below. The &times is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). I circled the xelement enter image description here The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail. I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring. At least with inline styles, I was able to color the element. But padding-left, margin-left, text-align:center. I tried separately and all at once. None of these work, and I just simply cannot figure this out. Here is the javascript, which is included in the section. Thanks a million times for your time.

<script type="text/javascript">
        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            
            imgText.innerHTML = imgs.alt;
            
            expandImg.parentElement.style.display = "block";
        }
    </script>

Here is the CSS:

<style>
    
    body {
  margin: 0;
  font-family: Arial;
}
    * {
  box-sizing: border-box;
}
    #column1 {
        width:80%;
        height:80%;
    }
    #column2 {
        width:80%;
        height:80%;
    }
    #column3 {
        width:80%;
        height:80%;
    }
    #column4 {
        width:80%;
        height:80%;
    }
    
    .col-lg-3{
        float: left;
        
        padding:10px;
        
    }
    
    <!--Style the images inside the grid-->
    
    .col-lg-3 img {
        opacity: 0.8;
        cursor: pointer;
        
        
    }
    
    .col-lg-3 img:hover {
        opacity: 1;
    }
    
    /*Clear floatsd after the columns */
    .row:after {
        content: "";
        display:table;
        clear:both;
        
    }
    
    <!--The expanding image container (positioning is needed to position the close button and the text -->
    **.mycontainer {
        position:relative;
        display:none;
    }
    #imgtext {
        position:absolute;
        bottom:60px;
        left:60px;
        color:white;
        font-size:20px;
    }
    #expandedImg {
        
        display:block;
        padding-left:50%;
        
    }**
    /* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 250px;
  right: 250px;
  color: hotpink;
  font-size: 35px;
  cursor: pointer;
  
  
}

    </style>

And here is the entire page with HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Dream of Bonsai</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    
    
    <script type="text/javascript">
        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            
            imgText.innerHTML = imgs.alt;
            
            expandImg.parentElement.style.display = "block";
        }
    </script>
    
    <style>
    
    body {
  margin: 0;
  font-family: Arial;
}
    * {
  box-sizing: border-box;
}
    #column1 {
        width:80%;
        height:80%;
    }
    #column2 {
        width:80%;
        height:80%;
    }
    #column3 {
        width:80%;
        height:80%;
    }
    #column4 {
        width:80%;
        height:80%;
    }
    
    .col-lg-3{
        float: left;
        
        padding:10px;
        
    }
    
    <!--Style the images inside the grid-->
    
    .col-lg-3 img {
        opacity: 0.8;
        cursor: pointer;
        
        
    }
    
    .col-lg-3 img:hover {
        opacity: 1;
    }
    
    /*Clear floatsd after the columns */
    .row:after {
        content: "";
        display:table;
        clear:both;
        
    }
    
    <!--The expanding image container (positioning is needed to position the close button and the text -->
    .mycontainer {
        position:relative;
        display:none;
    }
    #imgtext {
        position:absolute;
        bottom:60px;
        left:60px;
        color:white;
        font-size:20px;
    }
    #expandedImg {
        
        display:block;
        padding-left:50%;
        
    }
    /* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 250px;
  right: 250px;
  color: hotpink;
  font-size: 35px;
  cursor: pointer;
  
  
}

    </style>
</head>

    <body>
    <!--The grid of four equal columsn-->
    <div class="container">
        <h1 style="text-align:center">Image Gallery</h1>
        <hr>
        <br>
        <div class="row">
            <div class="col-lg-3">
                <img src="images/cherrySquare.jpg"  id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
            </div>
            
            <div class="col-lg-3">
            <img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
                
            </div>
            
            <div class="col-lg-3">
                <img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
            </div>
            
            <div class="col-lg-3">
                <img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
            </div>
            
        </div>
        
        <!--End of the row-->
        
        <div class="mycontainer">
            <!--close the image-->
            <span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">&times;</span>
            
            <!--Expanded image-->
            <img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
            
            <!--Image text-->
            <div id="imgtext"></div>
        </div>
    </div>
    
    </body>
</html>

Upvotes: 0

Views: 89

Answers (1)

Radu M
Radu M

Reputation: 26

I took a look at your CSS. I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.

Upvotes: 1

Related Questions