I'm trying to create a Bootstrap carousel with images that have text over them. To do that, I need to make the position of the images in the carousel absolute. Here is an image in the carousel before I made it absolute
I need the testimonials and this is LA text over the image. So I make it absolute and this happens
And no matter what I do, I can't seem to fix it.
Here is my Slim markup
.container#testimonialsSection
.carousel.slide#testimoniesCarousel data-ride="carousel"
ol
li data-target="#testimoniesCarousel" data-slide-to="0" class="active"
li data-target="#testimoniesCarousel" data-slide-to="1" class="active"
li data-target="#testimoniesCarousel" data-slide-to="2" class="active"
li data-target="#testimoniesCarousel" data-slide-to="3" class="active"
li data-target="#testimoniesCarousel" data-slide-to="4" class="active"
.carousel-inner role="listbox"
.item.active
= image_tag("losangelesskyline.jpg", :class => "img-responsive")
h2.center Testimonials
p This is LA
.item
= image_tag("newyorkskyline.jpg")
p This is NY
.item
= image_tag("miamiskyline.jpg")
p This is Miami
.item
= image_tag("bostonskyline.jpg")
p This is Boston
.item
= image_tag("atlantaskyline.jpg")
p This is Atlanta
a.left.carousel-control href="#testimoniesCarousel" role="button" data-slide="prev" onclick=""
span.glyphicon.glyphicon-chevron-left aria-hidden="true"
span.sr-only Previous
a.right.carousel-control href="#testimoniesCarousel" role="button" data-slide="next" onclick=""
span.glyphicon.glyphicon-chevron-right aria-hidden="true"
span.sr-only Next
And here is my SCSS
.carousel-control.left, .carousel-control.right {
background-image: none
}
#testimonialsSection {
height: 70%;
width: 100%;
}
#testimoniesCarousel {
width: 100%;
height: 100%;
h3 {
font-size: 300%;
}
p {
text-align: center;
margin-left: 5%;
margin-right: 5%;
font-size: 200% !important;
}
img {
position: absolute;
height: 70%;
width: 100%;
}
.carousel-control.left .glyphicon {
position: absolute;
left: 0;
top: 35%;
margin-left: 0;
color: #D6D6D6;
}
.carousel-control.right .glyphicon {
position: absolute;
right: 0;
top: 35%;
margin-right: 0;
color: #D6D6D6;
}
}
Any help would be greatly appreciated.
Actually, I just remembered that it scales with the amount of content. Once I added my text to it the image expanded. It works now
Related
I have a model that called LinksListWidgetModel that contains an IEnumerable property named Links that contains a list of my website links.
In my Razor view, I have two columns (i.e. one for the grid "col-md-8" and one for another tool "col-md-4". I have a foreach loop that adds each link to the grid tool. I am trying to achieve the following look: Matrix View, however the buttons don't wrap after three, it just continues throughout the width of the page. I am using Bootstrap4.x and flexbox.
I tried following the example in this question: How I can make nice looking matrix of buttons with bootstrap 3?, but that didn't fix the issue either.
Here is my code:
LinksListGrid.cshtml:
#if (Model == null)
{
#Html.Partial("_WidgetNotConfigured") }
else
{
<div class="btn-group btn-matrix" role="group">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<button>
<a class="linkContainer-gridItem-link btn btn-default" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</button>
</div>
}
</div>
}
LinkContainer.scss:
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
font-weight: 400;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
width: 290px;
display: block;
margin: 0 auto;
padding: 0;
padding-bottom: 19px;
font-family: "Montserrat",sans-serif;
text-align: center;
.linkContainer-gridItem {
background-color: $colorBrandBlue;
border-radius: 25px;
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
vertical-align: top;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 20px 10px;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media screen and (max-width: 767px) {
&.linkContainer-gridLayout {
padding: 0;
}
}
}
.btn-matrix {
> .btn {
&:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
&:nth-child(n+4) {
margin-top: -1px;
}
&:first-child {
border-bottom-left-radius: 0;
}
&:nth-child(3) {
border-top-right-radius: 4px !important;
}
&:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
It ends up looking like this: Grid View
How can I change this to make it look like the first screenshot's matrix/grid display? After every 3 buttons it goes on the second line.
I don't think clear:left; will work on flexbox. But there are other ways to do it.
HTML & SCSS way
I think you would be better off just styling .btn-matrix yourself, without mixing .btn-group styles, because Bootstrap .btn-group brings in lots of noice on its .btn children, such as border-radius, border, etc. You would need to style them using your own styles anyway so why bother.
I think the following structure should be generic enough you can use to construct a matrix:
<div class="btn-matrix btn-matrix-white" role="group">
<a class="btn" href="#">
<div class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" />
<i class="fas fa-chart-bar fa-stack-1x" />
</div>
Reports
</a>
...
</div>
First of all, in your original HTML structure, you had a button that wraps an anchor link. That's not necessary because Bootstrap has classes to style an anchor link to just look like a button.
Secondly, I am using icon stacking method to construct icons with circle backgrounds. You can read about it here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Finally, here is the styles:
$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;
.btn-matrix {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 1rem #ccc;
border: 1px solid transparent;
border-radius: .25rem;
> .btn {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding: 5%;
width: calc(100% / #{$numOfMatrixItemPerRow});
border-radius: 0;
}
&.btn-matrix-white {
> .btn {
background-color: #fff;
border-right: $matrixItemBorderWidth solid #ddd;
border-bottom: $matrixItemBorderWidth solid #ddd;
.fa-stack-2x {
color: var(--primary);
}
.fa-stack-1x {
color: #fff;
}
&:nth-child(#{$numOfMatrixItemPerRow}n) {
border-right: none !important;
}
&:last-child {
border-bottom: none !important;
}
}
}
}
Really nothing tricky there except you would need to use SASS Interpolation to involve $numOfMatrixItemPerRow variable into calculations:
Display .btn-matrix as a wrappable flex row
Set the width of each button to be 100% / $numOfMatrixItemPerRow so that each row will contain the exact number of items before breaking into new rows
Display .btn as flexbox column so that you can easily align the icons and text there
Set the right and bottom border of each button, with exceptions of the last one on each row and last one
demo: https://jsfiddle.net/davidliang2008/1wqost69/201/
ASP.NET MVC way
Now since you're using ASP.NET MVC, I think there is another approach you can consider. That is, in the loop where you loop though each link from the model, you can define a variable there and do something like:
<div class="btn-matrix">
#for (int i = 0; i < Model.Links.Count(); i++)
{
var link = Model.Links[i];
if (i % numOfItemsPerRow == 0)
{
<div class="row">
}
<div class="col-md-4">
<a class="btn" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</div>
if ((i+1) % numOfItemsPerRow == 0 || i + 1 == Model.Links.Count())
{
</div>
}
}
</div>
I'm just making things up but hopefully you see where I am going.
On my main navigation, links have a custom underline with linear-gradient on background. It works great but on ipad, I need to tap twice to execute link. One for the hover, another one for the link. What can I do to solve it ?
Thanks
Here is an example :
http://codepen.io/anon/pen/yOmXby
HTML :
<ul>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
<li><a target="_blank" href="#">element</a></li>
</ul>
CSS :
li {
list-style: none;
float: left;
margin: 0 1em;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 1.5rem;
margin-left: 60px;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: relative;
display: inline-block;
}
ul li a:before {
-webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);
-webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;
content: "";
position: absolute;
bottom: 0;
left: 50%;
height: 3px;
background: #e95b4c;
width: 0;
opacity: 0;
will-change: opacity;
}
ul li a:hover:before, ul li a:focus:before, ul li a:active:before {
width:100%;
opacity: 1;
}
Well the only solution I found is in javascript.
Every touch on link execute the link :
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});
I have set of icons that are for hotel amenities and I am trying to use CSS sprite to show them on my page.
This is what I have for html
<div class="sprite">
<ul id="amenities">
<li class="bathtub"></li>
<li class="shower"></li>
<li class="next"></li>
<li class="tv"></li>
<li class="safe"></li>
</ul>
</div>
my css
.amenities { position: relative; }
.amenities li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
.bathtub { background: url('graphics/icons.png') no-repeat 0 0; width: 60px; height: 60px;}
.shower { background: url('graphics/icons.png') no-repeat -61 0; width: 60px; height: 60px;}
only the first icon shows and the second one doesnt.
jsfiddle
how I need it to look
You haven't set any units on the background position. Setting this to any type of unit will make it work. Zero is a value that is an exception to this rule.
shower { background: url('graphics/icons.png') no-repeat -61px 0; width: 60px; height: 60px;}
See: https://jsfiddle.net/kbrbc62h/
EDIT:
In response to your recent comment, see: https://jsfiddle.net/Ls8wLsa6/
Elements like li, ul, h*, and div have a display:block by default. This means these elements will take up an entire line. We can set a specified width, but even still the container will be placed on a new line. By changing the li elements to use inline-block, we are able to cram them on to one line. Since the ul has a fixed width, every 3rd element will appear on a new line.
We use vertical-align:top; to align the li content to the top of the container, and then adjust the p tag to display the text in the center with no margin.
HTML:
<div class="sprite">
<ul id="amenities">
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen</p></li>
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen</p></li>
<li><div class="bathtub"></div><p>Bath</p></li>
<li><div class="shower"></div><p>Shower</p></li>
<li><div class="kitchen"></div><p>Kitchen Long</p></li>
</ul>
</div>
CSS:
#amenities {
width:320px;
}
.bathtub {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat 0 0; width: 60px; height: 60px;
}
.shower {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -61px 0; width: 60px; height: 60px;
}
.kitchen {
background: url('http://i.stack.imgur.com/NdUbQ.png') no-repeat -122px 0; width: 60px; height: 60px;
}
.sprite ul li {
list-style-type:none;
display:inline-block;
vertical-align:top;
margin:10px;
width: 60px;
}
.sprite ul li p {
text-align:center;
margin:0;
}
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.