Register

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 4 of 4
  1. #1
    Junior Member
    Join Date
    Apr 2007
    Posts
    5
    Member #
    15121
    I'm new here and also pretty new to web design. Here is my site: http://taijijuny.frih.net
    What I want to do is make the layout on it see-through. I plan to add a background picture so it would look better but first I want to be able to make the layout see-through with both of my banners still at the on the site. Is this possible?

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Hello!

    Before I address your problem, let me give a few pointers.

    - You have some serious tag soup going on. You can simply replace some tags with more meaningful ones. Take this snippet:
    HTML Code:
    <center><div class="head">Navigation</div></center>
    <br>
    &nbsp; + <a href="index.html">Main</a><br>
    &nbsp; + <a href="ImageGallery.html">Image Gallery</a><br>
    &nbsp; + <a href="Profile.html">Profiles</a><br>
    &nbsp; + <a href="http://taijijuny.frih.net/forum">Forum</a><br>
    <br>
    In this snippet, there are some things you can do, mostly about using proper markup (use "h3" when its a real header, "p" for paragraphs, etc) and CSS. Look at this:
    HTML Code:
    <div id="navigation">
       <h1>Navigation</h1>
       <ul>
          <li><a href="index.html">Main</a></li>
          <li><a href="ImageGallery.html">Gallery</a></li>
          <li><a href="Profile.html">Profiles</a></li>
          <li><a href="http://taijijuny.frih.net/forum">Forum</a></li>
       </ul>
    </div>
    Much cleaner, isn't it? And for the styling, you can use the hooks " #navigation h1" for the "navigation" text, and "#navigation li a" for the links (with "#navigation li a:hover" for the rollovers). Lists create the line-breaks automatically (they work like lists, obviously) and you no longer need senseless <center> and <div> tags which really imply nothing.

    - You're using tabular layout. This is very bad, learn CSS layouting, but only after you understand that first point.

    - Don't use .bmp files. They're HUGE. Your site is almost 650kb, 540kb of which is a single banner alone. Use jpg instead.

    - A lot of your code is incomplete. Tags aren't closed (there's no closing HTML tag or body tag) and there's no DOCTYPE, which forced my browser into quirks mode. That's generally not good.

    Now, about your "opacity" query. Which part do you want to be transparent? Actually never use an image for the background of text, because it makes it hard to read.

    Looks like you've discovered the beauty of hand-coded HTML and CSS. There are a lot of things you still should learn, though. For example, give paddings to your content to make it easier to read. The color itself might be a bit too low-contrast for some people. Your navigation lists can have custom images as bullets and margins instead of non-breaking spaces.

    I wish you luck!
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Junior Member
    Join Date
    Apr 2007
    Posts
    5
    Member #
    15121
    I'll add your suggestions when I get to my home PC. Anyway, I wanted to make everything transparent including the links on the side. I'm still very new to web design. I actually just started learning this year. Any help will be appreciated.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    A side note about closing tags -- if your aim is to write well-formed HTML4, you can live without some closing tags. Nonetheless, XHTML is a better way to go, and it requires closing tags. The differences are typically fairly small, and include the required closing tags, as well as all-lowercase tags and attributes and attribute values enclosed in quotations.


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 02:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com