Member Avatar for Stefce

Hello i have a problem putting margin between the images i have this html code

<div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Featured Posts</h2>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
        </div>

and here is the CSS

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

what is wrong here i cannot understand ?

Edited by Stefce
  • 4 Contributors
  • 12 Replies
  • 506 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Stefce
Member Avatar for Stefce

Anyone > ?

Member Avatar for brothman01

.img-portfolio is in the css but not the HTML. It does not set rules for/apply to anything.

Edited by brothman01
Member Avatar for brothman01

nvm my last comment, I see that it is there.

Member Avatar for Clif40RD

I don't know why its not working for you but it works for me, maybe there's something wrong with your file references in the head section.
I never made any changes, I just copied and pasted your code, oh wait I had a problem with file references as well, make sure you copy and paste the file name when referencing it. I think this is what you're looking for

proofofworking.PNG

Here's YOUR code with(I think) no changes made really:

index.html:

<!DOCTYPE html>
<html>
<head>
 <link href="stylesheet.css" rel="stylesheet"/>   
 <link href="bootstrap.css" rel="stylesheet"/>
</head>
<body>

<div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Featured Posts</h2>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
                </a>
            </div>
        </div>

</body>
</html>

stylesheet.css:

.img-portfolio{
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}
Member Avatar for Stefce

Here is the full css code 

html,
body {
    height: 100%;
}
.img-portfolio{
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}
.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}

maybe you will find here the error im not good at css

Edited by Stefce
Member Avatar for gentlemedia

Here is the full css code

Those CSS blocks have nothing to do with the HTML of that image grid, so the error is not in there.

You have a rule-set somewhere that might overriding that margin-bottom, because it should just work.
See here; http://codepen.io/gentlemedia/pen/XNegPp
With the browser developer tools you can spot pretty quick if this is the case or not.

Or you could add an !important to the property value to find out if this is the case. And I say 'to find out', because if the !important 'solves' the problem, you'll have to still figure out which rule is overriding it and solve it properly (usually a CSS specificity issue) so you can remove the !important. https://css-tricks.com/when-using-important-is-the-right-choice/ Ok, school is closed now! :)

Try the following and see if your 30px bottom margin showes up:

.img-portfolio {
    margin-bottom: 30px !important;
}
Edited by gentlemedia
Member Avatar for Stefce

Actually this solves the problem but i have a question why is not recomended to use !important ?

Member Avatar for Stefce

here is the HTML too 

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>website title</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <!-- Navigation -->
    <?php include 'navigation.php'; ?>

    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/header1.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/header2.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('images/header3.jpg');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </header>

    <!-- Page Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Random Pictures</h2>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-portfolio img-hover" src="images/header1.jpg" alt="">
                </a>
            </div>
        </div>

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; mywebsite 2016</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel -->
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>

</body>

</html>
Edited by Stefce
Member Avatar for gentlemedia

Actually this solves the problem but i have a question why is not recomended to use !important ?

I've posted a link to an article that explains it well.

What you have is a specificity issue (a rule set before your rule-set that also sets a bottom margin on .img-portfolio or probably on .img-responsive, but that has a higher specificity then yours) or further down the cascade you have another rule-set that overwrites your css rule-set. This is what you have to figure out! Thus remove that !important and then inspect with developer tools the css rules that are applied to .img-portfolio. That's an easy & quick way to find out.

Edited by gentlemedia
Member Avatar for Stefce

Thank you for your info but i cant understand anything i think ill leave as it is for now its working great i think. Thank you again :)

Member Avatar for gentlemedia

Well... you could do that of course, but then I'd suggest you do the following, because seriously you don't want !important to fix issues like this.

in your HTML of that img-portfolio image grid you have the container.:

<!-- Page Content -->
    <div class="container">

Just add a class name to that div something like portfolio:

<!-- Page Content -->
    <div class="container portfolio">

And then you can do in your CSS this:

.portfolio .img-portfolio {
    margin-bottom: 30px;
}

If this doesn't solve it then you have already specificity creep somwhere down the road.

Member Avatar for Stefce

Man i cannot thank you enough.. really appreciated ! Have a great day or night !

commented: Good stuff! +6
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.