If I want to link to a place within the same* page. I've seen that should do like this:
Link Text Here
But what if I have several divs with the same id? Is there way to distinguish other than using the id of the div?
I generate the xhtml code from Java and to match the generic css file (that will not be generated) I use "generic" divs for some cases. Of course I could generate a dummy div with no style attributes but with a unique id and wrap that one around the area of interest. I'm however curious if it could be done in a better way?
The id attribute is optional. However according to w3schools if an element has an id attribute then the id value must be unique. Source: http://www.w3schools.com/tags/att_global_id.asp.
ID Naming rules:
Must contain at least one character
Must not contain any space characters In HTML
all values are case-insensitive
And from what I have learned from experience and html validation it must not start with a number but nobody told me that...
Related
I understand the purpose of the title and alt attributes, but I just do not understand if I can use the same title and alt on one element.
The title attribute is a global attribute, which means that you can use it on all elements. It represents advisory information. You can not relay on it.
The alt attribute can only be used on some element. For the img element it a fallback, if you can not see the image for some reasons.
Someone told me, it causes an accesibility error, if you use the same text string for the title attribute and the alt attribute on one element (edit: if the element is an image). Is this correct? I cant find this rule any where.
Now as we are talking about the title attribute and the alt attribute we must be talking about images.
Where the problem lies is that screen readers may read the title and the alt description together.
It isn't a rule directly, but this goes against best practice as you are introducing unnecessary noise / repetition.
If you want to add additional information to an element then that is what figcaption etc. are for. Don't use the title attribute.
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
{{expression}}
Let us assume the output it will give is
"ABC-DEF,HIJ-KLM"
Now I wanted to have values after and before "-" to have different colors.
Since it is coming from an expression I don't know how to proceed. I tried building pipes for formatting but it did not work.I am not allowed to split JSON
and populate and style the divs separately.
You can't set css on expression because it is not an html element. If you want to split at '-' and set different color to each part you need to put the parts in two elements (like span or div) and set css on the elements.
The page I'm trying to automate has n same buttons at different levels. These n buttons have same attributes. Lets say, if I want to click on the second, how could I do that using webdriver and CSS, thanks.
say for example that unique attribute is class='custom_button' you can use
List <WebElement> custButtons = driver.findElements(By.className("custom_button"));
custButtons.get(2).click();
this will click on the third button with classname 'custom_button' on the page.
Prashant Shukla has the right answer.
Anyway, if you wanted to do it on a single line with a single command:
I am not aware of a way how to do it with a single CSS selector (even pseudo selectors like :nth-child() don't allow it). But somebody may know the answer. What I can propose is an XPath selector. The trick is to use the descendant axis.
For example, if you wanted to select the second <a class='post-tag'> element on the page (which happens to be the webdriver tag on this page :) ) regardless of anything else, you'd do:
driver.findElement(By.xpath("/descendant::a[#class='post-tag'][2]"));
I am trying to be semantically correct here in my web pages, but not sure how to proceed:
My data looks like this or needs to:
Name: lastname, first mi Address: 123 Main St. City, State, Zip: more...
Fieldx: data1 Fieldy: more data...
What I dont' want is the regular table data look with column headers across the top:
name Address
lastname, first mi Some address...
I'm not sure what to look up to do this. When i looked up tableless CSS, I only find forms and layouts.
Am I wrong here to thing I should be using the form layouts with CSS (and no tables)...it's just not a "form"?
edit: do I just put everything inside a div and then in spans with float right?
I think DIVs are the way to go. DIVs give you much better flexibility when combined with CSS.
What you have is structurally a list of name/value pairs, which corresponds to a two-column table. It could also be marked up as a dl element, if we take the liberal modern interpretation that dl is not really a definition list but a description list, which in turn is effectively a list of name/value pairs. And it could also be marked up as a ul element where each li element contains two span elements (with classes), but then you lose the array-like idea in the structure. Finally, you could use some div or p container, containing span elements with alternating classes.
All of this has little to do with semantics (meaning). Rather, it is about structure. Instead of considering which of the approaches is more “correct”, consider which is most comfortable in styling (and possibly in processing, e.g. in client-side scripting). If you want tabular layout, using a table is natural. (Somewhat amusingly, if you don’t want such layout, then you probably should not use a table, because old versions of IE don’t let you style a table element in a non-tabular way.)
If you intend to have the data as inline text as in your example, then I would use
<div class=foo>
<span class=name>Name</span> <span class=value>lastname, first mi</span>
<span class=name>Address</span> <span class=value>123 Main St. </span>
...
</div>
This is a bit verbose markup, but it can be styled easily, since div and span have no default styling (except that div implies line breaks before and after), and you can conveniently use class selectors.