Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning Images in Website???

    Hello all,

    I'm building a website for my AFROTC detachment's Arnold Air Society squadron, and as of now, I've run into an obstacle. I've already created all of the images I want to use on the website; however, I'm completely lost as to how to align them all on the page. I know I need to use CSS somehow, but I have no idea where to begin as far as how to use it. Below is a link to a preview of the website that I made by arranging all of the seperate images in Photoshop, and them saving and uploading them to Angelfire (where they are temporarily being hosted until I can get hosting from the university). The pic pretty much shows how I want the site to look, except for a few things: 1) I want it to be fluid (viewed the same way by anybody, on any OS and/or web browser); 2) Instead of that grey background that I have up there right now, I want it to have the blue and orange bars cascading down the sides of the page, with the seamless white pattern in the background; and 3) I want the page to be spaced evenly. If anybody can help me out with this, I'd really appreciate it. Thanks peoples.

    John D. Ryan Squadron Website (Non-Functioning Preview)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Woah, this site is loaded with colorful information. From a designer’s point of view I would suggest to remove the text in the background (that reads “John D. Ryan Squadron” and “UTSA”) so it won’t be too overwhelming and drawing the attention away from the actual content.

    Now to the actual question. The first thing you need to ask yourself is: What will my site be about and how should I structure the information I provide. By “structure the information” I mean how it should be laid out in the plain HTML at first. Don’t think about how your site will/should look like in the end yet! If you’ve sorted the HTML properly you will have no problems styling this content then (with CSS) to look like you intended - or totally different (without changing the HTML).

    The important keyword is semantics. Use divisions to divide your page logically into different sections: header, content, footer. Those thee sections are all enclosed in one container div. Then in the header goes the page/company/organization name or title (as <h1> element) and the navigation. The content section gets the content which will again be divided into different sections. Basically you have a three column layout so that makes three main sections in the content. And those sections are again divided into different sub sections (if necessary), and so on, and so forth… You see where I’m going?
    The footer gets the copyright info or the navigation again (at least a “to top” link).

    Only after you’ve sorted that out you can start styling the content - and only those elements you’ve got there (no additional empty elements to add a background image or whatever) - with CSS (putting the images that serve a purely stylistic purpose as background images into your HTML elements). Your layout is quite advanced, though, and for a CSS beginner it might not be the easiest way to go.

    Look at the CSS Zen Garden to see how the pros are doing it and making on and the same HTML page look totally different. And also check out Bon Rouge’s website for a three column CSS layout.

  • #3
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,500
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    I realize your example on Anglefire is just an example. I hope you'll be
    using a real webhost for your site, without banner ads. For about $35.00
    per year (yes, that's about $2.50 per month), you can have your own
    webhosted site with no ads and your own domain name. That's really
    affordable ... www.cleverdot.com

    There are other hosts also that have good prices. I mention cleverdot
    because they have this thing in their cpanel called "fantastico". With that,
    you can install a forum, blog (WordPress), ecommerce store, etc with the
    click of a button ... automatically. It does all of the MySQL stuff for you.

    They also have CopperMine in their "fantastico" list ... a photo gallery.

    Stephan pretty much said it all with regards to CSS/XHTML

  • #4
    New Coder
    Join Date
    Apr 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so you guys think I should go simpler first, until I learn the basics of CSS coding, and then try to get more intricate with the layout? We'll see...I mean, I kinda like the design I already have, and I HAD a website with a set up similar to the one I have now, but I didn't code the CSS for it (had a friend do it), and it was all setup in pretty much the same way...but I might take your advice if I can't seem to figure out how to get it looking the way I want it to by the end of the weekend. :P But thanks anyways for the help Stephan. I'mma check out those links later on today. Anybody else got any suggestions?


  •  

    Posting Permissions

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