I am trying to display a caption on my images. Caption should behave in two different ways. One is normal and second is hover. For better understanding I have added an image. check it.
Here I have already finished big part of this, But I can not display normal caption on the image correctly.
Can anybody tell me how I figure this out?
THIS is my HTML -
<div class="slideimages">
<div id="box-1" class="box">
<div class="fix-caption">
<h3>Fix Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<a href="">
<img class="image_scale" src="images/4750.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</a>
</div>
</div>
MY JS FIDDLE with CSS
Thank you.
Add the following CSS
.fix-caption {
z-index: 5;
background-color: white;
}
Your caption is there, just displaying behind the image...
Alternatively put the elements with .fix-caption lower in the DOM order, which will effectively give them a higher display order (note you'll still want a background-color).
DEMO 1 (z-index) : http://jsfiddle.net/Zfr5c/3/
DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/
Related
On this website, I don't know what to use for small lines of texts which describe and promote product features. This doesn't really feel like a heading, and it also doesn't feel like a paragraph.
What would you say is the best html semantic tag for the lines of text next to the pictures, for example the "Maximum performance" element? (rudimentary simple, fiber all the way, and built to last)
Apparently you want to show a title and description under that.
For example you can create that with Bootstrap like this :
<section class="container-fluid bg-light">
<div class="container">
<h3>Your title at here</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</section>
I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?
Here is the template I am using.
Template
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}
.above-spacing{
padding-top: 10px;
}
.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><span class="p2">{{MidParagraphPart2}}</span><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>
Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><span class="p2">(Part #2) Link text</span><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><span class="p2"></span><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>
Try this:
Add this to the end of your css.
.hidden{
display: none;
}
Then add the injectable variable Hidden to any element you want to hide on demand.
<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><span>{{Paragraph3}}</span><span>{{Paragraph4}}</span></div>
Inject "hidden" (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.
You can remove the p1, p2, and p3 classes.
The span is inline tag. We can not set margin for it. You should set span to display: inline-block.
.p1,
.p2,
.p3 {
display: inline-block;
}
To hide second span you should add class empty for it:
<span class="p2 empty></span>
CSS:
.p1.empty,
.p2.empty,
.p3.empty {
display: none;
}
I saw some error in your HTML code.
your first span is missing " before the class name.
Your second span doesn't have a class. Maybe add p2 like you want.
I'm not sure to understand the whole question here, but why did you put a
display: none;
to your span?
Try
display: inline-block;
Another solution could be to remove span and add
<p>
instead and add that in your css
p{
margin-bottom:20px; //can add a class p3 to your p.
}
Ok, this is by far one of the strangest problems I have encountered in my css experience. I am trying to use some subtle patterns that repeat for a div on my webpage. Strange enough, whenever i try to set an pattern that is very white, the browser refuses to load the image. When I try to use a darker image, it works just fine. Now I know that the colour is obviously not the problem, but what am I missing. Here is the HTML/CSS:
#section1{
background-image: url("../images/as.png");
}
<div id="section1">
<div class="content98">
<h1 id="h1d">De ce matest.ro?</h1>
<div id="border">
<img class="show" id="show1" src="images/untitled-2.png">
<h2 id="dix">Obiective</h2>
<hr>
<div id="hided1"><p class="hiding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lorem, feugiat ut condimentum ac, ultricies vitae nibh. Duis sed lacinia magna.>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<br><br>
</div>
First check your body background color white or change and see. Then Check in inspect element of browser in style box that your property is strikeout or not.
#section1{
background-image: url("../images/as.png");
}
And then add background-repeat:repeat; to your image like this.
#section1{
background-image: url("../images/as.png");
background-repeat:repeat;
}
even like this you can write
#section1{
background:url("../images/as.png") repeat;
}
I am showing latest news in a div box in which each news is separated from others by a separator of border-bottom. Note that in the HTML I am not using any ul li; rather than I am using simply divs. The problem is that the last news div is also showing the border bottom separator. I dont know how to remove it even I have already tried :last-child selector but it's not working. I know by using ul li, the problem can be solved by :last-child, but I dont want to change my HTML. Here is a snaphost:
HTML CODE:
<div class="float_left_div posts">
<h3>Latest News</h3>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
<div class="news_wrapper">
<div class="news_txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
</div>
<div class="div_separator"></div>
</div>
</div>
The demo is at:
JSFiddle
So by keeping the same HTML, how can we remove the last border of separtor?
Use CSS last-child property to remove the border.
.posts .news_wrapper:last-child .div_separator
{
border-bottom:0px;
}
DEMO
Please be aware that the the :last-child pseudo-class does not work in most browsers. If i where you i would put the border to the top (instead of bottom) and then use
.posts .news_wrapper:first-child .div_separator{border-top:0px;}
Please note first:child is recognised in most browsers.
firstly thank you StackOverflow community for destroying many evil bugs through the wonders of crowd sourcing, before I even ran into them.
I am building a site using the Wordpress Roots theme (based on HTMl5 Boilerplate and Bootstrap). I'm using some of Bootstrap and overriding other bits, writing custom CSS a lot etc.
My problem is with the Bootstrap responsive navbar. I am creating a page including a fluid grid section - as all sections are flush in this scroll-ey type design, I want to remove all gutters from the Bootstrap grid. To achieve this I set the GutterWidths to 0px in variables.less as below then compile with simpLESS:
// Default 940px grid
// -------------------------
#gridColumns: 12;
#gridColumnWidth: 60px;
#gridGutterWidth: 0px;
#gridRowWidth: (#gridColumns * #gridColumnWidth) + (#gridGutterWidth * (#gridColumns - 1));
// 1200px min
#gridColumnWidth1200: 70px;
#gridGutterWidth1200: 0px;
#gridRowWidth1200: (#gridColumns * #gridColumnWidth1200) + (#gridGutterWidth1200 * (#gridColumns - 1));
// 768px-979px
#gridColumnWidth768: 42px;
#gridGutterWidth768: 0px;
#gridRowWidth768: (#gridColumns * #gridColumnWidth768) + (#gridGutterWidth768 * (#gridColumns - 1));// Default 940px grid
One would hope adjusting the grid system has nothing to do with the navbar but the logo (a.brand) is breaking onto its own line above the links, see: http://twvid.co/mega/case-studies
It looks like somewhere in the mire of LESS these gutter values are being used as variables to determine some navbar layout stuff I'm struggling to track down in FF web dev tools.
Nothing special going on with the WP side, here's the navbar:
<header class="banner navbar navbar-static-top navbar-inverse" role="banner">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://www.tanglewoodproductions.co.uk/mega/">
Tanglewood Video </a>
<nav class="nav-main nav-collapse collapse" role="navigation">
<ul id="menu-primary-navigation" class="nav"><li class="menu-home">Home</li>
<li class="menu-video-marketing">video marketing</li>
<li class="menu-video-production">video production</li>
<li class="active menu-case-studies">case studies</li>
<li class="menu-contact-us">contact us</li>
<li class="menu-blog">blog</li>
</ul> </nav>
</div>
</div>
</header>
Navbar CSS:
.banner { }
.navbar .nav {
font-size: 18px;
}
a.brand {
line-height: 20px;
}
.page-header h1{
text-transform: uppercase;
}
Grid section:
<section class="container-fluid scroll-section" id="case-studies-portfolio">
<h1 class="text-center section-heading">case studies</h1>
<h2 class="text-center section-slug">stuff we've done</h2>
<div class="row-fluid" id="portfolio-grid">
<div class="span8 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span2 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span2 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="row-fluid" id="portfolio-grid">
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</section>
Grid css:
#case-studies-portfolio {
position: relative;
z-index: 4;
}
#portfolio-grid {
border-color: rgb(0,0,0);
border-width: 1px;
border-style: dotted;
}
/* #portfolio-grid [class*="span"] {
margin-left: 0;
} */
.portfolio-cell {
color: #fff;
background-color: rgba(30,30,30,1);
height: 100%;
}
Aside: I'm also trying to get the grid cells to be full height regardless of content.
Of course, just overriding this in my CSS could work too (not sure how), but as I'm only using the grid on one page, and I'm not expecting to want all this padding elsewhere if I use more grids, I thought I'd nip the problem in the bud to reduce code redundancy.
I hope any suggestions might be useful for anyone looking to use the Bootstrap grid for flush grid layouts simply (adding in padding where needed) without breaking their navbar.
Many thanks in advance.
NB: This is a live dev site so my problem might not actually appear on the linked page as I do stuff to it - StackOverflow won't let me post images.
I believe the gutter is added by .row where you would normally place spans. I've added negative left margin values to .row or .row-fluid before and it seemed to have worked, I'm not sure if this is wise to compile, maybe just override with a separate stylesheet.
.row {
margin-left: -20px;
}