I have bootstrap carousel working and the image is correctly resized when the window is made smaller. However, the surrounding container remains the same height it was when it was large.
This is because I have height: 380px in the .item css and max-height: 380px in the .carousel class.
Any attempt to set height: auto; or height: 100%; which I would expect, might allow the container/item to resize, results in the image disappearing entirely.
Any suggestions here is some simplified code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel-SO.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Carousel -->
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://tips4java.files.wordpress.com/2008/10/screen-image.jpg" />
</div>
<div class="item">
<img src="http://fineartamerica.com/images/contestlogos/logo1-best-uplifting-image.jpg" />
</div>
<div class="item">
<img src="http://www.nerd-age.com/wp-content/uploads/2011/11/Forge-Quest-featured-image.gif" />
</div>
</div><!-- .carousel-inner -->
</div><!-- .carousel -->
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
and here's the CSS:
body {
color: #5A5A5A;
padding-top: 20px;
padding-bottom: 40px;
}
.carousel {
max-height: 380px;
max-width: 600px;
margin: 0 auto;
}
.carousel .item {
background-color: #777777;
width: 100%;
height: 380px;
}
.carousel-inner > .item > img {
float: none;
display: block;
margin-top: 40px;
height: auto;
top: 0;
position: absolute;
}
I basically want the grey area (.item) to resize with the picture.
Any help appreciated.
EDIT:
Here is a fiddle:
http://jsfiddle.net/7DGjk/
for some reason the carousel part doesn't work, but you can see the effect where the grey .item area doesn't resize.
Yeah Its possible. But no need to write too much of css codes for alignment. Here I use padding and background property for class item. Here the css
.item {
background: none repeat scroll 0 0 #808080;
padding: 5% 0;
max-width: 600px;
}
here the jsfiddle.
Related
I am trying to recreate a cool look I saw on a graphic design mockup but I am unsure how to do it. There is a background video, with a transparent green overlay over it, then there is an image of a man that stays fixed to the right with text overflowing over it. For the most part I was able to recreate it but it still does not look right and the image does not stay fixed to the right side. Any suggestions or a different method would be appreciated.
Here is the mockup of the webpage I am trying to recreate in CSS:
Here is what I have managed to recreate using bootstrap:
*::before, *, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
height: 70vh;
margin-bottom: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(126, 154, 111, 0.5);
}
.jumbotron .container-fluid {
z-index: 3;
position: relative;
padding-right: 0 !important;
}
.image-holder {
width: 30%;
height: 100%;
}
.image-holder img {
width: 30%;
position: absolute;
top: -100px;
right: 0;
}
#heyGoodMeeting {
width: 80%;
z-index: 4;
}
.showcase__description {
color: white;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Testing</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="overlay"></div>
<video autoplay muted loop>
<source src="https://geniecast.com/wp-content/uploads/2020/10/Zuen-Office-Background-Video.mp4" data-src="" type="video/mp4">
</video>
<div class="container-fluid text-white d-flex justify-content-end">
<div style="width: 80%">
<img id="heyGoodMeeting" src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png" alt="hey good meeting">
<div class="showcase__description">The personalized comedy event that will transform your next client gathering, holiday party, or company meeting from a typical zoom call into a customized, memorable, and hilarious experience.</div>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="image-holder">
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png" alt="">
</div>
</div>
<!-- /.container -->
</div>
</body>
</html>
Here is a link to a jsFiddle
First of all, in your jsfiddle demo, it seems like you didn't include Bootstrap 4 but you tagged Bootstrap 4 in your question.
To style that person picture in the background, you can just do the same way you did on the video and the overlay: set its position to absolute, top, bottom and right to 0 so that it sticks on the right. I think the tricky part is to set its height to 100% so that it won't overflow its parent relative container.
Anyway, I've cleaned up the layout a little bit and assigned several custom CSS classes so that I can style those classes instead of directly on the elements:
<div class="jumbotron jumbotron-fluid banner">
<div class="overlay"></div>
<video />
<img src="https://geniecast.com/wp-content/uploads/2020/10/David-Header.png"
class="img-background" />
<div class="banner-content container-fluid">
<div class="showcase">
<img id="heyGoodMeeting"
src="https://geniecast.com/wp-content/uploads/2020/10/Good-Meeting-Logo.png"
class="img-fluid" />
<p class="description" />
<a class="btn btn-light btn-lg" />
</div>
</div>
</div>
And the following is the CSS to stick that person picture in the background:
.banner .img-background {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
demo: https://jsfiddle.net/davidliang2008/xd2s630q/80/
I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
I'm having issues with my menu icon. For my desktop css I have is set to display none. Under 1000px I have it set as display block. So far the icon is showing for all devices. Any assistance is appreciated.
/* blah blah blah */
.icon-dropdown {
display: none;
}
#media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<img src="vintagelogo.jpg" width="90px" height="90px">
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li>ABOUT MCDONALD'S</li>
<li>OUR CLASSICS</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
try to use this media query:
#media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
After that, try to shrink your browser to see the effect.
Try setting width and height for the icon.
I have a div that surrounds a bootstrap form.
When I define a background-color to that div the background-color is not seen in the form.
ADD: I added the three major divs before the wrapper_form - div so that you get the full picture. Before the first major div there starts the body tag.
This is my code:
.wrapper {
min-height: 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0;
display: inline-block;
}
.main-wrapper {
height: 100%;
overflow-y: auto;
padding: 50px 0 0px 0;
}
.content {
position: fixed;
top: 50px;
bottom: 36px;
left: 0;
right: 0;
padding: 0 15px;
overflow:auto;
}
.wrapper_form {
background-color: yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="main-wrapper">
<div class="content">
<div class="wrapper_form">
<div class="form-group form-inline">
<div class="col-md-4">
<label class="control-label">Input:</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="myInput" id="myInput" value="" />
</div>
</div>
</div>
</div><!-- /.content-->
</div><!-- /.main-wrapper -->
</div><!-- /.wrapper -->
.wrapper_form {background-color: yellow !important;}
Your inside elements are floated - try toggling the float property on the columns and you'll see the styling takes.
If you float the wrapper element it'll take the yellow background.
.form-group:after,.form-group:before{
clear:both;
content:'';
display:table;
}
.wrapper_form {
background-color: yellow !important;
}
Try this
Here's a backwards one.. IE Working while chrome does not!
I'm getting strange extra vertical spaces between divs in chrome. IE the divs sit flush against each other as intended.
I originally had a min-height attribute which caused some errors with width, but took that out. Still not entirely sure what's causing the spacing issue.
Any help is appreciated! Thanks all, -BR
CSS
#container {
width: 100%;
}
#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}
#header {
width: 1000px;
margin: auto;
}
.splitout {
width: 100%;
height: 225px;
}
.split {
width: 1000px;
margin: auto;
}
.content {
width: 750px;
margin: auto;
}
.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}
#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}
#footer {
width: 1000px;
margin-left: 25px;
}
Markup
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>
</head>
<body>
<div id="container">
<header>
<div id="headerout">
<div id="header">
<p>Content<p>
</div>
</div>
</header>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout lightblue">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
</div>
<div id="footerout">
<div id="footer">
<p>foot</p>
</div>
</div>
</body>
</html>
Don't use css-reset.
Prefer normalize.css: http://necolas.github.io/normalize.css/
"reasons":
https://stackoverflow.com/a/8357635/1518921
this help with "bugs".
You need to use css-reset for paragraph's margins (they causing this)
http://jsfiddle.net/eUVm8/
Simple example of reset
* {
margin: 0;
padding: 0;
}
Chrome add's margins for paragraphs by default.