I have two anchor tags that are not clickable for some reason. One link should open up so clients can send me an email to my email address. The other link should open up a phone or app so clients can contact me via phone.
I cannot figure out why only these two links are not working. I am using a bootstrap template so maybe there is something in this section (jquery?) that is preventing the links from working as they normally would. The icons in the unordered list in the same section don't seem to have this issue.
<section class="ftco-section about-section">
<div class="container">
<div class="row d-flex" data-scrollax-parent="true">
<div class="col-md-4 author-img" style="background-image: url(images/author-1.jpg);" data-scrollax=" properties: { translateY: '-70%'}"></div>
<div class="col-md-2"></div>
<div class="col-md-6 wrap ftco-animate">
<div class="about-desc">
<h1 class="bold-text">About</h1>
<div class="p-5">
<h2 class="mb-5">Hi! I'm Matthew Mullins</h2>
<p>I thrive working on large, commercial, information heavy site designs. I have an emphasis on ease of use & simplicity. My idea of great visual design: when it enhances the user experience, & doesn't get in the way.</p>
<ul class="ftco-footer-social list-unstyled mt-4">
<li><span class="icon-behance"></span></li>
<li><span class="icon-dribbble"></span></li>
<li><span class="icon-instagram"></span></li>
<li><span class="icon-google"></span></li>
</ul>
<p>Email: example#gmail.com</p>
<p>Phone: (442)-224-4005</p>
</div>
</div>
</div>
</div>
</div>
</section>
I was expecting the links to open up to their respective locations. Instead, the text is blue but the mouse does not indicate there is a link underneath.
Posting my comment as an answer:
Seems to be something with the CSS on your links, as it works in the example you gave. Try setting cursor: pointer; on those links, which should show that they are clickable links.
Something in your Bootstrap or other styles must have been overriding the default cursor as pointer on link elements.
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
I'm currently building my first website in bootstrap 4, and I have some general questions to either which I can't find a good response to or want to know how to handle something... Here it goes:
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us # (888) 888-8888 | info#email.com | Customer Portal </div> -->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
I'd love hear some feedback on the approach I am taking to building this based on the code above. Am I headed in the correct direction here? Anything you would do different?
Thank you.
Please use below link to read about Grid System Rules.
Visit https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
After reading the rules you can get started with building your own Html pages using examples given in below link
https://getbootstrap.com/docs/4.0/examples/
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
It depends on you. You can use .container and .container-fluid according to your needs. But you can not use in the order shown .container > .row > .column > .container-fluid.
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right-align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
Yes it'll be aligning right on medium devices only. If you want it for other devices just use .text-right
For reference go through this link https://getbootstrap.com/docs/4.0/layout/grid/
We want to add support for people with disabilities. So I read about it over the internet but did not get too much from there. I am not understanding when to use aria and when to use role attributes.
I have simple HTML with 3 columns. I have used role attributes in that and wanted to know what more can be done on this HTML for accessibility. Like if we want to use aria-labelledby and aria-describedby.
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="service"></i>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="tech"></i>
<h2>Partner 2</h2>
<p>Partner 2 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="content"></i>
<h2 class="text-lg text-black text-ellipsis">Partner 3</h2>
<p>Partner 3 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Two things immediately stand out that could be improved:
1) You're using what appears to be a font-icon that seems to have meaning that has no text alternative:
<i class="service"></i>
You can provide this with an aria-label property. In addition, I'd recommend using a span instead if <1>:
<span class="service" aria-label="service"></span>
2) The text in your links is repetitive and has no specific information about the link destination. Screen reader users often scan the links to get a feel for the page content and without the surrounding content this will be less useful that it could be ("learn more", "learn more", "learn more")
Learn More
I'd recommend adding specific information in the linked text rather than the generic "learn more":
Learn More about partner 1
Modified markup for one section:
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<span class="service" aria-label="service"></span>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More about Partner 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This code snippet is already accessible. Most plain HTML doesn't need additional ARIA support. Text-to-speech software will just read through it in order, and keyboards can Tab to the links and press Enter to click them. ARIA is for when you have interactive widgets like tabs or calendars.
Role attributes are part of the ARIA specification. You don't need to make up values to describe your content, they should only be used from this list if they apply to what you're making.
You might also find this introduction to web accessibility article and the other resources on that website useful in learning more about it.
As stringy already pointed out, the code is already accessible. If you aren't using JavaScript to create UI elements, there is usually no need for WAI-ARIA roles or attributes.
I have just two comments about your code:
Why do you use a div around Learn More instead of a p? Screen readers can move between paragraphs, but div elements are meaningless, as far as I know.
If the partner descriptions are meant to look like a table, and especially if there will be regular row or column headers, you should use table markup instead of CSS-styled div elements. Regular table markup makes sense to a screen reader; styling div elements to look like a table results in a meaningless (i.e. from the point of view of a browser or a screen reader) code jumble.
I need to fix 3 <div>s in the center of my webpage. I tried to use margin: 0 auto; but it doesn't work, even using Bootstrap's grid. It's complicated because whatever I'll do the 3 <div>s don't fix exactly in the middle. It most to goes 3 buttons, and every button has a paragraph below.
<section class="contenedor">
<nav>
<ul><div class="contenedor">
<li class="col-md-3"><img src="imagenes/icono-1.png" alt="responsive" class="center-block">
<p class="boton-textT">
RESPONSIVE</p>
<p class="boton-textT">WEB DESIGN</p>
<p class="boton-text col-md-12 ">
We create scalable Internet services.
The architecture of the content and
presentation is adapted to the screen
size and device type. We create
Responsive Web Design.
</p></li>
<li class="boton2 col-md-3"><img src="imagenes/icono-2.png" alt="mobile" class="center-block">
<p class="boton-textT">
MOBILE</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We design the user interfaces
of mobile applications. We know the
iPhone users' needs as well as Metro
system's requirements. Developers
respect quality and organization
of our work, clients love it.
</p></li>
<li class="boton3 col-md-3"><img src="imagenes/icono-3.png" alt="web" class="center-block">
<p class="boton-textT">
WEB</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We are building UI for web
applications. We understand both:
the strength of trends
and technology constraints. At the
end of the day the user is still the
most important.
</p></li>
</div>
</ul>
</nav>
</section>
1. Your mark up is wrong
You wrapped the lis with div.contenedor this is not a standard practice. Please remove it.
2. Need a better understand bootstrap's grid system.
It's divided into 12 basically. If you want to put 3 items on a row and want them to be well-aligned horizontally, you need to use col-**-4, not -3 there.
Reading this http://getbootstrap.com/css/#grid will help you understand it better.
I editted some of your code here - http://jsfiddle.net/fktkeu9r/
Grids are based on 12:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
As pointed out, the code needs to be cleaned up and validated.
You'll want to edit your CSS to something like:
.contenedor
{
margin-left: auto;
margin-right: auto;
width: 80%;
}
As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>