Here is my first project (I'm not a web dev, it's an example).
https://codepen.io/Ziratsu/pen/EWyoLN
I've put anchors in my Header, for the different parts of my portfolio, but they aren't working when I click on them..
I've put the correct "ID", I don't know why this don't work.
<button class="btn" id="Bouton1" type="button">About</button>
And here is the reference of my anchor, with the same ID.
<p id="textb"> Front-End Developer and UX/UI designer,</br> with practical experience in project management, branding strategy,</br> and creative direction; devoted to functional programming and information architecture.</br>Web Developer - User Experience Designer - Graphic Artist</p> </div>
Thank's if you take time to reply!
Try to use a anchor tag instead of a button:
<a class="btn btn-primary" href="#textb">About</a>
You can use the btn class to make it look like a button if you're using bootstrap, which I asumed because of the btn class.
Try removing the button element:
About
Just design the a if you want to make it have a button-like appearance
Related
How can I use three different classes for the same element? Does it matter that two of them share the same parent class? I've got a typeform link that uses some functionality, so it's got a typeform class. But I'd like to also make it .button.white and/or .button.transparent
I'm currently trying things like:
<a class="typeform-share button white button transparent">
<a class="typeform-share" class="button white" class="button transparent>
Update: I misunderstood how classes work in css. Now I've discovered another problem - will create a new question. Thank you all!
This syntax of html markup is invalid:
<a class="typeform-share" class="button white" class="button transparent">
You cannot use multiple attributes with same name. If you use the browser will use it the first declared one ie. the above will be:
<a class="typeform-share">
To use multiple classes just use space separated values like in your previous markup. But you don't really need to put the same class multiple times:
<a class="typeform-share button white button transparent">
<!--Remove one of the button class, you don't need to repeat-->
Here's a link for how to work with multiple classes from CSS Tricks which will make your life easier.
I am getting H2 violation for below anchor tags.
It says 'H2: Combining adjacent image and text links for the same resource'
<div class="selected-label ccyImage">
</div>
<a href="javascript:void(0);" class="btn dropdown-html-toggle" tabindex="-1">
<span class="caret"></span>
</a>
But there is no any image used. Not getting how to resolve it.
So you have some unspecified tool which is detecting an accessibility problem which is different to the accessibility problem you actually have (or it is being really smart and noticing that you are expressing content using background images … don't do that).
There's not much you can do about the misidentification of the problem other than to report a bug to whomever makes the tool.
You can make your HTML more accessible by:
Not using links when you aren't linking somewhere. If you're using href="javascript:void(0);" then you're doing something wrong.
Link to somewhere useful and progressively enhance or
Use a button (not a link) if you can't make it work without JS
Putting content in your links (or buttons). There is no text at all there to give any clue to the user what the interactive element is going to do.
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
In html5 can I use <button> outside the <form>, like this:
<body>
<form action="page.html" method="get" id="myForm">
...
</form>
<button type="submit" form="myForm" value="Submit">Send</button>
</body>
But I do not want to use the form, only the <button>, because my project is all done with Javascript/Ajax
I wanted to make a "noscript-friendly" design, but it is a closed intranet and for a company project and do not have much time for this.
Use <button> without <form> is semantic?
<body>
<div>
<button type="button">test</button>
</div>
</body>
Or would be better to continue to use <a href="javascript:void(0)">?
Note: Remember not all valid code by W3 is a semantic code
Your use of the button element is appropriate.
That’s why there is the Button state in the first place. The HTML5 spec also shows an example, very similar to your use case:
The following button is labeled "Show hint" and pops up a dialog box when activated:
<button type=button
onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
Show hint
</button>
Note: Your question has nothing to do with the Semantic Web. There is a difference between "semantic (markup)" and "Semantic Web".
Your use of the button element is "semantic" in the sense that you are using it correctly according to the HTML5 specification, and that there is no other element defined which would be more appropriate.
You might want to use the a element in cases where you are navigating to another resource (no matter how it’s implemented technically). For apps, the difference is sometimes not very clear. A rule of thumb: if the URL changes (could users want to bookmark/share it?) and/or you could use a link type (even only theoretically), it’s likely that you should use a instead of button. But as this is a different question, please take it just as a side note.
I'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here