Advertisements

Tag archive for: css

Flexible CSS rule-sets to keep your images within their parent element

Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.

By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger.

For example, the following screenshot shows the image at https://commons.wikimedia.org/wiki/File:LARGE_elevation.jpg spilling over its parent element:

Example of large image overspilling the parent container

One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:

Example of small image being stretched to fill parent container

This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element.

Advertisements

Implementing Google Custom Search as a WordPress page without using any plugin

Creating a search engine to search content across a polyglot website is not an easy task. In order to do that, you need to either:

  • take a search query and match it across data repositories from different application processes, or
  • have a process that will maintain an index of content from the different applications and search within that content.

Since Google had indexed most of the content in the Internet, Google Custom Search can be the easiest way for us to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

In case you need it, this is how you can implement Google Custom Search as a WordPress page without using any plugin.

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Techcoil search box as at 20180616

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.

Make your PHP webpage loads faster by aggregating external CSS scripts

In most cases, the speed of which a browser completes the rendering a of webpage is very much dependent on the network connection which connects it to a web server. While some browsers have the luxury of fibre connections, there could be others that are rendering your webpages via a mobile network.

Because each HTTP response consists of the header portion in addition to the actual content, we could reduce the number of bytes that our browsers need to read from our servers by aggregating external CSS and JS scripts.

Advertisements
Advertisements