I have a Gallery using an unordered list, like bellow:
<ul>
<li style="background: center no-repeat #bc874c url(images/image-01.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-02.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-03.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-04.jpg)"></li>
</ul>
As you can see, I'm using the background of the element to show the image, so, I want to when the user clicks on the li element, a lightbox opens, is that possible?
Thanks a lot in advance.
you can put an onclick event in each LI but it would be easier to just put the href links inside each li..
<ul>
<li onclick="alert('here');" style="background: center no-repeat #bc874c url(images/image-01.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-02.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-03.jpg)"></li>
<li style="background: center no-repeat #bc874c url(images/image-04.jpg)"></li>
</ul>
maybe creating a jquery function and pass the image url as a variable..let me know and I may be able to write something up for u
Related
I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
http://jsfiddle.net/3GQyq/3/
I have tried different methods such as
display:inline-block;margin:0 auto; text-align:center;
But I cannot get it to work.
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
EDIT:
Just like how they are centered here ^.
Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
Add the style
.nav{
text-align: center;
}
This will center the text in li.
Check Fiddle
These styles should be sufficient. You were trying to apply styles to to the wrong element.
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
I am trying to add image/Icon to bootstrap dropdown btn list options HERE
It works somehow but as you can see from the demo and following image the hover function does not reacting (highlighting)on the whole li area!
Can you please let me know how to fix this highlits all width of the li element?
Here is my code as well
CSS:
li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}
and the HTML
<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="one">Item 1</li>
<li class="two">Item 2</li>
<li class="three">Item 3</li>
<li class="four">Item 4</li>
<li class="five">Item 5</li>
<li class="six">Item 6</li>
<li class="divider"></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Thanks
Using list item background as an icon is a bad idea since it makes laying on the text really tricky (as you experienced).
I'd definitely encourage you to add a new, separate element for the icons. By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>. If you want custom icons, you can of course define your own classes and related CSS styles.
Here's a quick example:
HTML:
<li class="one"><i class="icon-custom-1"></i>Item 1
CSS:
.icon-custom-1 {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 0px 7px;
width: 60px;
height: 25px;
}
On a related note, you can wildcard all icon-* styles so you don't have to copy&paste the same stuff everywhere:
div[class*='icon-custom-'] {
/* Insert common CSS styles here */
}
Note that I'm using extra custom- to separate this custom icon formatting from icons provided natively by bootstrap.
Happy bootstrapping!
If you're simply looking to have the highlight extend to the right when hovered I would suggest removing the width: 60px; from each of your li.one, li.two etc.
Maybe add some extra margin on your li a selector as well to reduce the overlap.
Overall I would agree with jsalonen that you should look into utilizing the built-in icon code in Bootstrap.
I'm creating a content slider with ul and li like:
<div id="tabs">
<ul>
<li id="left">content</li>
<li id="left">content</li>
<li id="left">content</li>
<li id="right">content</li>
<li id="right">content</li>
<li id="right">content</li>
</ul>
<ul id="content_show">
<li>content show</li>
....ect
</ul>
</div>
Now I want to show 3 contents on the left and 3 on the right and slider between of both.
I make to show all li id=(left and right) on the left and slider on the right but I cannot set li id="right" on the right listed.
How can display id="right" on the right of slider?
Like:
text text
text CONTENTSLIDER text
text text
you have to use style's or css file, and give the div tabs width, abd each li use float style
try to use class="left" and class="right"
#tabs { width:600px;} //example
.left { float:left;}
.right { float:right;}
I'm not sure I get what you really want but maybe you can use the float:right attribute for all the li you want to go to the right!