Hi I have a page that I am working on, which takes articles from a database. the results are split using php and show six articles per page. The problem i have is that if there are seven results and we roll into page 2, then everything thing is fine as can be seen under the timepieces menu button.
If however there are less than 6 articles and only one page the first article goes funny and the text drops below the image as can be seen under the private aviation button.
A link to the website is here : http://goo.gl/N8p8CT
Both items appear to be within the article.row.mid and so i am struggling to work out why.
Cause first article has image wrapped into <a></a> tag, but second article hasn't, these two images are rendered by different css rules.
and
first one is styled by botstrap.css rules, 2-nd is by your own stylesheet.
Anyway if you use bootstrap, then it's better to wrap image of article into a div for better alignment using bootstrap grid.
I'd do:
<article class="row mid">
<div class="col-xs-4">
<a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
<img src="admin/images/private_jet_hanger-1413201025.jpg" alt="post1" height="250px" width="250px">
</a>
</div>
<div class="col-xs-8 info"><a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
</a><h1>Jet Partner launches empty leg service...</h1>
<p class="details"></p>
<p class="tags"></p>
<p class="text">
</p><p>The advantages associated with private jet travel are invaluable: the ability to journey in comfort, security and privacy; to arrive at the airport just 15 minutes before take-off and to completely avoid check-in. Now, the advent of groundbreaking </p>
Read More <ul class="counters list-inline">
</ul>
</div>
</article>
Related
I'm using a gatsby html5up template, and I'm attempting to fix an issue with the block posts not stacking properly. Depending on the screen size, there are gaps because of the different lengths of text each post has. I'm only guessing this is the reason, because I went through and made all the images the same size. I've tried making each of the paragraphs the same height, but that didn't fix it. What do I need to do to fix it so that it won't leave gaps?
My gallery code:
<article className="6u 12u$(xsmall) work-item" key={i}>
<div className="articleDiv">
<a
className="image fit thumb"
href={obj.source}
onClick={e => {
e.preventDefault();
this.toggleLightbox(i);
}}
>
<img src={obj.thumbnail} />
</a>
<h3>{obj.caption}</h3>
<p>{obj.description}</p>
</div>
</article>
Here's the html of the page for one of the posts:
<article class="6u 12u$(xsmall) work-item">
<div class="articleDiv">
<a class="image fit thumb" href="/static/15Fullsize-95788b0c2a3cd7f5b7be5197b162af0b.jpeg"><img src="/static/15Thumbnail-3f93874146f2072572920b9eb793a1cf.jpeg"></a>
<h3>2005 Chevrolet Equinox LT AWD</h3>
<p>Local vehicle with heated leather, moonroof, and lots more. Completely checked out, serviced, and inspected. Only $4,995. Gets around on the ice fantastic.</p>
</div>
</article>
Here is a screenshot in developer to show the way the articles do not match up.
This library for layout probably uses CSS float to build a grid, and you probably have to use clearfix somewhere.
If that is true, the space below the card appears because that card is higher than others (we can see that text has three lines while other cards have two lines).
I'm trying to reuse HTML from a previous page and write new content on a new page while still retaining the home button and footer for a portfolio. I copied over the HTML containing my home button and footer and used the same stylesheet. But upon opening up a new page with (mostly) the same content sans the hero and work section, the elements on my page look shifted over slightly to the right.
When I add the content from the landing page onto the new page, this problem goes away and the elements are flushed to the left like I want them. However, when I put in any content that does not contain the hero and work section from the landing page, the problem persists.
I've tried looking into not using margin and instead using positioning but am confused if this is the right direction I should go. I'll add the codepens to compare the two. Hopefully the difference is visible, as I really want to work on the actual content of my portfolio. I appreciate any advice.
My landing page:
<div class="container">
<header>
<h1 class="logo">Ryan M</h1>
</header>
<section class="hero">
<p>Hi, I'm Ryan!</p>
<p>
I'm a recent graduate from UC San Diego, where I received a B.S. in
Human-Computer Interaction. I am currently looking for work so feel
free to send me an email!!
</p>
<p class="social">
<a href="#"
>Resume</a
>
—
<a href="#"
>LinkedIn</a
>
—
<a href="
#">Github</a>
</p>
</section>
<section class="work">
<h2>Work ↓</h2>
<article>
<h3 class="title">KOTX website design</h3>
<h4 class="meta">Jan-Mar 2019</h4>
</article>
</section>
</div>
My new page I'm trying to make
On my Wordpress page, I have the following code:
<div class="row">
<div class="col-md-6">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
</div>
<div class="col-md-6">
<h1 class="text-center">Vision</h1>
<span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
<h1 class="text-center">Mission</h1>
<span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>
<ul>
<li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
<li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
<li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
<li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
</ul>
</div>
</div><!--end div class="row"-->
You can see how it looks here.
As you can see, the text stays floating to the right 50% inside the wordpress page template area. I would like the text to start taking up 100% of the available area once it hits a new line that is underneath the first picture column to the left.
For an example of how I want it to look, check out our old Squarespace site and zoom in if you have a high aspect ratio.
I know similar questions have been asked before but I have not been able to find an answer while using the Bootstrap framework.
Bootstrap is not terribly different than designing in tables. I mean, they even call them rows and columns. It's 1990's web design using CSS. (I'm only half kidding).
If you want that image to do what you're asking, you should combine your bootstrap columns (just use one col-md-12) and use CSS to float the image left.
Your other option is to decide what text you want always to the side of the image, and what you want under it, and to move that text to a new row with a new col-md-12.
See this answer, it is about Bootstrap - Wrapping Columns Around Larger Column
This is not a 'bootstrap' specific issue. All bootstrap does is use some class names with a long stylesheet.
Unrelated - I would remove those inline styles also.
Thanks to the tips of both #BenFried and #Rkhayat , I was able to come up with some code that is functioning.
<div class="row">
<div class="col-md-12">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
</a>
<h1 class="text-center">Vision</h1>
<p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>
<h1 class="text-center">Mission</h1>
<p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>
<ul>
<li>Building, managing and supporting cross-sector coalitions</li>
<li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
<li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
<li>Advocating and shaping policy to support improvements of systems</li>
</ul>
</div> <!-- end <div class="col-md-12"> -->
</div> <!-- end <div class="row"> -->
I am working on a website on which i show restaurants according to either categories, food, etc. So I have a listing page where I list the restaurants as per the filters applied by the user.
I have a SEO question.
It is said that using heading tags<h1>,<h2>... tags should be used for titles, and important items.
So this is what I did.
...
<div class="item">
<h1>Title of Restaurant</h1>
<h2>Address</h2>
<p>Description</p>
</div>
...
which, for design changes, was later changed to
[EDIT]
As per #Guffa's response, there should be minimum <h1> tags possible on the page.
Since the Title of the restaurant is important and I want it to be recognized as a heading rather than simple text, I'll use <h3> for it.
...
<div class="item">
<h3>Title of Restaurant</h3>
<h4>Address</h4>
<p>Description</p>
</div>
...
The scenario that <h4> tag has no text but rather a child node with a link.
So my question is when my page is indexed (second case), will the <h4> be recognized?
Or will it be completely ignored and thought of as a hyperlink?
Is filling the heading text with a very high text-indent a smart idea?
Or should i use the anchor as it is and apply a title attribute to it?
The h1 tag should be used for important information about the page, so you should really only have one on the page.
Having a listing with h1 tags means that the spiders get conflicting information about what's important on the page, and will likely ignore all of them.
As the h1 should be something like the title for the page, it doesn't make much sense to have a link inside it, as that link would go to the same page.
I've earlier heard that Firefox has a major problem with links wrapping around block elements, and it did recently give me some problems.
It is sometimes (maybe with a 20% rate), for some reason, changing this code (note that all the elements are defined as block elements in my stylesheet):
<li>
<a href="product.htm">
<img src="product-image.jpg" width="100" height="100" alt="Product image" />
<h2>Product title</h2>
<p>Product description</p>
</a>
</li>
Into this:
<li>
<a href="product.htm">
<img width="100" height="100" alt="Product image" src="product-image.jpg">
</a>
<h2>
<a _moz-rs-heading="" href="product.htm">Product title</a>
</h2>
<p></p>
<p>
Product description
</p>
</li>
Which forces the stylesheet to display the elements in a totally wrong way; I use the a element to get a big link containing the product image, title and description in a webshop product list.
I want those big links and can't find an alternative way to do this. What would you suggest?
I don't know how authoritative a resource xhtml.com is, but they do say that the a tag can only contain:
Inline elements, except a, at any depth
Text
A possible solution would be to just reorganize your HTML so that it makes more sense (eg, not trying to put block-level elements in inline-level elements). Just have a single link for the product (maybe in the h2, or around the image). Then use JavaScript to detect a click anywhere on the li, and load the link.
Does that make any sense? Here's an example.
Are all instances of these list items consistently coded? (Read: run the whole thing through the validator.) You said it only happens ~20% of the time, so you should first establish there's nothing different about the ones that break. This appears to be some kind of hyper-correction on the browser's part. A search for _moz-rs-heading turns up a bunch of old posts like this one. (Note the bug referenced there is fixed.) But in some of the cases, the people eventually discovered that their actual <a> tags were broken, they just weren't seeing it, and the modifications you're spotting were Firefox's attempt to handle it somewhat gracefully.
I had the same problem: the same HTML would display in a variety of ways. Literally each time I refreshed the page, Firefox broke my <a>..</a> into lots of smaller <a>..</a><a>..</a> blocks, each time in different ways. (Nearly) each time it displayed wrongly.
This page is a good resource, it suggested putting a <div> directly underneath the <a>, but in fact the page my web designer had supplied, which didn't work, already had that.
So what I did, was to replace my <div> with a <span style="display:block"> and that works now.
<a ...>
<span style="display:block">
...
</span>
</a>