Web Design for Beginners: CSS Layouts
Computers & Technology → Internet
- Author Nick Thomas
- Published October 31, 2011
- Word count 791
It can be very confusing and often times difficult for someone new to HTML and CSS, equipped with an HTML editor such as Dreamweaver, to design a website on their own. There are many resources online that give advice, tips and methods for developing a website, but as most have realized that have tried implementing this information, it is not always correct or accurate. With this article, hopefully some of the confusion regarding the layout of a website - which is the foundation and the most important aspect of the site - can be cleared up so you can move onto the more exciting aspects of web design: inserting the content.
Frustration can arise when you start using the applications of your HTML editor to design your site and when you preview it in the browser, or publish it to the server, the text overlaps the background, the navigation is shifted up or down from where it's supposed to be, or the footer is floating up near the head - which in itself is not where it should be. These common errors are simply a result of improper website layout.
When I was beginning web design and experiencing these issues, I quickly realized that my best bet would be to learn to code HTML and CSS by hand, and not rely on any of the interfaces that the editors offer as "convenience". This was a daunting task at first, but very quickly it became apparent that HTML was a very simple coding language to learn. After a couple days of going over the syntax of tables, forms and contextual tags, I began designing my own layouts by hand - not using tables, but using DIV's...this was like finding the holy grail for website layouts.
Apply an id to a DIV, set the attributes of that DIV in CSS, and the simplicity of web design layouts was realized. Of course there is a bit to learn with CSS and how to position those DIV tags, but once you understand floats, margins, padding and positioning, you'll be able to design a website layout in about 20 minutes and be confident that everyone will see it pretty much the same as you, regardless of the browser they're using or resolution their monitor is set at.
Take an outside-in approach with the layout. If you're going to have a centered design, make sure that the width of the outermost container is set to a width that most screen resolutions will support without making the visitor scroll from left to the right. This typically is about 950 - 975 pixels. Once you set the width, simply apply "auto" to the left and right margin in the CSS style sheet associated with that DIV id, and like magic the site is centered...pretty simple. And of course if you really wanted to play it safe, you could set the width as a percent - such as 90% - but in that case, you need to make sure that the content within can expand and retract as needed without overlapping and without making the footer climb up to the middle of the page. So my advice would be: use pixels as an outermost width when using a centered layout until you're knowledge of padding and margins is at a more advanced level.
Another layout method is to shift the website to the left. This is done by simply setting the outermost div/wrapper tag's margin to 0px on the left. A layout like this will ensure that your website is always seen starting at the left of the visitor's monitor. From that point, you need to decide how far to the right it will expand. Once again, it can be set in terms of pixels or percentages. I would suggest pixels to play it safe with the content.
One other method I like to use is to have a centered layout for the body, but allow the header and footer to expand across the monitor. This is simple to achieve simply by separating the header and footer from the content wrapper, and setting their widths to 100%. Usually headers are a fixed height, but footers most typically expand. So leave the footer's height blank, and set a top and bottom padding of maybe 10 pixels. This way, whatever you add to the footer, it'll always appear centered in the middle of the footer.
These are the basics of laying out a website. Hopefully it's helped some of you who have a basic understanding of HTML and CSS, make your website at least appear structured and organized. In the next article, we'll delve deeper into arranging the actual content of the website and how to avoid common mistakes of having overlapping text and images.
NTR Imagescapes is a Chicago area web design company which specializes in developing affordable websites for small to medium sized businesses looking for online portfolios, affiliate pages, shopping carts, membership systems and content management systems.
Article source: https://articlebiz.comRate article
Article comments
There are no posted comments.
Related articles
- What is DuckDuckGo?
- What is CCTLD?
- Gulf Website Hub Reveals Fresh Digital Solutions to Enhance Dubai's Expanding Market.
- Embrace Multi Graphics Inc. Expands Services to Meet Growing Demand in Digital Marketing, Design, and Printing
- Website Development Trends in 2025
- Viewing Instagram Stories Without an Account: Imginn Viewer Insights
- How to Find, Use, and Manage BitLocker Recovery Keys on Windows 10/11
- Building a Professional Website on a Budget: Using Free Tools like WordPress and AI
- Ava Labs CEO On Why You Shouldn't Ignore Red Flags In The Industry
- Cyberbullying: Empowering Families to Safeguard Their Kids
- 10 Common Online Scams to Avoid: Protecting Your Identity and Finances
- Spring Break and Staying Secure Online: An Internet Safety Guide for College Students
- Unveiling the Future: The 10 Revolutionary Trends Shaping Small E-Commerce Businesses in 2024
- Unlocking Online Content with YouTube Video Downloaders
- Unleashing the Potential of Online Earning: A Comprehensive Guide
- Navigating Success in the Digital Realm: Unveiling the Power of Digital Marketing
- How AI Will Affect the Future of Search
- Maximizing Business Efficiency: The Strategic Role of Business Intelligence with DataInseyets
- Cyber Resilience in the Age of AI
- Harnessing the Power of AI & Blockchain for Data Security and Transparency
- AI Ignites 6G Advancements in Wireless Technology
- How AI is Revolutionizing Content Writing
- What You Need to Know About Writing Prompts
- The Remarkable Ways to Use the AI-Powered Chatbot
- Where Will AI Take Us in 2024?
- AI Written Content Creation Trends for 2024
- Will AI-Linked Cryptocurrency Sector Thrive in 2024?
- Is AI Regulation vs AI Deregulation a Real Concern?
- Prompt Engineering: A Beginner's Guide to Prompt Engineering
- Balancing Innovation and Regulation of AI in the Future