Hey guys i am working on this gallery.
Now I've thumbnails set on block grid and ive added an overlay div on first list item and the problem is that i am not able to set it dynamically i mean 100 percent width and height because the gallery is responsive so what i wanted is that overlay should fix on thumbbs.
i am unable to set the fiddle so i am uploading a live example.
you can see overlay extending thumbs.
please suggest a solution
Link
Thanks.
I need overlay on every thumb.
Here is my Code new one
<style>
.thumbsList li {
position: relative;
}
.overlay
{
position: absolute;
z-index: 22;
background-color: black;
opacity: 0.6;
height:100%;
with:100%;
z-index: 22;
}
</style>
</head>
<body>
<div class="row projectsRow">
<ul class="large-block-grid-3 medium-block-grid-3 small-block-grid-2 thumbsList">
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\1.jpg" alt="">
</li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\2.jpg" alt=""></li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\3.jpg" alt=""></li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Give a position: relative; to the your <li> elements. Also put the <div class="overlay"></div> tag inside each <li> tags.
.thumbsList li {
position: relative;
}
And put the following code inside all <li> instead of just the first one.
<div class="overlay"></div>
Related
Hi guys having trouble with implemting a a sticky navbar in my Angular application.
This is my app component:
<div class="master-wrapper">
<div class="master-container">
<app-online-header></app-online-header>
<div class="sticky">
<app-navigation></app-navigation>
</div>
<div class="background">
<router-outlet></router-outlet>
</div>
</div>
</div>
My goal is to have the <app-navigation> component sticky. Here is how it looks like:
What I tried so far is in my app-component CSS file:
.sticky{
position: sticky;
top: 0;
}
Question:
Why doesn't this make my <app-navigation> component sticky?
The problem is the class is defined in the <div> tag. The class="sticky" needs to be defined inside the <nav> or <div> tag that's placed inside the <app-navigation> component
Example:
HTML code:
<nav class="sticky">
<ul class="menu">
<!-- Insert client logo here -->
<li class="css_logo">Monte</li>
<!-- Insert your page navigation here -->
<li class="css_link"><a [routerLink]="['Concept']" [routerLinkActive]="['active']">Concept</a></li>
<li class="css_link"><a [routerLink]="['Fusion']" [routerLinkActive]="['active']">Fusion</a></li>
<li class="css_link"><a [routerLink]="['Home']" [routerLinkActive]="['active']">Home</a></li>
</ul>
</nav>
CSS code:
.sticky {
width: 100%;
height:72px;
margin:0;
left:0;
right:0;
top:0;
background-color: white;
overflow: hidden;
display: block;
position: sticky;
position: -webkit-sticky;
z-index: 5;
}
Angular ts file
<!-- Common site Navigation bar -->
<app-navigation-bar></app-navigation-bar>
<!-- Application's Router sequence -->
<router-outlet></router-outlet>
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
I want to have multiple images on the same line with a caption below each image.
I can put images on the same line using the display:inline tag. When I add the figure tag, they are moved to different lines.
I tried multiple variation and can't get it to work.
Am I using the wrong tags for the job? I've seen this on other sites, but don't know how they do it.
CSS
section.products{
width: 100%;
padding:5px;
line-height:100%;
margin-top: 5px;
float: left;
text-align: center;
}
img.fans {
text-align: center;
max-width: 100%;
height: 50px;
width: 50px;
}
a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
p {
text-align:center;
align: center;
}
figure {
display:center;
}
ul.fans li{
display: inline;
}
HTML
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
You've got a couple things wrong.
You didn't close your image tags properly
you have in inline style of "float" which is not valid
This should help get you what you're looking for.
Css
ul.fans li {
display: inline-block;
}
figcaption {
text-align: center
}
Html
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded"/>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
Codepen Example
with html 5 the proper way to put an image tag is like so
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" />
You dont need a tag because you never finished opening the tag, it seems like you are mixing the old way of doing things like this
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>
display inline will make the li act as if they are a p tag or any other inline element.
The reason they are going to new lines when you add a figcaption is because figcaptions are display: block. block display types will always push items to the next line. with css you can change the display types of items like you did with the li elements.The figure tag is also a block element.
when you write html please always indent when there is nesting (an element inside of another one)
Also the style="Float" is not valid css. anything in between the "" will be css and it is called inline css. It is best to not have css inline because it can cause problems when trying to change the css the majority of elements later on.
you can add css in the top of your document with the style tag. like so
<style type="text/css">
ul.fans li {
display: inline;
}
</style>
You will want to correct the closing tag and get the css in the right spot, and make sure you do not do inline css (style="float:left;").
Since stated from the answer before that you probably don't need a list for this because lists are for breaking into new line, you will probably want to do something like this instead
<style type="text/css">
.fans li{
display: inline;
}
.fans .captioned-image {
display:inline-block;
width:200px;
}
.fans figure {
width: 200px;
display:block;
text-align:center;
}
img {
max-width:200px;
}
</style>
<section class="products">
<h1>Fans</h1>
<p>
<div class="fans">
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shrouded</figcaption>
</figure>
</a>
</div>
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</div>
</div>
</p>
</section>
With the CSS code posted below, I thought that I would be making a nav bar that extends the width of the browser and has a red background. I also thought I would be making the logo for the page appear ont he far left, with the text immediately to the right. What do I need to do to make a #ff0000 nav bar extend the whole width of the browser? How can I align this text to be to the right of the logo and at the top of the browser window?
Here is the CSS code:
.logo{
float:left
}
.titletext {
text-align: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Here is the HTML code:
<DOCCTYPE = HTML>
<html>
<head>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</head>
</html>
JS Fiddle
Never write code inside the <head> tag, you should use float:right for .titletext
HTML
<body>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<div class="clearfix"></div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
CSS
.clearfix
{
clear:both;
}
.logo{
float:left
}
.titletext {
float: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Your HTML is not valid. You insert content into head tag.
Check this DEMO
<head>
<title>Your title</title>
</head>
<body>
<!-- Place here your content -->
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>
Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});
1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div