Lateral Code
A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » Posts tagged 'css' (Page 3)
Posts Tagged ‘css’
Slideshow Styling
By Karthik Viswanathan on Sunday, March 29th, 2009 | Tags: css, tutorial | 4 Comments »
As many of you have probably noticed, the “Slideshow Series” contains little to no CSS styling. Soon after completing my previous post, I realized that some major work needs to be done to improve the general appearance of the show; indeed, many only view a slideshow because it looks good!
Follow along as I present an intricate (yet easy to code) slideshow styling.
Styling List Elements
By Karthik Viswanathan on Tuesday, March 10th, 2009 | Tags: css, tutorial | 1 Comment »
List elements are present throughout every website. Navigation usually consists purely of these tags. In order to give your website some pizzazz, follow along as we teach you the process of styling list elements.
Placing Links In Images
By Karthik Viswanathan on Thursday, January 29th, 2009 | Tags: css, html, tutorial | 1 Comment »
Many of us love to use vivid, clean images to enhance a website design. Unfortunately, it may be necessary to embed links into such an image, which can be a hassle.
In this article, we will present a quick and easy way to add links to your images using a small amount of HTML markup and CSS.
To begin, we must initialize our HTML. For this example, we will use the logo presented by Patrick Lin in his previous article:
It contains the following HTML:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>Creating Clever Logo Banners
By Patrick Lin on Monday, January 26th, 2009 | Tags: css, html, tutorial | 3 Comments »
Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.
The first step is to create the banner. For demonstration purposes, the following banner will be used:
This is the markup involved:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>
5 Simple CSS Tricks
By Karthik Viswanathan on Friday, January 23rd, 2009 | Tags: css, html | 1 Comment »
CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.
- Reset Values
Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:
* { margin: 0; padding: 0; }