Showcase Image and Carousel Caption


Tags: html,css,twitter-bootstrap,carousel

Problem :

I'm experiencing a problem with the following code: HTML:

<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About-Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact-Us</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</nav>
</div>
<div class="showcase">
    <div class="col-xs-12 showcase-container">
        <img src="media/tumblr_kx21pqsQBo1qaj2pio1_1280.jpg" width="1500" class="col-xs-12 showcase-img alt=""/>"
        <div class="carousel-caption showcase-title"> 
            <h1> Welcome to the Site </h1>
        </div>
    </div>
</div>

CSS:

.navbar-default
{
margin-bottom: 0; 
}

.showcase-container {
padding-left: 0; 
padding-right: 0; 
}

.showcase-img {
padding-left: 0; 
padding-right: 0; 
}

.showcase-title {
margin: 0 auto; 
height: 320px; 
}

My problem is that, when I'm trying to centre the carousel caption, I'm setting the margin at the bottom and I'm able to achieve the proper effect. Now, when I resize the page, the text is moving off the screen and not resizing. Another issue comes when I want to set a background with opacity and the background is including the margin used for spacing. All of this is a dead giveaway that I'm doing something wrong, but I'm not sure how I should re-structure my code. Any help is most appreciated. Here's what I'm working on.



Solution :

The problem is that the height of .showcase-title is set to 320px and .showcase-title is set to be absolutely positioned to the bottom of your image container. When you resize the browser, the image gets smaller but .showcase-title doesn't. Set .showcase-title's height to 100% and it should fix the problem.


    CSS Howto..

    CSS how to apply :first-child and :last-child

    Do East Asian (e.g. Chinese) characters have baselines? How do they align with English in CSS?

    Does anyone know how to getr this background effect with css?

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    How can I simply add a css file to change the background color for my shiny app

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    how to not inherit? or how to reset inherited width to the value before? (css)

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How to set the CSS styles of the image to fit bootstrap width

    How to toggle visibility of 2 divs after clicking a mailto link?

    How to put a table inside an inline-block element where cells have a percentage width

    How do I put hint in a asp:textbox

    How to convert this CSS animation to use GPU level, instead of updating layer tree

    How to avoid the overlapping of the button?

    how to select margin for a background image in CSS/CSS3?

    how to make div static in css

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    How to add overflow : hidden and max widths on images

    css: how to force images to scale at same amount?

    How to make div background color transparent in CSS

    How do I convert a text to css hex value?

    How to slide down to show content of DIV using CSS/jQuery?

    CSS: can't understand how to work with the z-index

    How can I fix this jumbotron/carousel to be the size of the image?

    How To Select Two classes with CSS?

    Rotation of a div gives a black background on IE, how can I remove it?

    How to select any item preceded by some word in CSS

    How to make a grid with one style?

    CSS: How to fake a :hover state?