Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
Page 1 of 5 123 ... Last

Thread: CSS Tables

  1. #1

    CSS Tables


    REGISTER TO REMOVE ADS


    Well seeming I was called a bad developer for not using css tables here is my attempt.

    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Andrew Makowsky // Welcome</title>
    <link rel="StyleSheet" href="main_ie.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="wrapper">
      <div id="logo"> </div>
      <div id="menu">
        <div id="menu_top">
     
     
        </div>
      </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
     background-color: #f6f6f6;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 10px;
     color: #333;
    }
    p {
      padding: 10px;
    }
    #wrapper { 
      margin: 0 auto;
      width: 700px;
    }
    #logo { 
      float: left;
      height: 117px;
      width: 700px;
      display: inline;
      background-image: url(images/header.png);
      background-repeat: no-repeat;
    }
    #menu {
     float: left;
     height: 36px;
      width: 700px;
      display: inline;
    }
    #menu_top {
     height: 13px;
      width: 700px;
     background-image: url(images/sc_menu_top.png);
      background-repeat: no-repeat;
     margin-top: 0px;
    }
    Now I am stuck and have no idea how to do the menu section? (see attachment for menu)
    Any links on how or anybody eager to wright the next bit of code for me?

    The menu has four images, three left and one right with a section in the middle for table colour.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	site.jpg 
Views:	58 
Size:	89.2 KB 
ID:	1371  

  2. #2
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    HTML Code:
    <ul id="menu">
    	<li><a href="#" id="arrivals-link">Arrivals</a></li>
    	<li><a href="#" id="portfolio-link">Portfolio</a></li>
    	<li><a href="#" id="prices-link">Prices</a></li>
    	<li id="gallery-li"><a href="#" id="gallery-link">Gallery</a></li>
    </ul>
    Code:
    #menu{
    	clear:both;
    	width:100%;
    	overflow:hidden;
    	position:relative;
    	background:#d7d7d7;
    }
    #menu li{
    	float:left;
    }
    #menu li a{
    	display:block;
    	text-indent:-9999px;
    }
    #gallery-li{
    	position:absolute;
    	right:0;
    }
    #arrivals-link	{ width:75px; height:30px; background:url(path/to/image) top left no-repeat; }
    #portfolio-link	{ width:75px; height:30px; background:url(path/to/image) top left no-repeat; }
    #prices-link		{ width:75px; height:30px; background:url(path/to/image) top left no-repeat; }
    #gallery-link	{ width:75px; height:30px; background:url(path/to/image) top left no-repeat; }

  3. #3
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    That's just off the top of my head so I dunno how well it'll work. Also, you'll need to change those width/height declarations to suit your images.

    Oh and they're not CSS tables. is a table
    is a division etc. You're using HTML and CSS there. There's no such thing as a CSS table.

  4. #4
    This has worked but needs a tad tweak, think its margins?
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	prob.jpg 
Views:	49 
Size:	38.9 KB 
ID:	1372  

  5. #5
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    Got a live link? I can't tell from that mate.

  6. #6
    FredRogers's Avatar
    Join Date
    Jul 2009
    Location
    Norway
    Posts
    342
    Andy, if it makes you feel any better the transition was not s smooth one for me either
    ::: TIL ALL ARE ONE ::: Fred Rogers - Facebook

  7. #7
    Quote Originally Posted by FredRogers View Post
    Andy, if it makes you feel any better the transition was not s smooth one for me either
    Lol, no $hit

  8. #8

    REGISTER TO REMOVE ADS


    Andrew Makowsky // Welcome

  9. Page 1 of 5 123 ... Last

    Similar Threads

    1. Tables and Divisions
      By Jasper5844 in forum CSS Forum
      Replies: 25
      Last Post: 09-03-2009, 06:20 PM
    2. Help with Tables!
      By RJC in forum CSS Forum
      Replies: 10
      Last Post: 05-11-2008, 02:20 AM
    3. Are tables unprofessional?
      By jonze in forum General Web Design Forum
      Replies: 12
      Last Post: 15-08-2008, 05:22 PM
    4. No Tables
      By Miss Leona in forum CSS Forum
      Replies: 12
      Last Post: 20-02-2008, 08:15 AM
    5. CSS vs HTML Tables
      By Talks_44 in forum CSS Forum
      Replies: 11
      Last Post: 21-09-2007, 11:49 PM

    Posting Permissions

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