Jump to content

Table In Html (using Css)

ShoalBear

By ShoalBear
in HTML/XHTML

Recommended Posts

ShoalBear Newbie

ShoalBear

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...