I'm trying to create a 3 column responsive footer where in case of small window size I want each div "foo_col" to shown downt to first div.ie
foo_col_1
foo_col_2
foo_col_3
---HTML code-----
<footer>
<section class="layout">
<div class="foo_row">
<div class="foo_col">
<ul class="nav">
<li><i class="icon-home"></i>Home</li>
<li><i class="icon-question-sign"></i>About Us</li>
<li><i class="icon-h"></i>Sign In</li>
<li><i class="icon-heart"></i>Register</li>
</ul>
</div><!-- foo_col_1 -->
<div class="foo_col">
<ul class="nav">
<li>All Location</li>
</ul>
</div><!-- foo_col_2 -->
<div class="foo_col">
<ul class="nav">
<li><i class="icon-keyboard"></i>Contact Us</li>
</ul>
</div><!-- foo_col_2 -->
</div><!-- foo_row -->
</section><!-- section -->
</footer><!-- footer -->
Need to enhance sass code to take care of small sized window. Currently on resizing the window footer links are not aligning properly.
------footer sass-----
footer{
width: 100%;
height: 200px;
background: lighten($darkgray, 25);
#include at-breakpoint($medium){
text-align:center;
overflow: hidden;
}
ul.nav{
li{
a{
color :$darkblue;
font-size: .8em;
padding: 5px 10px;
}
}
}
}//footer
Related
I have an Issue with the Bootstrap Carousel.
I want to have the fixed effect but in Firefox it's giving jumps.
HTML
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-item-content" style="background:url('http://www.kia.ca/content/2018-soul/gallery/gallery-img-3.jpg')">
</div>
</div>
<div class="carousel-item">
<div class="carousel-item-content" style="background:url('http://carimages.silovendes.com/imgAutos/11/1056445-0.jpg')">
</div>
</div>
<div class="carousel-item">
<div class="carousel-item-content" style="background:url('https://kia.com.gt/images/modelos/rio/img/exterior-old//thumb/5.jpg')">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
.carousel-item {
width: 100%;
height: 100vh;
}
.carousel-item .carousel-item-content {
width: 100%;
height: 100%;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
background-attachment: fixed !important;
}
You can try it hier:
https://codepen.io/TamZam/pen/ZvQvox
Any ideas why it happens?
Thanks!
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
Hi to everyone I have a strange problem with Firefox 46, before the update my website work good, now if I go over the slider on top page it doesn't show me the custom cursor and if I click on it doesn't work the jquery function too.
On chrome, safari and also on the old version of FF it work; it's seems it can't see the div #banner because it's a child of others div containers, but why on the old version it work?
I'm confused
here's the test page
HTML code
<div class="parallax">
<header>
<div id="cont_logo">
<a class="logo" href="" rel="home"></a>
<span>L'étoile</span>
<span id="logo_text">Ristorante - Pizzeria - Steak House</span>
<span>Courmayeur</span>
</div>
<nav id="menu_lang">
<ul>
<li class="selected"><a href="" title="ita" >It</a></li>
<li><a href="" title="fra" >Fr</a></li>
<li><a href="" title="eng" >En</a></li>
</ul>
</nav>
<nav id="main_menu">
<ul>
<li>Home</li>
<li class="selected">Ristorante</li>
<li>Menu</li>
<li>Courmayeur</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div id="banner">
<ul>
<li><img src="images/banner1.jpg" alt="" /></li>
<li><img src="images/banner2.jpg" alt="" /></li>
<li><img src="images/banner3.jpg" alt="" /></li>
<li><img src="images/banner4.jpg" alt="" /></li>
</ul>
</div>
</div>
<div id="overlayer">
<h2>Ristorante</h2>
</div>
</div>
CSS code
#banner{
width:100%;
overflow:hidden;
z-index:0;
position:relative;
top:0;
left:-4px;
}
#banner:not(.home):hover{cursor:url("img/zoom.cur"), auto;}
.parallax {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
width: 100%;
}
.parallax__layer--base {
bottom: 0;
left: 0;
position: relative;
right: 0;
top: 0;
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(0px);
}
.parallax__layer--content {
position: relative;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}
JQuery code
function zoom_banner(){
$( "#banner" ).click(function() {
$("#testa_pag, #overlayer").toggleClass('open');
});
}
OK I have accomplished this without bootstrap
<nav id="active">
<ul>
<li>Home</li>
<li>Ministries</li>
<li>Bylaws</li>
<li>About Us
<ul>
<li>History of RK</li>
<li>Mission Statement</li>
<li>Prayer Request</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
<div class="img"></div>
</nav>
I am wanting to convert the current site to bootstrap and I am unable to find exactly how to do this. The image basically is floating in the middle of the navigation, that way it will allow me to make the image slightly larger in height that the navbar. Currently this is how I have it, the image isn't floating in the center it is styled there. which isnt the way I want it.. again like the image to be bigger than the menu height wise.
<div class="span12">
<nav class="navbar nav-center navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav pull-right">
<li>About Us</li>
<li>Testimonies</li>
<li>Contact Us</li>
</ul>
<div class="navbar">
<img src="images/logo.png" width="115" height="135" alt=""/>
</div>
</div>
</nav>
</div>
****Ok quick edit... If you view this site. www.risenkings.com, if you notice that the logo image is floating in the middle of navbar. This is what I am trying to accomplish within bootstrap.
I would start by using just the standard navbar markup. Links will automatically float left, so your Home, Ministries and Bylaws can just be wrapped in a ul with 'nav navbar-nav' classes. For the remaining links, you'll want to wrap them in a separate ul adding the navbar-right class as well.
You can repurpose the navbar-brand class for your logo. Remembering that Bootstrap is a mobile first framework, you'll probably want to first style your logo to be on the left within the navbar for your "collapsed" menu style. I just sized your logo generally and adjusted the padding. You can tweak it how you like.
Once the menu is not collapsed (on viewports that are greater than 768px), you'll need to use a media query to position your navbar, and position and center your logo. Using position absolute on the wrapping navbar-brand with the right and left properties to 0, then setting the img inside to display block with margin auto is one way to do this. The demo shows the basic results.
DEMO
HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://www.risenkings.com/images/logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
About Us
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Mission</li>
<li>Requests</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
CSS:
.navbar-brand {
padding-top: 2px;
}
.navbar-brand>img {
width: 3em;
}
#media (min-width: 768px) {
.navbar {
margin-top: 4em;
}
.navbar-brand {
position: absolute;
top: -2em;
left: 0;
right: 0;
}
.navbar-brand>img {
width: 6em;
margin: 0 auto;
display: block;
}
}
I have an issue related to css viewing of webview on Android 4.0.4
I have an list : using <ul> , <li> tags.
But when show on tablet 7 inches, some <li> has a different border size (> 1px).
Here is html :
<div id="cmSettingMenuList">
<ul>
<li >11111111</li>
<li >2222222</li>
<li >33333333</li>
<li >11111111</li>
<li >2222222</li>
<li >33333333</li>
<li >11111111</li>
<li >2222222</li>
<li >11111111</li>
<li >2222222</li>
<li >33333333</li>
<li >33333333</li>
<li >11111111</li>
<li >2222222</li>
<li >33333333</li>
</ul>
</div>
I use 1 css for it:
#cmSettingMenuList ul {
width: 580px;
list-style: none;
overflow: visible;
}
#cmSettingMenuList ul li {
padding-left: 2px;
height: 58px;
line-height: 58px;
border-bottom: 1px solid #9AB2E7;
background-size: 26px;
position: relative;
}
Here is display on tablet:
http://i.stack.imgur.com/RBsBL.png
It's not same size.
Do you have any solution for it.
THANKS