If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2014
    Member #

    "Elderly" web designer doesn't know where to begin when moving away from tables...

    Hi, I'm going to be remaking a family website for a friend of mine that I set up probably 10+ years ago, and I haven't really kept up on web design since I originally set it up.

    I have a site on a test server that works "OK", but I'm using tables for my layout, and I don't really want to do that.

    What he wants is a raster image "header", with like the logo he has in the middle, and two menu items on each side. The menu items are also images, and they are going to be of unknown size. (he wants to be able to change them to arbitrary images, but the filenames are always going to be 1.png - 4.png, and they're always going to be linking to 1.php - 4.php)

    The two things I've tried are a table, with with nine images centered, four menu item images, the logo, and four transparent "spacer" images that are set to 10% page width each to try and create gaps between items, but this came out super ugly.

    The second thing I tried was two tables, one of them one row by one column and a nested table inside of it one row by five columns, each column using 20% width with one image centered in it. This turned out looking OK, but I'm sure there is a much better way to do this in CSS, but the last time I did any web design CSS was barely used for anything more than setting font sizes, so I don't even have a guess at what I'm trying to do would be called, or where to start.

    I did a quick mockup of what I'm trying to accomplish here, in case my babbling is completely inconsistent.mockup.jpg


  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Not from USA
    Member #
    2784 times
    If this were me personally, I'd use a ul (unordered list) with the following attributes:

    ul#menu {text-align:  center;  list-style-type:  none;  margin: 0px auto;  padding: 0;}
    ul#menu li {display: inline;  margin:  0 1em;  padding:  0;}
    The 1em will give you a margin between the left and right side of your menu items. From there, put your menu items (including the logo) in and you should hopefully be good to go.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    rss is offline
    Junior Member
    Join Date
    Mar 2014
    Baton Rouge, Louisiana
    Member #
    I would also use a ul with the display set to inline.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 11:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: