1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

css layouts

Discussion in 'Computers, Games, Electronics etc' started by CRX-YEM, Dec 19, 2006.

  1. CRX-YEM

    CRX-YEM Super Moderator Moderator VIP

    Messages:
    4,623
    Likes Received:
    54
    Joined:
    Sep 29, 2002
    Location:
    Wallingford, CT
    anyone wanna take a look at my rough layout and give me any pointers, I'm attempting to duplicate the current site that's in html with tables, w/ nested css. is it an acceptable practice to use both css and tables, yeah css loads/renders faster than css but in some cases it just seems easier to use tables in other css makes sence.

    so have a look and give me your feedback, thanks

    you'll have to rename as .css and .html accordingly. It will only allow me to upload as .txt

    thanks in advance
    dennis
     
    Last edited: Aug 15, 2012
  2. pissedoffsol

    pissedoffsol RETIRED

    Messages:
    49,693
    Likes Received:
    53
    Joined:
    Sep 28, 2002
    Location:
    Retirement Home
    tables are supposed to be used for "tablular data"

    like, you wouldn't type a paper in excel, would you? sure, it can be done, but its bass-akwards to do so.

    first and foremost, you should be using a better doctype. the one you have will throw ie into quirks mode on most versions.
    see also: Activating the Right Layout Mode Using the Doctype Declaration

    basically, what you are trying to do is referred to as the 'holy grail'
    try this for a demo markup:
    The Holy Grail of Layouts: Example #3: A List Apart

    as for your footer,

    use a footer wrapper
    and then float 2 inner div's inside it

    Code:
    <div id="footwrap">
      <div id="footleft"></div>
      <div id="footright"></div>
       <br class="clearit" />
    </div>
    
    Code:
    #footwrap { padding: 10px: }
    #footleft { float: left; width: 48%; }
    #footright { float: left; width: 48%;  margin-left: 49%; }
    
    .clearit { clear: both; }
    
    
    note, adding borders or padding/margin to those will screw up the box model in IE, so you will need to account for that.

    un tested, just threw that up, so i might have screwed something up...
     
  3. MaaseyRacer

    MaaseyRacer Senior Member

    Messages:
    2,980
    Likes Received:
    0
    Joined:
    Sep 29, 2002
    Location:
    San Francisco, Ca.
    As a graphic artist I would recommend moving the links over the the right and leave room for a logo or title space. Remember organization is key, and allowing people to be reminded where they are may seem strange, but it is key.
    heading fonts should be something sans-serif.
    Having both a left and right collum seems busy, I would choose one and stick with it.
    I am a fan of fixed width text bodies instead of expandable ones. The reason is I am on a wide screen display, and things are not neat and compact. White space/negative space is your friend.
    I would also consolidate to a general sensors link for organizations sake, and then create a simple subnavigation for the different sensors.
    Employment Opportunities should be in another location, it does not have anything to do with the rest of the links around it. I would try for somewhere on the bottom with it.
    Keep it as simple as possible as the people reading this stuff know way less about it than you do. Also plan for them to be in a less savy demographic, and they do not want to hunt and poke.
    Sorry not trying to cramp your style, just trying to help out, not trying to step on your toes. Please take this as constructive criticism, and nothing personal.
     
  4. CRX-YEM

    CRX-YEM Super Moderator Moderator VIP

    Messages:
    4,623
    Likes Received:
    54
    Joined:
    Sep 29, 2002
    Location:
    Wallingford, CT
    the css layout is by all means a starting place. I'm moslty trying to learn how to nest css better, when I'm more fluent with my css layout then the content design will take shape. I do apprecieate the input
     
Verification:
Draft saved Draft deleted

Share This Page