I want to place the text below the image.But when i add a paragraph, it is set behind the image. How to fix this please ???
<div style="width:96%;"><img src="../Images/2.jpg" height="640" style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 700px; float: left; z-index: 0;"/></div>
<div><p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p><</div>
You positioned the picture absolute, thats why it is in a layer above the text.
simply drop the style and the text follows vertically after the block element div.
body{
margin:0;
}
<div style="width:96%;">
<img src="http://i.imgur.com/0nJG7lN.png" />
</div>
<p>Vision defines the optimal desired future state and the conceptual image of what an organization wants to achieve over time. It provides guidance and inspiration to what an organization is focused on achieving in some time. It is written briefly in an inspirational manner that makes it easy for all employees to repeat it at any given time. “All Sri Lankans seamlessly connected with world-class information, communication and entertainment services" is the vision of SLT.</p>
Since the DIV is positioned absolute
place the <p> tag inside that DIV right after the <img> tag.
Hope it will work.
Related
I am trying to put text on this webpage http://www.freethemind.biz/
Where it says On a physical level, meditation: and everything listed as benefits
AND
On a mental level, meditation: and everything listed as benefits
side by side, almost like a table
I have tried
float:left and float:right in CSS
Code below:
h12{float:left;}
h13{float:right;}
But it does not work! I am very new to web page creation and all, so any direction is appreciated!
I also tried wrapping the text to be put side to side in tags <h12> and <h13> if it makes it any easier (didn't for me =[ )
Without modifying your HTML, you can achieve this with the following CSS:
h12, h13 {
float: left;
width: 50%;
}
Note that heading tags only go up to h6! h12 and h13 are not standard tags, and will be unsupported in many browsers. As such, you should look into using <div> tags instead, and apply a unique class to separate out this behaviour to only a few, specific elements.
.floating {
float: left;
width: 50%;
}
<div class="floating">
<strong>On a physical level...</strong>
<p>Paragraph</p>
</div>
<div class="floating">
<strong>On a mental level...</strong>
<p>Paragraph</p>
</div>
Hope this helps! :)
First of all, h12 and h13 are non-existing HTML tags and thus invalid.
The following however works:
<div>
<div style="float:left;width:50%">
<strong>On a physical level, meditation:</strong><p></p>
<p>· Lowers high blood pressure</p>
<p>· Lowers the levels of blood lactate, reducing anxiety attacks</p>
<p>· Decreases tension-related ailments such as headaches, insomnia, and muscle & joint pain</p>
<p>· Increases serotonin production that improves mood and behavior</p>
</div>
<div style="float:right;width:50%"><strong>On a mental level, meditation:</strong><p></p>
<p>· Helps decrease anxiety</p>
<p>· Leads to a calmer mind which in turn results in more concentration and clarity</p>
<p>· Improves emotional stability</p>
<p>· Increases creativity and Develops Intuition</p>
</div>
</div>
It is also a better practice to use <ul></ul> or <ol></ol> to make lists instead of using <p></p>.
All you have to do is wrap your 2 DIVs in another DIV.
You should consider cleaning up your markup though. Take a look at "HTML Document Outline".
Teasers: block-level links or not?
Say you want to display a teaser inviting you to go see some more in-depth article on a new page. You can use a card component (image + title + short intro) to achieve that, and two solutions are then available to you:
Implement it the simple way: links are wrapping the image and the title. You could even have a "Read More" link at the bottom of the teaser.
Implement a block-level link: wrap the whole teaser inside a single link.
The two solutions are possible since forever (HTML5 Doctor article by Bruce Lawson) and should not cause too much problem for screen reader users. Heydon Pickering also mentions block-level links in his book « Inclusive Design Patterns » and recommends not having too long text content inside a block-level link.
Accessibility issues
On a project I'm currently working on, I got a report from a screen reader user saying something a bit more nuanced. It is confusing for him to navigate across a group of block-level teasers, because everything is a link and it's therefore not clear what is the underlying action. Plus the screen reader keeps repeating you are inside a link.
When I tested with VoiceOver, the whole content of a block-level link is read, without any indication if it is reading a heading, an image or a paragraph. You have to willingly go inside the link to better understand. Maybe a aria-labelledby linked to the title could be useful.
A link in absolute over the teaser
I came up with a solution that seems a bit dirty but should work on all cases with a link with position: absolute over the whole teaser. This implementation is actually the exact combination of the two solutions for a nice block-level linked teaser.
The absolute link is over the block and makes the teaser behave exactly the same way as a block-level link. For a screen reader user, links could also be added to the image+title and the absolute link contains a proper call to action text for screen readers only that will be read after the rest of the teaser content.
Another benefit of this implementation is the possibility to have other links inside the teaser and position them with a higher z-index over the link. This can be useful for the date/author/category for example.
My question is: is this solution – compared to block-level links or the simple teaser with multiple links – a good idea in terms of a11y, UX and general code quality?
Here is the teaser I'm talking about (see on Codepen):
.card-link-absolute {
transition: all 0.2s;
width: 20em;
margin: 30px;
}
.card-link-absolute:hover {
color: #014c8c;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.card-link-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.card-link-foreground {
position: relative;
z-index: 10;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<article class="card card-link-absolute">
<img class="card-img-top" src="http://placehold.it/318x180" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Link in absolute</h4>
<p class="card-text">The text is here and can be quite long</p>
<p class="card-text">
<a class="btn btn-success btn-sm card-link-foreground" href="http://antistatique.net">Other link</a>
</p>
<span class="sr-only">Read more about Card title</span>
</div>
</article>
My thoughts on the subject are : You can perfectly use the first solution (not wrapping everything inside a link) if this give a best screenreader experience. Then if you want to give mouse users another experience, you can use the javascript onclick event on the wrapper element with the "this-is-clickable" mouse pointer. As long as the same action can be performed using keyboard, nothing says that the links must be the same. This is nearly equivalent to your position: absolute solution, but easier to implement.
But I would have a reserve on that being really accessible. If it does not look like a link but behave like a link, it could be perturbing.
I would also say that if there are links inside which point to other destinations, it will be confusing for some people (with this implementation not specifically for screen reader users).
I have an image and I want to add the title of it and a basic description of it, to the right of the image. I tried using position: relative, absolute. padding & margin: 0px.
The link is: URL
The game "Rock, Paper, Scissors", and "Miji", game titles should be on the top of the image to the right, then under that I will add the game description.
Thanks!
Hello As per my understanding your trying for something like this below
https://jsfiddle.net/up1v5j0z/28/
<ul>
<li><div class="content"><img src="http://i.stack.imgur.com/FZVih.jpg?s=328&g=1" height="200px";><h4>Roshan Padole </h4><p>Senior Software Engineer and DigitalMarketing Experts</br>Management of the manpower with effective positive results. </p></div><br style="clear:both"></li>
</ul>
.content img {float:left}
[https://jsfiddle.net/up1v5j0z/28/][1]
Hope this will help you
A simple way for playing items on your page without having to mess around with specific margining and padding (which can get messy on busy pages) is by choosing your position (relative, absolute, etc) and then use left, right, and top to move it around the page.
For example
.exampleClass {
position: relative;
left: 20px;
top: 5px;
}
Play around with the numbers and position type until you have a good understanding about how they effect the items and you should have no problem tweaking the placement of the objects on your page.
<img src="Games/RPS.jpg" width="15%" height="15%" alt="Rock, Paper, Scissors">
Take these two tags first
<span id="gameTitle">Rock, Paper, Scissors, Shoot</span>
Alternate these positions two tags!
<span id="gameTitle" style=" float: left;">Rock, Paper, Scissors, Shoot</span>
Style the span to style="float: left";
Add <br/>between these <a href.... and <span id=....
Your output will be then http://myslambook.pe.hu/demo.png
I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?
<div class="moreinfo" id="darkgray">
<p>
Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
</p>
</div>
<div class="moreinfo" id="lightgray">
<h2>
"WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE & OFFLINE."
READ ARTICLE BY WIRED SAFETY
</h2>
</div>
<div class="clear"></div>
css
.moreinfo{
width:715px;
height:250px;
float:left;
color:white;
}
You can use display: inline-block to have them side by side.
Here is an example: http://jsfiddle.net/2sZCb/
.moreinfo {
display: inline-block;
}
Here is a good article on the same issue you're having:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
the best way i noticed was to use percent 50% for the width of both
the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):
.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
the best solution is using display:table and display:table-cell for being sure that they are side by side
Set the containing element to a width large enough to contain both the way you want.
body {
min-width: 1450px;
}
Here's a fiddle
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />