I have a grid using Foundation as so:
<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
<li><img src='xxx.jpg'></li>
<li><img src='xxx.jpg'></li>
<li><img src='xxx.jpg'></li>
...
</ul>
I use jscroll to load the page as users scroll down. This adds a new ul each time, however this also means a new row is started whenever this occurs. Is it possible to get the following ul elements to continue on from the previous list?
Related
I have a navigation menu and I want the dropdown links to be in two separate columns.
I've tried using the columns property of CSS and have played around with other recommendations I have found online.
The html:
<nav id="nav">
<ul>
<li>Home</li>
<li>
Services
<ul>
<li><img src="images/icon_service1.png" alt="Service1" />Service 1</li>
<li><img src="images/icon_service2.png" alt="Service2" />Service 2</li>
</ul>
</li>
<li>
About
<ul>
<li><img src="images/icon_about1.png" alt="About1" />About 1</li>
</ul>
</li>
</ul>
The CSS:
I tried to post the CSS but kept getting an error that it wasn't indented properly with 4 spaces...? I'll try to post it in the comments...
The JS:
Dropdowns.
$('#nav > ul').dropotron({
offsetY: -16,
mode: 'fade',
noOpenerFade: true,
hideDelay: 400
});
The menu is displaying as a single dropdown and I want to show it as two columns.
I would preferably like to have it show two columns if there are 8 or more items in the drop down preferably, but I could set the css separately if need be.
I have tried css Columns but nothing I've tried has worked.
I'm attaching the CSS as images because the editor won't seem to let me add CSS...
enter image description here
enter image description here
I'm new to selenium ide and i want to automate some websites. i want it to be like this.
Click
Click Link 1
do some clicking inside that link
go back to the list of link
Click Link 2
do some clicking inside that link
go back to the list of link
Click Link 3
and so on
my only problem here is i don't know how it will click the first link from the top. this is the html of the website.
<h5>20 seconds ago</h5>
<ul>
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
wews
send new
post **Link 1**
</li>
</ul>
<h5>3 minutes ago</h5>
<ul>
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
yokol
submitted a new
post **Link 2**
</li>
</ul>
<h5>4 minutes ago</h5>
<ul>
<h3>6 minutes ago</h3>
<ul>
<h5>7 minutes ago</h5>
<ul>
<h2>8 minutes ago</h2>
<ul>
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<li class="notification-posted">
<img height="15" alt="" src="/assets/images/icons/notification-posted.png">
hey
send new
post **link 3**
</li>
</ul>
I haven't used Selenium ide, but I have used Selenium Webdriver for python which is similar
You just need to locate your element by css selector, specifically structural selectors; this is prob the easiest way if you have to dig through a lot of markup that doesn't have ids/classes
CSS has descendent selectors and psuedo-element selectors that allow you to target specific elements based solely on their position within the DOM, without needing an id or class
you can use the :nth-of-type() psuedo element, which targets the specific occurrence of that element based on the number you pass to it
for example in plain css:
a:nth-of-type(1)
would look within the body and select the a that is the first of its type. if you used 2 instead, it would target the second occurrence of an anchor.
for example, in selenium.webdriver this is how you'd find your element:
# ff is the webdriver.Firefox() instance
firstAnchor = ff.find_element_by_css_selector("a:nth-of-type(1)")
secondAnchor = ff.find_element_by_css_selector("a:nth-of-type(2)")
You can use that to target the 1st, 2nd, 3rd etc elements. There's also css attribute selectors too if you need to target an element based on a specific attribute value
ff.find_element_by_css_selector("a[href='/account/54351-wews']")
good luck mayne. cholla cholla hee haw
I want to add my navigation in the sidebar, and there isn't space for it.
I want to set it up so that when I hover over a word such as (Links) a list will appear. But I'm not sure what code I should be using to accomplish this.
An example can be seen here: http://www.colourlovers.com/ when you hover over Browse it shows a list of other links.
<div id="navigation">
<a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear
Charlie</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Portfolio</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Aftermidnightworkouts</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Writings</a>
</div>
Here's a little bit of code to get you started:
http://jsfiddle.net/jonigiuro/ZsAQb/
<ul id="navigation">
<li>
Dear Charlie
<ul class="subnav">
<li class="item">
subnav item1
</li>
<li class="item">
subnav item2
</li>
</ul>
</li>
</ul>
It's better to use a list for navigation menus like yours, it would be even better to wrap it in a nav tag (html5).
The trick is that you insert a child list for the subnavigation inside a list item of the main navigation and set it's css to be hidden by default. When you hover on a main navigation item you just target it's child subnavigation and display it
Just google for CSS drop down menu, lots of pages about it, you can even have it generated and then inspect the code yourself (for example here). You just need a bit of css code that use :hover selector.
I am in the process of creating two columns. In the first column will be a picture and in the second column will be a number associated with how many times the picture is clicked(basically). So I need the two to line up, but I also want the images to line up with one another as well as the number to line up with one another. So my questions is is it better to do this in a table or to create two divs, put the list items in each div and then float them left next to one another?
If there is a better way I am open.
Option 1
<div>
<div style="float:left">
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
<div style="float:left">
<ul>
<li><value></li>
<li><value></li>
<li><value></li>
</ul>
</div>
</div>
Option 2
<table>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
</table>
I am sure there is a better way of doing this. I think these both would work, but it seems like there should be something better. Especially because I will have to so a bunch of CSS to line them all up and make them functionable.
Final result:
CSS
img{
float:left;
clear:left;
}
span{
clear:right;
float:right;
}
HTML
<ul>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
</ul>
I would keep just one list with the images and values in the same list item, ie:
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
This way the value will always be alongside the image, and can be styled directly using the span.
A table shouldn't be used for this. If the above method is unsuitable I can write you some jquery to line up two lists, but it would be much neater to use the above method imo.
Use the table. It is simpler to understand and maintain. Makes it easier to vertically align items if you images are of varing heights.
So long story short, for ages, ive been using some CSS reset on my projects.
i was trying to make a regular sitemap page(you know with links in an unordered list) and when i do this (code below)
<div id="smap">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Products
<ul>
<li>Cantaloupes</li>
<li>Watermelons</li>
<li>HoneyDews</li>
</ul>
</li>
<li>Sales Team</li>
<li>Contact / Directions</li>
<li>Growers</li>
<li>Packers</li>
<li>Shippers</li>
<li>Importers</li>
<li>Distributors</li>
</ul>
</div>
The list comes out but the products sub-items are not indented.
In the CSS reset, the line that's doing this is
vertical-align: baseline;
When i removed it,although it restored the indentation on my sitemap list, it messed up my menus throughout the site.
i want to target that lists specifically so, choosing that lists parent div which is "smap"
What im wondering is, by default, what is a lists vertical alignment value??
like for example, if i do this
#smap ul, li {vertical-alignment: SOMETHING; }
what is the default value for a list to be indented?
Thanks in advanced.
If you want to revert to the default value for any property after a reset, then you should use the value initial - you might want to read this article for more on it.
However, the ul indentation is given by the padding-left of the ul - see http://dabblet.com/gist/3144582. I think vertical-align shouldn't influence that.