Graphic and Web Design Forum


Page 1 of 5 123 ... LastLast
Results 1 to 8 of 37

CSS Tables

This is a discussion on CSS Tables within the CSS Forum, 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> ...


  1. 20-08-2009, 11:14 AM #1
    Andy
    Andy is offline
    Admin
    Andy's Avatar
    Join Date
    Jan 2007
    Location
    Berkshire, UK
    Posts
    220

    CSS Tables

    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 CSS Tables-site.jpg  
    Passionate Motorcycle Rider
    Reply With Quote Reply With Quote
  2. 20-08-2009, 11:23 AM #2
    Harry
    Harry is offline
    CSS Wizardry
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,620
    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; }
    I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now Twitter
    Reply With Quote Reply With Quote
  3. 20-08-2009, 11:24 AM #3
    Harry
    Harry is offline
    CSS Wizardry
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,620
    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.
    I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now Twitter
    Reply With Quote Reply With Quote
  4. 20-08-2009, 11:58 AM #4
    Andy
    Andy is offline
    Admin
    Andy's Avatar
    Join Date
    Jan 2007
    Location
    Berkshire, UK
    Posts
    220
    This has worked but needs a tad tweak, think its margins?
    Attached Thumbnails Attached Thumbnails CSS Tables-prob.jpg  
    Passionate Motorcycle Rider
    Reply With Quote Reply With Quote
  5. 20-08-2009, 12:00 PM #5
    Harry
    Harry is offline
    CSS Wizardry
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,620
    Got a live link? I can't tell from that mate.
    I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now Twitter
    Reply With Quote Reply With Quote
  6. 20-08-2009, 12:16 PM #6
    FredRogers
    FredRogers is offline
    Carbonium Designs
    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
    Reply With Quote Reply With Quote
  7. 20-08-2009, 01:06 PM #7
    Andy
    Andy is offline
    Admin
    Andy's Avatar
    Join Date
    Jan 2007
    Location
    Berkshire, UK
    Posts
    220
    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
    Passionate Motorcycle Rider
    Reply With Quote Reply With Quote
  8. 20-08-2009, 01:07 PM #8
    Andy
    Andy is offline
    Admin
    Andy's Avatar
    Join Date
    Jan 2007
    Location
    Berkshire, UK
    Posts
    220
    Andrew Makowsky // Welcome
    Passionate Motorcycle Rider
    Reply With Quote Reply With Quote
    9.  

     
    Page 1 of 5 123 ... LastLast
    « background-image | Coda Slider CSS help please »

    Similar Threads

    1. Tables and Divisions
      By Jasper5844 in forum CSS Forum
      Replies: 25
      Last Post: 09-03-2009, 05:20 PM
    2. Help with Tables!
      By RJC in forum CSS Forum
      Replies: 10
      Last Post: 05-11-2008, 01: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, 07: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
    •  

    Forum Rules


    Poster Printing - Leaflet Printing - T Shirt Printing - Design Forum Privacy Policy
    Powered by vBulletin® Version 4.2.0
    Copyright © 2013 vBulletin Solutions, Inc. All rights reserved.
    Search Engine Optimization by vBSEO
    Template-Modifications by TMS
    All times are GMT. The time now is 05:16 PM.
    vBulletin 4.0 skin by CompleteVB