I have a div that contains an image and some text, and has a background-color. However, when it renders on chrome and firefox, the background-color is out of position and the div content is in the correct position, but it works fine in IE8, I just can't fathom what might be causing this, it's a royal pain there I tell u...
<div style="width:800px;margin-left:auto;margin-right:auto;background-color:yellow;">
<div style="height:30px;">
</div>
<div style="width:400px;height:150px;">
<div style="float:left;padding:none;padding-top:40px;padding-left:30px;">
<img src="warning.jpg" style="float:left;"/>
</div>
<div style="width:300px;float:left;padding-left:10px;padding-right:10px;">
<h6 style="font-family:Palatino Linotype;font-size:12px;">
Do not give your personal information to anyone you have not met over the internet or phone, or send money to anyone without verifying what you are paying for. lokalboard.com will not be responsible for any loss on third party transactions made between its users.
</h6>
</div>
</div>
</div>
Related
I'm using NVDA screen reader to read the content of the page, but unfortunately it does not work as intended. Screen reader does not read the full page (i.e. it doesnt read the labels). All the contents are in .twig file.
Here's the jsFiddle and a snippet.
JSFiddle: https://jsfiddle.net/juvysx6z/
<div class="buttons-block block-index">
<h3>NVDA doesnt read this header</h3>
<h6>This one as well</h6>
</div>
It seems a bit weird, because some parts of the page are just omitted, another example here:
<div class="row">
<div class="large-8 columns">
<section>
<header class="clean">
<h2 style="color: #004E9D">Does not read it</h2>
</header>
</section>
</div>
</div>
Could anybody help me with this one? The worst thing is that I don't know where to find reason why it's not working. I'm totally stuck.
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
the images are saved .jpg.
A background image works, even though it isnt the image i want.
Also two more images further down the site do not show either.
Everything works fine locally.
thanks.
<div id="container">
<div id="services" class="row">
<div id="Srvc" class="col-md-6">
<img class="imgCircle" src="assests/images/front-sun.jpg" alt="Finished Lawn">
<h3>Landscape Design and Maintenance</h3>
<p>generic para..Never worry about your front or backyard looking as beautiful as the first day it was installed when is in charge of your yard care and maintenance. Get a free yard care estimate today</p>
</div>
<div id="Srvc" class="col-md-6">
<img class="imgCircle" src="assests/images/wall.jpg" alt="Retaining Wall">
<h3>Masonry Solutions</h3>
<p> generic para...Never worry about your front or backyard looking as beautiful as the first day it was installed when is in charge of your yard care and maintenance. Get a free yard care estimate today</p>
</div>
</div>
I am trying to format a news-feed item and want to include a glyphicon to illustrate the type of news item and then a user defined text field next to it. I would like to have the text formatted such that it is indented about four spaces from the glyphicon (Second news feed item in the JSFiddle where I hardcoded it in a non-reproducible way).
I made a layout where the glyphicon was in a col-xs-1 and the rest of the screen was for the text and then zeroed out all the padding but it still too far to the right for what I would like (Third news feed item in the JSFiddle).
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<h3><span class="glyphicon glyphicon-earphone"></span>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider-yellow"></div>
<div class="col-xs-12 news-feed-item-container">
<h3 style="white-space:pre"><span class="glyphicon glyphicon-earphone"></span> New conversation with Brett Harrsion from Firm XYZ shows there<br> is progress being made towards the product approval</h3>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at Firm XYZ that lead us to believe we will be able to sell product A to them sometime in early March</p>
</div>
<div class="col-xs-12 news-feed-divider"></div>
<div class="col-xs-12 news-feed-item-container" style="background-color:white">
<div class="col-xs-1" style="padding-right:0">
<h3><span class="glyphicon glyphicon-earphone"></span></h3></div>
<div class="col-xs-11" style="padding-left:0">
<h3>New conversation with Brett Harrsion from Firm XYZ shows there is progress being made towards the product approval</h3></div>
<p class="col-xs-11 col-xs-offset-1">There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March</p>
</div>
JSFiddle:
https://jsfiddle.net/schins02/r0p83uaq/
Image of feed items with styles applied =>
http://imgur.com/a/XTERt
This seems a bit picky so thanks for any help provided!
Given your needs, I would not recommend relying on .col-*-* for your positioning. Your needs are simply below what Bootstrap's Grid framework is designed for.
Instead, I would rely on wrappers with .pull-left and .pull-right to position your icon and content. I've created an example here:
http://www.bootply.com/LwfLZZ2exY
Note: My example makes use of calc() because I wasn't sure how responsive your design approach needed. You may need to adjust this (and of course any other element) to best-suit your intentions.
Having had some very basic HTML involvement in a previous website I was involved with, I am learning HTML and CSS in an effort to be able to do more work on my new website.
Currently I have a static image of a Youtube video, with a link that opens up a fullscreen player on a new page, but I'd like to replace that static image with an embedded Youtube player to play the video on my webpage.
There are a few places on the webpage (http://www.johnpearsesafaris.com/page-news-ls.html#) this method is used, but I am trying initially to just make the change to the uppermost image of the falcon with wings splayed, under the title 'How Did they ever film this?"
I initially went to the youtube site that explains the various embed player options they have and decided to go with the iframe one, as i have used iframes elsewhere before.
On my first attempt, I managed to get the player to embed itself and the video to play, but unfortunately it screwed up the rest of the formatting on the page. The static images for all the others News posts below it disappeared and the formatting of the rest of the page went out of whack.
=I then looked at a number of different guidelines on how to do it, and have spent a number of hours trying to rectify the situation, but I can't seem to overcome the break in formatting.
What I did was replace the HTML between rows 166 and 185 with the following HTML:
<div class="row">
<div class="loop-posts eight columns">
<div id="div3" class="post-CLASS blog-post-item b30">
<div class="post-heading">
<h2 class="blog-title"><a
href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a> </h2>
<div class="blog-meta"> <span class="blog-date">FEB
2014 <span class="blog-author"><span>
By </span><a class="blog-author-tooltip" rel="tooltip" data-original-title="View all posts by TheEditor" href="#">The
Editor</a>
</span>
</span>
</div>
</div>
<div class="blog-thumb-wrapper">
<iframe src="//www.youtube.com/embed/XBEyCr5AoIs" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>
I am hoping that it's a simple oversight on my part. What is really confusing me is the div classes.
I confess I don't know enough about them but have been watching multiple instructional videos and using various other sources in a desperate effort to get up to speed.
I would really appreciate any help / guidance anyone could give me in helping me resolve the matter. I will continue to try to fix it on my own in the meantime.
Replace with this:
<div class="row">
<div class="loop-posts eight columns">
<div class="post-CLASS blog-post-item b30" id="div3">
<div class="post-heading">
<h2 class="blog-title"><a href=
"https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a></h2>
<div class="blog-meta">
<span class="blog-date">FEB 2014 <span class=
"blog-author">By <a class=
"blog-author-tooltip" data-original-title=
"View all posts by TheEditor" href="#" rel=
"tooltip">The Editor</a></span></span>
</div>
</div>
<div>
<iframe frameborder="0" height="360" src=
"//www.youtube.com/embed/XBEyCr5AoIs" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>