www.webdeveloper.com
Results 1 to 4 of 4

Thread: Positioning without tables

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    5

    Positioning without tables

    I'm working on rewriting some CSS and I want to be sure I'm doing it properly.

    I need to position 2 images and 3 menus. There's a left menu, two top menus (a top nav and utility nav), and two images that are basically placed side by side. The way they are currently styled is through a table which we're trying to avoid.

    I was going to use position:relative; but I did some quick research to see if this could cause problems later and apparently it can. So I'm wondering what the best way to do this is. I'm trying to write this code in a way that will cause minimal problems later.

    If it matters any, we're using Joomla and since I don't fully understand how you theme in Joomla yet, I don't know if that changes anything or not.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    The best way to do this is with floats, margins, and paddings. Here's a basic example:
    http://tinkerbin.com/P4F9g023

    I'm not sure if the link works in Internet Explorer.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jan 2013
    Posts
    5
    Thank you very much, I appreciate it!

  4. #4
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    I use table-free layouts on all of my web sites and pages. If you visit the page listed in my signature block below you can see how it works by checking (right click) the source code. You can check the stylesheet by clicking on the CSS validator link toward the bottom of center section. Feel free to use any code snippets you find to your liking.

    Visit my page http://jp29.org/floatbox.htm to see how to array horizontal boxes using CSS.

    James
    Last edited by polyglot; 01-17-2013 at 12:05 PM. Reason: added missing word
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles