Jump to content

Table In Html (using Css)


ShoalBear
 Share

Recommended Posts

Not sure if this would go here or in CSS...but my CSS seems to be ok, as it works fine in Firefox...Any suggestions??

body {	background-color: #000000;	font-family: Angelina;	font-size: 28pt;	color: #DAA520;	margin-top: 0px;	margin-bottom: 0px;}	#header {	width: 85%;	background-position: center center;	height: 215px;	text-align:center;	align: center;}	#main {	width: 80%;	padding: 10px;}#main, #menu {	display: table-cell;}#mainwrapper{	border-collapse: collapse;	display: table;	table-layout: fixed;}#menu {	width: 20%;	font-size: 14pt;	font-family: Angelina;	padding: 10px;}/*menu style */a.menu:link {	color: #DAA520;}a.menu:visited {	color: #DAA520;}a.menu:focus {	color: red;	background-color: green;}a.menu:hover {	color: red;	background-color: green;}a.menu:active {	color: #DAA520;	background-color: green;}a:link {	color: blue;	text-decoration:none;}a:visited {	color: green;	text-decoration:none;}a:focus {	color:red;	text-decoration:none;}a:hover {	color:red;	text-decoration:none;}a:active {	background-color: yellow;	text-decoration:none;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"            "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Language" content="en-us"><LINK REL=stylesheet HREF="main.css" TYPE="text/css"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Highland Roses Design TEST</title></head><body><div id="body"><div id="header"> <img src = "http://www.highlandrosesdesign.com/header.gif"></div><div id="mainwrapper"><div id="menu"><p><victorian.htm" class="menu">		Victorian <br>		Wallpaper <br>		Collection</a></p>		<p><a href="simplyfab.htm" class="menu">		Simply <br>		Fab</a></p>		<p><a href="celebration.htm" class="menu">		Celebration</a></p>		<p><a href=".htm" class="menu">		Not <br>		Your <br>		Grandma's <br>		Quilted <br>		Ornaments</p>		<p><a href="team.htm" class="menu">		Taking <br>		One <br>		for <br>		the <br>		Team</p>		<p><a href="everythingelse.htm" class="menu">		Everything <br>		Else</a></p></div><div id="main">		<p><a href="victorian.htm""><img border="0" src="http://lh5.ggpht.com/_7tElEpmE5fs/SiwY25ed8_I/AAAAAAAAAGQ/bT7wRCofYQU/s144/babydoe.jpg" /><br>		Victorian Wallpaper Collection</a></p>		<p><a href="simplyfab.htm"><img border="0" src="http://lh6.ggpht.com/_7tElEpmE5fs/SiwVOq3DQ5I/AAAAAAAAAE0/yiPHhRxSCww/s288/fabredivorygreen.jpg" /><br>		Simply Fab</a></p>		<p><a href="celebration.htm"><img border="0" src="http://lh3.ggpht.com/_7tElEpmE5fs/SiwVMS0VWuI/AAAAAAAAAEs/XfZ0P-xdySA/s144/confettigreen.jpg" /><br>Celebration</a></p>		<p><a href="notgrandma.htm"><img border="0" src="http://lh5.ggpht.com/_7tElEpmE5fs/Sizoo1nVg4I/AAAAAAAAAII/0si6QTqkaAA/s144/Greensleevesboth.jpg" /><br>Not Your Grandma's Quilted Ornaments</p>		<p><a href="http://www.highlandrosesdesign.com/team.htm">Taking One for the Team</p>		<p><a href="everythingelse.htm"><img border="0" src="http://lh6.ggpht.com/_7tElEpmE5fs/SiwVQNVNYqI/AAAAAAAAAE4/PB4l5JTF4ho/s144/gothicblack2.jpg" /><br>Everything Else</a></p>				</div></div><div id="header"> <img src = "http://www.highlandrosesdesign.com/header.gif"></div></div></body></html>

Link to comment
Share on other sites

After a quick look:you have two <div id="header"> when they should be unique, and used once only within a page.align: center; is not valid, whereas text-align: center;(left,right) or vertical-align: middle; (vertical-align values) is.small point, the normal/default anchor links should be placed above the menu anchors, as any changes within the menu anchors, could be overwritten by the following normal/default anchor links (see below).a:link { color: blue; text-decoration:none;}a:visited { color: green; text-decoration:none;}a:focus { color:red; text-decoration:none;}a:hover { color:red; text-decoration:none;}a:active { background-color: yellow; text-decoration:none;}/*menu style */a.menu:link { color: #DAA520;}a.menu:visited { color: #DAA520;}a.menu:focus { color: red; background-color: green;}a.menu:hover { color: red; background-color: green;}a.menu:active { color: #DAA520; background-color: green;}

Edited by dsonesuk
Link to comment
Share on other sites

If you wish to target a specific element for assigning a specific css, or access by javascript DOM, you would use an id.example for outer, header, left, right, main content containing divsIf you wish to target multiple element you would use a class instead.example for multiple elements inside the containing div, <p><h2> can have different coloured text assign to themh2.h_color1{color: red;}h2.h_color2{color:lime}p.p_color1{color: blue;}p.p_color2{color:yellow;}<h2 class="h_color1">Header 1</h2><p class="p_color1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color2">Header 2</h2><p class="p_color2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color1">Header 1</h2><p class="p_color2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color2">Header 2</h2><p class="p_color1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...