3 replies [Last post]
_Dom_
Offline
newbie
Leeds, England
Last seen: 17 years 41 weeks ago
Leeds, England
Joined: 2004-04-18
Posts: 9
Points: 0

i am a newbie to css and wonder if this is the correct way to format this page in css

body		{
		background:#FFA8A8;
					text-align:center;
		}
		
		
#boxout		{
		position:relative;
		margin-top:1px;
		margin-left:1px;
		width:100%;		
		border-width:3px;
		border-style:double;
		border-color:black;
		text-align:center;
		height:100%;
		background:#FFFFFF;
		}
		
#boxtop		{
		position:relative;
		margin-top:3px;
		width:75%;		
		border-width:3px;
		border-style:double;
		border-color:black;
		text-align:center;
		background:#FF2020;
		font-size:42;
		color:#FFFFFF;
		}
		
#newshead		{
		position:relative;
		margin-top:30px;
		width:40%;		
		border-width:3px;
		border-style:solid;
		border-color:black;
		text-align:center;
		background:#FFD0D0;
		}
		
#news		{
		position:relative;
		margin-top:-6px;
		width:30%;		
		border-width:3px;
		border-style:dashed;
		border-color:black;
		text-align:center;
		background:#FFD0D0;
		}
		
	#newsdate	{
			position:relative;
			margin-top:-5px;
			width:40%;		
			border-width:3px;
			border-style:solid;
			border-color:black;
			text-align:center;
			background:#FFD0D0;
			}
		
#menu		{
			text-align:center;
			float:left;
			position:relative;
			width:20%;
			margin-top:3px;
			margin-left:5px;
			border-width:3px;
			border-style:solid;
			border-color:black;
			height:75%;
		}
		
#content		{
			text-align:center;
			float:center;
			position:relative;
			width:90%;
			margin-top:3px;
			margin-left:5px;
			border-width:3px;
			border-style:solid;
			border-color:black;
			height:75%;
		}

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css" href="markup.css"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Zibings Web Services :: CSS Test</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
	<div id="boxout">
		<div id="boxtop">		
			Logo Goes Here
		</div>
<br />
		<div id="menu">
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
			<div>
				Item 1
			</div>
		</div>
	<div id="content">
		<div>
			<div id="newshead">
			A News Poster In CSS?
			</div>
			<div id="news">
			wow this is great no tables or anything 
			</div>
			<div id="newsdate">
			Posted 12/12/04 : 12:43
			</div>
			<div id="newshead">
			A News Poster In CSS?
			</div>
			<div id="news">
			wow this is great no tables or anything 
			</div>
			<div id="newsdate">
			Posted 12/12/04 : 12:43
			</div>
		</div>
	</div>
	</div>
</body>
</html>

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

is this the right way to do this

Hi

I haven't the time to look at your code, but lose the xml from the start, as IE will go into quirks mode with that there. Losing it won't affect any other browser.

But, as to your question, I'll throw a couple back at you. Do YOU think anything LOOKS wrong in the browser tests you have done? Does it look like what you want?

If so, you've done it right, because you got what you wanted. If it isn't, tell us what is wrong.

BTW. It is much easier for us if you post a url where this page is, as it is much easier to spot problems on live pages.

Trevor

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 14 years 48 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

is this the right way to do this

A couple of things I noticed:
ids are unique, you use some of yours more than once, ("newshead", "news", "newsdate"), change these to classes.
There is no "center" value for float.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

is this the right way to do this

And just to knit-pick... probably too many divs. It looks like you are using them instead of perfectly valid alternatives (such as the Item 1 set of divs could perhaps be an unordered list?), which will work much better structurally.

Also, try to get into using CSS shorthand: you could reduce the following CSS:

 #boxout  { 
   position:relative; 
   margin-top:1px; 
   margin-left:1px; 
   width:100%;   
   border-width:3px; 
   border-style:double; 
   border-color:black; 
   text-align:center; 
   height:100%; 
   background:#FFFFFF; 
   } 

...down to:

 
#boxout  { 
   position:relative; 
   margin-top:1px 0 0 1px; 
   width:100%;   
   border:3px double black; 
   text-align:center; 
   height:100%; 
   background:#FFF; 
   } 

Doesn't look much, but over a couple of hundred lines of CSS, it counts.

The next sentence is true. The previous sentence is false. Discuss...