I want to add CSS only for listing-system class but child class of "expired". How i am struggling to write CSS for it, can anyone help me. Thanks
<div class="listing-system">
<div class="listing-system-row">
<div class="listing-system-row-image">
<a href="#" style="background-image: url('#')">
<div class="ribbon expired">
Expired
</div><!-- /.ribbon -->
</a>
</div><!-- /.listing-system-row-image -->
</div><!-- /.listing-system-row-actions -->
</div><!-- /.listing-system-row -->
<div class="listing-system">
<div class="listing-system-row">
<div class="listing-system-row-image">
<a href="#" style="background-image: url('#')">
<div class="ribbon">
Pending
</div><!-- /.ribbon -->
</a>
</div><!-- /.listing-system-row-image -->
</div><!-- /.listing-system-row-actions -->
</div><!-- /.listing-system-row --
You can do this via Jquery, If you want to select a class '.listing-system' which has a child class '.ribbon.expired',
$('.ribbon.expired').closest('.listing-system').css('your css style goes here');
Hi this is working too
$(".ribbon.expired") .parentsUntil( ".listing-system" ) .css( "display", "none" );
Related
I recently started using VS Code, I did my best to research how to put empty line between sibling elements in html automatically through VS options without the need of putting it manually, but nothing. The following snippet triggers when I type "tabs" and hit tab.
Current result:
<div class="tabs js-tabs">
<div class="tabs__head">
<div class="tabs__nav"></div><!-- /.tabs__nav -->
</div><!-- /.tabs__head -->
<div class="tabs__body">
<div class="tab"></div><!-- /.tab -->
</div><!-- /.tabs__body -->
</div><!-- /.tabs js-tabs -->
Desired result:
<div class="tabs js-tabs">
<div class="tabs__head">
<div class="tabs__nav"></div><!-- /.tabs__nav -->
</div><!-- /.tabs__head -->
<div class="tabs__body">
<div class="tab"></div><!-- /.tab -->
</div><!-- /.tabs__body -->
</div><!-- /.tabs js-tabs -->
You can insert empty text node {} so Emmet will format it as newline:
.tabs>.tabs_head+{}+.tabs_body
expands to the following result in Sublime Text:
<div class="tabs">
<div class="tabs_head"></div>
<div class="tabs_body"></div>
</div>
I feel a bit silly posting this, since I've been working on this code for a bit and have run into this problem before, but in trying to clean up this project I removed/misplaced something and now my blog layout will not behave the way I want it to. I have two divs, one acting as the main container div, and another one inside that div for the actual blog entries. I'm almost sure it's a missing tag, but no matter where I place the closing tag, it doesn't look like what it initially did, so now I'm not entirely sure. The closest I get it almost ends up looking normal, but the embedded media content and tags do not appear. Here is my html markup; I can't figure it out for the life of me. Thanks in advance.
<!-- MAIN BLOG CONTAINER -->
<div class="pc">
{block:Posts}
<!-- POSTNOTES -->
<div class="pnc">
{block:Date}
{DayOfMonth} {ShortMonth} {ShortYear}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
{block:RebloggedFrom}
source
{/block:RebloggedFrom}
{/block:Date}
</div>
<!-- END OF POSTNOTES -->
<!-- PERMALINK -->
{block:PermalinkPage}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}
<!-- END OF PERMALINK -->
<!-- POST TITLE CONTAINER -->
{block:Title}
<div class="ptc">
<div class="pt">{Title}</div>
</div>
{/block:Title}
<!-- END OF POST TITLE CONTAINER -->
<!-- INSIDE OF POSTS -->
<div class="posts">
{block:Text}
{Body}
{/block:Text}
</div>
<!-- PHOTOS -->
<!-- SINGLE PHOTO -->
{block:Photo}
<center>
<div style="margin-top:10px"></div>
<img src="{PhotoURL-250}" alt="{PhotoAlt}">
</center>
{block:Caption}{Caption}{/block:Caption}{
/block:Photo}
<!-- END OF SINGLE PHOTO -->
<!-- PHOTOSET -->
{block:Photoset}
<div style="margin-top:10px"></div>
<center>{Photoset-250}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
<!-- END OF PHOTOSET -->
<!-- PANAROMA -->
{block:Panorama}
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Panorama}
<!-- END OF PANAROMA -->
<!-- ASKS -->
{block:Answer}
<img src="{AskerPortraitURL-64}">
{Asker}:
{Question}
{Answer}
{/block:Answer}
<!-- END OF ASKS -->
<!-- VIDEOS -->
{block:Video}
<center>
<div style="margin-top:10px"></div>
{Video-250}
</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Video}
<!-- END OF VIDEOS -->
<!-- QUOTES -->
{block:Quote}
{Quote}
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
{/block:Quote}
<!-- END OF QUOTES -->
<!-- LINKS -->
{block:Link}
<a href="{URL}" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
{/block:Link}
<!-- LINKS -->
<!-- CHAT -->
{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
{block:Label}{Label}{/block:Label}
{Line}
{/block:Lines}
{/block:Chat}
<!-- END OF CHAT -->
<!-- AUDIO -->
{block:Audio}
<div style="margin-top:10px;"></div>
<center>
{AudioPlayerWhite}
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<p>{block:TrackName}{TrackName}{/block:TrackName}</br>
{block:Artist} {Artist}{/block:Artist}</br>
</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
<!-- END OF AUDIO -->
</div>
<!-- TAGS -->
<div class="tc">
<div class="tags">
{block:Tags}
* {Tag}
{/block:Tags}
</div>
</div>
<!-- END OF TAGS -->
{/block:Posts}
</div>
<!-- END OF MAIN BLOG CONTAINER -->
</body>
</html>
UPDATE Figured as much; it was an open bracket from one of the blocks. I had accidentally indented it, thus creating an open space, and it messed up the entire layout:
<!-- PHOTOS -->
<!-- SINGLE PHOTO -->
{block:Photo}
<center>
<div style="margin-top:10px"></div>
<img src="{PhotoURL-250}" alt="{PhotoAlt}">
</center>
{block:Caption}{Caption}{/block:Caption}{
/block:Photo}
<!-- END OF SINGLE PHOTO -->
I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.
I'm having a bit o dificulty making this work.
This is my first website, I'm using Zurb and finding it good so far.
I'm trying to implement a responsive nav, but it isn't working. The one I'm trying is this one: http://responsive-nav.com/#instructions. I made everything they ask to, but it still don't work. It's the same as not adding code at all to the website.
Some of the nav's code, if it helps:
<div class="row" id="row-top">
<div class="large-4 small-8 columns logo">
<img src="img/logo.png" alt="Laboratório Morales">
</div> <!-- logo -->
<div class="large-8 small-12 columns nav">
<ul class="inline-list menu-principal">
<li>Laboratório</li>
<li>Exames</li>
<li>Convênios</li>
<li>Estrutura</li>
</ul> <!-- menu-principal -->
</div> <!-- menu-principal div -->
</div> <!-- row topo -->
Calling in the head, and bottom of body:
<link rel="stylesheet" href="css/responsive-nav.css"> <!-- responsive nav -->
<script src="js/responsive-nav.js"></script> <!-- responsive nav -->
<script>
var navigation = responsiveNav("#nav");
</script> <!-- responsive nav -->
Hm ... you are passing an id #nav. But you put nav in the class property. It should be
<div class="large-8 small-12 columns" id="nav">
Isn't it?
HTML
<div class="row-fluid" id="content-row">
<div class="span12">
<div class="row-fluid">
<div class="span4" id="home-logo">
<img src="img/layout/logo.png" id="logo">
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
</div><!-- ./span4 -->
<div class="span8" id="home-copy">
<p id="home-p">
Foxcode is an investment and merchant banking Firm which advises and invests in small to mid-market companies and projects globally.
</p>
</div><!-- ./span8 -->
</div><!-- ./row-fluid -->
</div><!-- span12 -->
</div><!-- ./row-fluid -->
I try to set #subnav{margin-left: } or #subnav li{margin-left: } to control the element position so it goes to the right a little bit, but nothing happens when I try to.
Concerned element
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
Try adding to your CSS:
#subnav{
padding:0px;
margin:0px;
margin-left:10px;
}
JSFiddle