I have a relatively straight forward question. I want to edit a specific portion of my list, but I'm not sure how to format the CSS. Here's the code:
<ul class="upcoming">
<li class="post-265 tribe_events type-tribe_events status-publish hentry">
<div class="event">
Big 10 Alumni Picnic
</div>
<div class="when">
June 2, 2013 11:00 am – <br>June 2, 2013 3:00 pm
</div>
</li>
</ul>
I want to modify the li portion of the formula (i.e., to add a border, remove a border, etc.) but I can't figure out how to start the code.
event.li didn't work. li.event didn't work. I'm sure it's a simple fix, but I can't figure it out. Any help would be much appreciated!
Remove a border is:
<li style="border:none;">
Or in your CSS styles:
li.tribe_events {border: none;} /* either or*/
li div.event {border: none;}
But it's unclear as to whether you want to just do this statically, or want to do that dynamically from JQuery or whatever, in response to something happening. You probably need to specify what the situation is.
In JQuery:
$("li").css("border", "none");
$("#ID_of_some_element").css("border", "none");
But it's an issue of which <li> and when, really, isn't it.
If you're talking existing Javascript, event.target will give you the target node of DOM events such as hover, onclick etc.
If you want to remove it from the div: li .event is what you want. If it's from the list item it's .upcoming li.
ul {
border:1px solid black;
}
Simples
Although I'm sure what you're looking for is far less simple than originally stated
This should most likely work if I understand what you are asking:
li div.event {
border: none;
}
(or even more specific)
ul.upcoming div.event {
border: none;
}
li.event selects a li element with event class. You don't have that.
You have div element with event class. So, you weren't specific which element you need, but to select your li element you need ul.upcoming li; and to select your divs inside it: li div.event (or ul.upcoming li div.event or just .event, depending on how specific you need to be).
<li class="post-265 tribe_events type-tribe_events status-publish hentry">
Wow.. you have applied a lot of class name here. Would be better if you just using one or two class name which is specifically for that ul listyling, like:
.upcoming li{
/* any styling for the list goes here */
}
or maybe just create a new class name just for that list styling
.the-list{
display:block; /*to align it horizontally just use display:inline; */
(etc...)
}
So it looks nicer and easier to maintain it later on right? Happy coding!
Related
This seems like it ought to be ridiculously easy, but I'm having trouble figuring it out.
I want to replicate the <li> function so the disc image appears to the left, but applied to a tag
I have this, but it does not show the disc image.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
I want to avoid using any graphics to simulate the bullet if at all possible.
Thanks for the help
Answer:
display: list-item;
Display must be set to list-item - not inline, and not list!
.list {
list-style:disc outside none;
display:list-item;
}
<p class="list"><em>And Much, Much More!</em></p>
Well, a p is not a list. Why not use <ul><li>?
[edit]
Let me elaborate.
The problem is that you set this style on a list, while the disc is shown in the list items. A p has no items in that sense, so there's nothing to apply the disc to.
Only add following style
display:list-item;
Users can enter descriptions which may include paragraphs or lists. Or they may just enter text without any enclosing <p> or <ul> elements. What I need to do is remove most of the padding and margin above the first element and below the last element so that the user entered content has a nice tight border around it. So I could do one of the following:
Use a css rule I was unaware of to target only the first and last elements
Use css3 or html5 (I assume there's something within these to easily do what I want) and hope everyone upgrades their browsers asap while the older browsers just get a slightly uglier version of the page
Find the first and last elements with Javascript and modify accordingly
Modify the html to add a class like <p class="first">
Ideally the 1st solution exists, does it? I'm ok with the 2nd solution though if not, does it exist? The last 2 I don't care for...
UPDATE: don't care about IE6. But I do need to deal with the situation that if there's just text to begin with, without any <p> or <ul> or other elements, then actually nothing special needs to be done for the top margin/padding.
Use :first-child and :last-child like this. Note that > and :first-child (CSS2) doesn't work in IE6 and below, and :last-child (CSS3) doesn't work in IE8 and below. The only real workaround to both is to use a .first and .last class respectively (you can add them dynamically with JavaScript as Phrogz says).
.description > p, .description > ul {
margin: 1.5em 0;
}
.description > :first-child {
margin-top: 0;
}
.description > :last-child {
margin-bottom: 0;
}
I added the > combinator to prevent elements like strong or li getting selected. What does it mean?
Something like this?
.container * + p, .container * + ul
{
margin: 1em 0 0;
}
.container p, .container ul
{
margin: 0;
}
BoltClock's answer works great in most cases, but IE8 and earlier ignores the :...-child pseudo-selectors.
You can use jQuery to accomplish the same thing, while targetting more browsers.
//On ready...
$(function(){
//Update styles dynamically
$('ul:last').css({'margin-bottom':0,'padding-bottom':0});
$('ul:first').css({'margin-top':0,'padding-top':0});
});
Have you considered wrapping the content in a container with a negative margin? It requires the content to at least be wrapped in a single p element (not hard to test/add melodramatically).
CSS:
.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}
HTML:
<div class="container"><div class="subcontainer">
<p>My first paragraph.</p>
<p>My second paragraph.</p>
</div></div>
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?
I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.
I am working with the standalone 1.6 version of the accordion plugin.
The basic structure :
<div class="sidebar">
<ul id="navigation" class="ui-accordion-container">
<li><a class="head" href="#">1</a>
<ul class="sub">
<li>1a</li>
<li>2a</li>
</ul>
</li>
</ul>
</div>
and the script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.
Maybe the problem is in the CSS I have a background image in each of the sub menus:
#navigation{
margin:0px;
margin-left: 10px;
padding:0px;
text-indent:0px;
font-size: 1.1em;
width:200px;
text-transform: uppercase;
padding-bottom: 30px;
}
#navigation ul{
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li{
list-style:none outside none;
}
#navigation li ul{
height:185px; overflow:auto;
}
#navigation li ul.sub{
background:url('../images/sub.jpg') no-repeat;
dispaly: block;
}
#navigation li li a{
color:#000000;
display:block;
text-indent:20px;
text-decoration: none;
padding: 6px 0;
}
#navigation li li a:hover{
background-color:#FFFF99;
color:#FF0000;
}
Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.
-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.
I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:
jQuery('body').addClass('js');
This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.
There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:
#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }
... and then re-open before applying the accordion on dom.ready.
EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
I faced this very problem a week ago. I set the container to display:none and then used jQuery to make it show up at the appropriate time:
$(".accordion").show();
$(".accordion").accordion();
Code inside jQuery.ready() doesn't run until the DOM is ready — so it's normal for elements that will eventually be hidden to stay visible for a while. Accordion is set up this way partly for ease of use and partly for the sake of graceful degredation: content won't be missing (hidden) if JavaScript is disabled.
If you're willing to risk a page that breaks without JavaScript, go ahead and set your elements to be hidden. Then, immediately before .accordion(), show() them.
Here's an idea to maintain compatibility. It has been minimally-tested and is open to comment.
Leave your CSS alone, but add this to the top of your JavaScript (outside jQuery.ready()):
document.styleSheets[0].addRule(".yourclass", "display:none");
That way, as the page is being constructed, a CSS rule will be set up to hide your hidden elements. Then, inside jQuery.ready(), call $(".yourclass").show() to bring them back before initializing the accordion.
Do your .accordion binding directly in a <script> just below the accordion elements instead of waiting for document ready.
They'll then activate as soon as possible, rather than waiting until the page is ‘ready’ (which can take a long time especially on IE, which doesn't support the DOMContentLoaded event, so jQuery has to wait for onload, which only fires after all the images and everything are loaded).
You could set the accordion parent element to ‘visibility: hidden’, and then restore it to ‘visible’ manually when the script initialises. But then browsers with JavaScript off won't see the content at all, which isn't ideal.
be careful using this with regard to accessibility:
body {
display: none;
}
If for whatever reason javascript is turned off, then nothing will be displayed ;)
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I tried to hide the elements in the
CSS to keep them from appearing while
loading but all that achieved is in
having them always hidden.
Why don't you try making it hidden in the css, and then do this:
jQuery('#navigation').show().accordian...
I have hundreds of jQuery elements (tabs, sliders & accordions) across many portal sites. Setting hide/show styles for each isn't a realistic option.
Simple solution, hide the body until jQuery is ready and has built the elements, then show the body.
In my master stylesheet:
body {
display: none;
}
In my master javascript file, at the bottom of jQuery.ready():
$(document).ready(function() {
$("body").show();
}
I have been using css solutions like the one Tim suggested, but these would mean to hide content for people with javascript disable (or devices with no javascript support). I much prefer the solution provided by Jerph, thanks for sharing.
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I'm creating a custom master page for a MOSS publishing site. The designers have come up with this idea for the fly out menu...
alt text http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg
which uses graduated/different backgrond and text colours for each menu option.
Does anyone know how to accomplish this?
You can use the CSS next-sibling selector (+) to achieve this however IE6 won't get the styles.
Do something like the following (colour properties are just for example):
ul ul li { background: darkblue; color: lightblue; }
ul ul li+li { background: blue; color: lightblue; }
ul ul li+li+li { background: lightblue; color: darkblue; }
ul ul li a:hover { color: black; }
Alternatively, you'll have to either apply a CSS class to each subitem going down (talk to the programmer if you're not responsible for that), or do it by adding classes with javascript.
Ideally try to convince them that you can't do it for IE6 but modern browsers will manage fine. As long as the site is still usable the gradient of colours is a very minor loss.
I see two possibilites with pure css:
1.
If you have fixed pixel height for the entry lines you could always use one single background image with the gradients on it. If you make your menus with lists you could just slap it on the encompassing list tag.
2.
If you want to to keep the line height/ font size flexible you can work with multiple classes: one for every color tone. Just give give every nth-line a special class with the corresponding color tone as a background color and slap that class on the tag for that line.
design critic:
The problem that I see here is that you will have a maximum number of entries because with this level of gradual fade the background color will become white after six or seven entries.
kind words:
As long as the menu doesn't have to be transparent you should be fine.
If you want to be able to calculate a gradient of arbitrary colors, this page has some useful functions for handling hex color triplet calculations.
I would probably use the Suckerfish method with different a CSS class for each level of <li> in the menu:
<ul id="menu">
<li class="root">Home</li>
<!-- etc. -->
<li>Products
<ul>
<li class="sub1">BTE Legal Expense Insurance</li>
<li class="sub2">Legal Services</li>
<!-- etc. -->
</ul>
</li>
<!-- etc. -->
</ul>
I found this not to be possible with the Sharepoint