So I am trying to add some web links but I want them positioned underneath my p element. As of right now I currently have my href elements in line with my p element. So here is my current code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
Hold My Hand
Lean on Me
</p>
</div>
</div>
</div>
You have your anchor tags wrapped inside a p tag. Either place it outside the p tag or add a span to the text and make it 100% wide (using bootstrap class) .
Wrap your p tag text with span tag
Since you are using bootstrap you can use the class col-xs-12
<span class='col-xs-12'>Here are a few links which may provide some insight to Lisa: </span>
if you want to position your links under the text that you write you have many ways to do it...
you can use this tags '<div>', '<br>', '<ul>' like below
Solution one (using div tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<div>Hold My Hand</div>
<div>Lean on Me</div></p>
</div>
</div>
</div>
Solution two (using ul and li tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<ul>
<li>
Hold My Hand
</li>
<li>
Lean on Me
</li>
<ul>
</p>
</ul>
</div>
</div>
</div>
Solution three (using br tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
</br>
Hold My Hand
</br>
Lean on Me
</p>
</ul>
</div>
</div>
</div>
Move the closing tag, </p>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa: </p>
Hold My Hand
Lean on Me
</div>
</div>
</div>
Related
I'm using twitter-bootstrap grid system and you can see the problem right here.
The text which is supposed to be in the center keeps outgoing from the center to right side as you can see...
<div class="row mt-2">
<div class="col-3"></div>
<div class="col-6">
<div class="text-left">
<p class="d-0">
<span id="issuer_msg" style="white-space: pre-line">{{msg.message}}</span>
<br>
</p>
<div class="text-center">
<small class="text-primary font-weight-normal">{{msg.sent_time}}</small>
</div>
</div>
</div>
</div>
How can I fix the problem?
The problem is from your inline styles where you used "white-space:pre-line"
Try using "white-space:pre-wrap" instead
I think the problem is coming from your small tags. Wrap paragraph around it.
I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>
So, what I am trying to do, is put a div inside a div. The text editor reads the second div's end as the first one's.
This kind of stumped me, so I haven't really tried anything else
<div id="navbar">
</div>
<div id="else">
<div>
</div>
<div id="project1">
</div>
</div>
The last div should go with the first one.
<div id="navbar">
<div id="outer">
<div id="innerOne">
</div>
<div id="innerTwo">
</div>
</div>
</div>
Be sure to make good use of indenting and spacing if you want to make things easier on yourself!
If you notice in your code when you declare the first div you immediately close it again and start a new one, every other div wants to be nested inside it.
<div id="navbar">
A Div on it's own
</div>
<div id="else">
A new div on the same 'level' as the last
<div>
a Child of the else div
</div>
<div id="project1">
second Child of the else div
</div>
end of else
</div>
Figuring the nesting is easier when you:
Indent the code, and
Add comments to track the (matching) closing tags
<div id='navbar'> // open navbar
<div id='else'>
</div> //end else
<div id='project1'>
</div> //end project1
</div> //end navbar
(my code block thing is being buggy, but I hope you understand what I was saying...)
In HTML after most opening tag should come the content and then the closing tag
in your case ...
There are self-closing tags also, which don't need a closing one for example: <img src="">
Your code is wrong, because after the <div id="else"> you have another div opening tag, but there should be a closing tag before it, like this:
<div id="navbar">
</div>
<div id="else">
</div>
<div id="project1">
</div>
Nesting divs should look like this:
<div id="navbar></div>
<div id="else">
<div id="project1"></div>
</div>
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 have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]