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
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 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" );
I wanna know why the logo is not showing on mobile devices, I tried resetting my network on phone, and reset web browser.I also try making the logo little smaller from 100px to 80px but still it's not showing. Here is the code below. Please Help Thanks is advance. Here is the working jsfiddle https://jsfiddle.net/light22/60xrbkhf/#&togetherjs=fHfHVyawIa
<header id="header" class="transparent-header" data-sticky-class="not-dark">
<div id="header-wrap" style="height:180px;">
<!-- Primary Navigation "
============================================= -->
<nav id="primary-menu" class="style-2 center">
<!--<div class="container clearfix"></div>-->
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<div style="text-align:center">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
<li><div style="border-bottom:1px solid #000">Home</div></li>
<li><div>WHO WE ARE</div></li>
<li><div>WHAT WE TRADE</div></li>
<li><div>SERVICES</div></li>
<li><div>LOGISTICS</div></li>
<li><div>CONTACT</div></li>
</ul>
</div>
</nav><!-- #primary-menu end -->
<!-- Logo
============================================= -->
<div id="logo" class="divcenter">
<img class="divcenter" src="images/logo.png" alt="Canvas Logo">
<img class="divcenter" src="images/logo#2x.png" alt="Canvas Logo">
</div><!-- #logo end -->
<br>
</div>
</header><!-- #header end -->
Rename image in your images folder
1logo#2x.png to logo#2x.png
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?
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)