I'm a bit confused with this task that I have: I need to write a dom representation of these selectors:
Currently I have written this html markup:
<div class="red well">
<div id="loop">
<ul>
<li class="active">
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
</div>
</div>
I have tryied this code but it seems that I have made some kind of logical mistake. Any advise why my html markup does not get the properties from the image above?
The DOM representation should be
<div class="red well">
<div id="loop">
<ul>
<li class="active">
...
<!-- 0 or more nodes here -->
<img src="" alt="" />
</li>
</ul>
</div>
</div>
The image is a following sibling (~) - not necessarily an immediate sibling - of the link, not a child.
~ is the "general sibling selector".
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
A website I administrate through a CMS provider has two header elements and two nav elements on most pages. The headers are the top banner with our logo and page title for the main page content. The nav elements are a top navigation and a left side navigation. The tool I use to flag accessibility issues is flagging these as "Non-distinguishable landmarks" as they have neither 'aria-label' nor 'aria-labelledby'.
Contacting my CMS provider they stated that the structure of the html fully achieves distinguishing landmarks. That multiple instances of the same class of element is fine if there is other HTML that differentiates them. That ARIA labels are not needed, though some encourage their use or find them preferable.
Reaching out to support with the accessibility tool, they reiterate basically what the tool explained, that aria-labels are needed to distinguish repeated landmarks.
Working through both support staffs, each made it clear they were passing along information from another member of their organization for clarification so it is possible some information is getting dropped.
The following is redacted for readability, but I can provide further if relevant.
<div class="sitewrapper site_template mainSpan_wrapper">
<div class="mainSpan" id="mainSpan_wrapper_Screen">
<!--stopindex-->
<div id="skipnav" tabindex="-1">
<a href="#sitebody" tabindex="-1">
<img alt="Skip to page body" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Home" href="/home" tabindex="-1">
<img alt="Home" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Services" href="/services" tabindex="-1">
<img alt="Services" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Departments" href="/departments" tabindex="-1">
<img alt="Departments" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="About Us" href="/about-us" tabindex="-1">
<img alt="About Us" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="I Want To..." href="/i-want-to-" tabindex="-1">
<img alt="I Want To..." src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
</div>
<!--startindex-->
<header id="siteheader" class="">
<!--stopindex-->
<h1 class="wcag_only">My organization</h1>
<a id="home_link" href="/home">Home</a>
<a class="menu_trigger mobile_only" href="javascript:void(0);">Menu</a>
.
.
.
</header>
<div class="standardthreecolumnlayout clearfix" id="sitebody">
<div id="ColumnUserControl1" class="column top_col clearfix " >
<div class=" main_menu_widget">
<nav class="regularmegamenu mainnav" id="menuContainer_617_0_403">
<ul class="dropdownmenu clearfix">
<li class="megamenu_first" id="dropdownrootitem1"><a class="dropdownrootitem1" href="/home" title="Home" data-navid="1" target="_self">Home</a></li>
.
.
.
</ul>
</nav>
</div>
</div>
<div id="ColumnUserControl2" class="column left_col " >
<nav id='leftNav_618_0_403' class='nocontent sidenav mobile_list vi-sidenav-desktop '>
<h2 class="mobile_only mobile_header">Navigation Menu</h2>
.
.
.
</nav>
</div>
<div class="column right_col">
<div class="column right_col">
<div id="ColumnUserControl3" class="column banner_col clearfix " >
<a id="pagebody"></a>
<header id="widget_621_571_403" class="title_widget clearfix on_page " >
<p class="breadcrumb">
Departments » Human Resources
.
.
.
I expect that the aria-labels will be needed, but could use some expertise to determine the right direction.
I've never tested this myself, but going by the WCAG documentation, I'm going to say it needs the aria related attributes to be properly accessible.
When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-label or aria-labelledby attribute.
Source: Technique H97: Grouping related links using the nav element
As mentioned on the H97 page, this is related to fulfilling WCAG Success Criterion 1.3.1: Info and Relationships,
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
This is a funny one.
I have a page using knockoutjs.
Everything works fine apart from one of the images in the page that doesn't show.
My HTML
<div class="cyclerItem"> #*Views and Visitors*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
</div> #* Container ends*#
</div> #* scroll *#
</div> #*modul content 4 4 *#
</div>
</div> #* Cykler filter text*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
My HTML rendered on the Client:
<div class="cyclerItem">
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
<div id="content1">
<p>Function</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': functions.functionsList">
<li data-bind="'text': title, 'click': goToDepartments"></li>
</ul>
</div>
<div id="secondary1">
<p>Department</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': departments.departmentsList">
<li data-bind="'text': title"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
as you can see there only one small difference, one of the image have the source where the tilde (~) didnøt get resolved inot the right path.
It's only that one image in that position, if I change the source to another path it still does not work, but as you can see the next image is exactly the same but it works...
something to do with mvc messing around because of the knockout code?
Or maybe just a simple error in my html that make MVC get crazy? First coming first serving. :)
I actually found the problem. It's probably a pure HTML problem.
There is an extra double quote at the end of one attribute in a li tag. :)
I made some tests and it doesn't matter where but if any attribte in any tag as an extra double quote, that img stop working. I wonder why that img src and not something else.
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.