Learning CSS

hargi · 13 Dec 2006 at 09:54

Hi,
I need to go about making a website done it before useing nasty dreamweaver, but i want to make a nice one using CSS. I have not really done much with CSS before and was wondering how i should go about learning it?
The site i want to produce i want to look like

Do you recommend any books or anything
TIA
Matt

Mr_L · 13 Dec 2006 at 10:05

W3Schools: CSS Tutorial
HTML Dog: HTML and CSS Tutorials
Max Design: CSS Resources

The above should all come in use. Looking at your proposed design, It shouldn't be too difficult to implement.

zetec452 · 13 Dec 2006 at 11:08

This will help you get going: http://www.inknoise.com/experimental/layoutomatic.php

hargi · 13 Dec 2006 at 15:23

Thanks for the links they are coming in handy
So far i have got my brown bit in the center of the page
I have got a image called shadow left and one thats shadow right thats 50px by 50px that i want to put along side or the brown to make it look like its got a shadow effect.
Tried this but it didnt work, i take it the boarder property does not support images

Code:

#content {
	background-color: #AE9D74;
	width: 649px;
	border-left: url ("Shadow left.jpg");
}

joeyjojo · 13 Dec 2006 at 16:00

Easiest way for the shadow would be to have a container div which is 100 pix wider than the content bit. Give this a background image which has the shadows on either side with space in the middle (or brown, whatever) and repeat this in the y direction. Have the content bit 649px wide and centered in some way, probably padding in the container.

Edit: eg

white div has width 649px and 50px padding on either side, and has the shadow image as a background. The red div has a background colour. Green and blue are other divs for navigation and content respectively.

hargi · 14 Dec 2006 at 18:19

Thank you again.
Got the shadow working but how do i get the bit where its got critical thinking to start at the very top at the page,

sorry for the crudeness
Heres my CSS

Code:

body, html {
	margin: 0em auto;
	padding: 0;
	width: 749px;
	font:  16pt   Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	color: #000000;
	background: #8BBAEE; 
}
#wrapper {
Width: 649;
background: url("boarder.png");
background-repeat: repeat-y;
padding:50px;
}


#content {

	background-color: #AE9D74;
	width: 649px;
	
}

#content-left {
	float: left;
	width: 649px;
	background-color: #AE9D74;
	border-left: url ("Shadow left.jpg");
}


h1 { 
	background: #D7CBAD url("Top banner.jpg") no-repeat;
	width: 649px;
	height: 154px;
	float: left ;
	text-indent: -9999px;
	
}

h2 {
	text-align: center;
	font: 14pt Maiandra GD,Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	font-weight: bold;
}



#left li {
	list-style-type: none;
	text-decoration: none;
	padding: 5px;
	margin-top: 9px;
}



#footer	{
	clear: both;
	background: #AE9D74 ; 
	color: #333;
	height: 25px;
	font: 8pt Maiandra GD,Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	text-align: center; }
	
a:link {
color:#8BBAEE;
text-decoration:underline;
}


 a:visited {
	color: #8BBAEE;
	text-decoration: none;
}

a:hover {
	color: #8BBAEE;
	background: #F5F4F1;
}

Flanders · 14 Dec 2006 at 18:40

Code:

*, html, body {
margin: 0;
padding: 0;
}

body {
font:  16pt   Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
color: #000;
background: #8BBAEE url(../link/to/full/shadow/image.gif) repeat-y; 
}

#wrapper {
width: 749px;
padding: 50px;
margin: 0 auto;
}

#content {
background-color: #AE9D74;
}

h1 { 
background: #D7CBAD url("Top banner.jpg") no-repeat;
width: 649px;
height: 154px;
float: left ;
text-indent: -9999px;
}

h2 {
text-align: center;
font: 14pt Maiandra GD,Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
font-weight: bold;
}

#left li {
list-style-type: none;
text-decoration: none;
padding: 5px;
margin-top: 9px;
}

#footer	{
clear: both;
background: #AE9D74 ; 
color: #333;
height: 25px;
font: 8pt Maiandra GD,Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
text-align: center;
}
	
a:link {
color:#8BBAEE;
text-decoration:underline;
}

a:visited {
color: #8BBAEE;
text-decoration: none;
}

a:hover {
color: #8BBAEE;
background: #F5F4F1;
}

A quick re-jig of your code, this should work, assuming your html is set out something like this:

Code:

<html>
<body>

<div id="wrapper">

<div id="content"></div>
<div id="footer"></div>

</div>

</body>
</html>

Though, I would recommend a seperate div for the header, rather than using a heading. Also, note that the shadow should be the the full image, ie not cut up, just 1px heigh and however wide, you will have to adjust the width of the #content accordingly though. Like I said, this was quick so if it might not work perfectly, gives you a starting point though

Good luck.

hargi · 15 Dec 2006 at 14:58

To create the navbar would i use blank pictures of the buttons as a background image or would i indert them as like buttons whats the best way

joeyjojo · 15 Dec 2006 at 15:05

For nav, unordered lists:
eg.

Code:

<ul>
<li><a href="one.htm">One</a><li>
<li><a href="two.htm">Two</a></li>
...
</ul>

and

Code:

#nav ul li{
width:100px;
}
#nav ul li a{
text-decoration:none;
}
#nav ul li a:hover{
color:red;
}

For example. Change 100px to a quarter of the total width if you want 4 of equal size.

Curiosityx · 15 Dec 2006 at 15:06

Check out Exploding Boys and his CSS Navigation examples for inspiration

http://www.exploding-boy.com/

http://exploding-boy.com/images/EBmenus/menus.html

hargi · 15 Dec 2006 at 16:05

ok been dumb now how do i get them horizontal not vertical

joeyjojo · 15 Dec 2006 at 16:34

hargi said:
ok been dumb now how do i get them horizontal not vertical

Whoops, display:inline; in the li one.

suarve · 17 Dec 2006 at 12:44

Curiosityx said:
Check out Exploding Boys and his CSS Navigation examples for inspiration

http://www.exploding-boy.com/

http://exploding-boy.com/images/EBmenus/menus.html

try cssplay.co.uk for nav bars too, some very ncie ones there too.

hargi · 18 Dec 2006 at 14:24

Sorry to bother you again, but i tried, i have really tried to get this work by myself but i cant. This is what i have so far

my css

Code:

body, html {
	margin:0 auto;
	padding:0;
	width:750px;
	font:16pt   "Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
	color:#000000;
	background:#8BBAEE; 
}

#centre {
width:100%;
height:100%;
text-align:center;
}

#wrapper {
Width:650px;
height:100%;
background:url("boarder.png");
background-repeat:repeat-y;
padding-left:50px; padding-right:50px;
text-align:left;
}


#content {

color:#000000;
	background-color:#AE9D74;
	background:#AE9D74;
	width:650px;
	height:80%;
}
#nav ul li{

list-style-type:none;
display:inline;
padding:0.50em;
text-align: center;
width:127px;
height:50px;
background:url("buttons copy.jpg");

}
#nav ul li a{
color:black;
text-decoration:none;
}
#nav ul li a:hover{
color:black;
text-decoration:underline;
}

#content-left {
	float:left;
	width:650px;

}


h1 { 
	background:#D7CBAD url("Top banner.jpg") no-repeat;
	background-color:#D7CBAD;
	color:#000000;
	width:650px;
	height:154px;
	float:left ;
	text-indent:-9999px;
	
}

h2 {
	background-color:#AE9D74;
	background:#AE9D74;
	text-align:center;
	font:20pt "Maiandra GD","Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
	font-weight:bold;
	
}



#left li {
	background-color:#AE9D74;
	background:#AE9D74;
	list-style-type:none;
	text-decoration:none;
	
	margin-top:9px;
}



#footer	{
	
position:absolute;
bottom:0px;
width:650px;
clear:both;
background:#AE9D74 ; 
color:#333;
height:25px;
font:8pt "Maiandra GD","Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
text-align:center;
  }
	
a:link {

color:#8BBAEE;
text-decoration:underline;
}


 a:visited {
 background:#AE9D74 ; 
	color:#8BBAEE;
	text-decoration:none;
}

a:hover {
	color:#8BBAEE;
	background:#F5F4F1;
}

my html

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="NLN Home"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="Matthew Hargraves"/>
<title>Critical Thinking</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="centre">
		<div id="wrapper">
		<h1>Critical Thinking</h1>
			<div id="content">
			 <div id="nav">
			 <ul>
<li><a href="one.htm">Home</a></li>
<li><a href="two.htm">AS</a></li>
<li><a href="two.htm">A2</a></li>
<li><a href="two.htm">Login</a></li>
<li><a href="two.htm">Contact</a></li>
</ul>
			 </div>
			<h2>Critical Thinking</h2>
				<div id="content-left">
					<div id="left">
					<ul>
					<li><a href="file:///c|/documents%20and%20settings/mhargraves/desktop/photoshop/nln.html">This here will be a link</a> but this here will be normal text</li>
					</ul>
					</div>
				</div>	
  				<div id="footer">
				Footer
				</div>
			</div>
		</div>
	</div>
</body>
</html>

The button copy.jpg that makes up the nav background is 127x50
the div tag for that width is 130 so it should fit and the total width is 650 so 5 should fit in there ok,
if i use
position:relative;
left:-40px
in the #nav ul li bit it moves the first to the correct place but still leaves contact underneith.

Thought i was doing so well to

TIA

joeyjojo · 18 Dec 2006 at 15:10

Code:

* {
padding:0;
margin:0;
}
html {
height:100%;
}
body {
font-family: "Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
font-size:16px;
color:#000000;
background:#8BBAEE; 
height:100%;
}
#centre {
background:url(boarder.png) top center repeat-y;
margin-bottom:25px;
margin:0 auto;
width: 750px;
background-color:#AE9D74;
position: relative;
min-height: 100%; /* For Modern Browsers <strong>/
height: auto !important; /</strong> For Modern Browsers <strong>/
height: 100%; /</strong> For IE */
}
#wrapper {
width:650px;
padding:0 50px;
}
#content {
color:#000000;
background-color:#AE9D74;
width:650px;
}
#nav {
width:650px;
}
#nav ul{
list-style-type:none;
}
#nav ul li{
text-align:center;
display:inline;
float:left;
width:130px;
background:url("buttons copy.jpg");
}
#nav ul li a{
color:#000000;
text-decoration:none;
}
#nav ul li a:hover{
color:#000000;
text-decoration:underline;
}
#content-left {
width:650px;
}
#header { 
background-color:#D7CBAD;
color:#000000;
width:650px;
height:154px;
}
h2 {
clear:both;
text-align:center;
font:20pt "Maiandra GD","Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
font-weight:bold;
}
#footer {
width: 650px;
background: #AE9D74;
position: absolute;
bottom: 0 !important;
bottom: -1px; /* For Certain IE widths */
height: 25px;
color:#333;
font-family:"Maiandra GD","Arial Rounded MT Bold", "century gothic", verdana, tahoma, sans-serif;
font-size:8px;
text-align:center;
}
a:link {
color:#8BBAEE;
text-decoration:underline;
}
a:visited {
background:#AE9D74 ; 
color:#8BBAEE;
text-decoration:none;
}
a:hover {
color:#8BBAEE;
background:#F5F4F1;
}

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="NLN Home"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="Matthew Hargraves"/>
<title>Critical Thinking</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="centre">
<div id="wrapper">
<div id="header"><img src="Top banner.jpg" alt="Critical Thinking"/></div>
<div id="content">
		<div id="nav">
		<ul>
		<li><a href="one.htm">Home</a></li>
		<li><a href="two.htm">AS</a></li>
		<li><a href="two.htm">A2</a></li>
		<li><a href="two.htm">Login</a></li>
		<li><a href="two.htm">Contact</a></li>
		</ul>
		</div>
<h2>Critical Thinking</h2>
	<div id="content-left">
		<a href="file:///c|/documents%20and%20settings/mhargraves/desktop/photoshop/nln.html">This here will be a link</a> but this here will be normal text
	</div>	
  	<div id="footer">
		Footer
	</div>
</div>
</div>
</div>
</body>
</html>

Nice design that. You need to fiddle with padding here and there. Can you post a screenshot with the images, I'd like to see how it looks.

Solaris · 18 Dec 2006 at 15:11

I recommend changing the name of this post......i keep thinking its about counter strike source rather than cascading style sheet......me and my god-damn gaming addiction

hargi · 18 Dec 2006 at 16:21

screenshot with what images? sorry
this is what happened when i used your code

Which gets the nav all on the top line but moves the layout all to the left, and get rid of the thing been a full page.

sorry about this joeyjojo

joeyjojo · 18 Dec 2006 at 20:30

An IE6 bug sadly. Works nicely in Firefox, Opera and IE7.

hargi · 19 Dec 2006 at 09:48

Thanks Jojo id have still been trying to sort that out in the nav section im using

Code:

#nav ul li{
text-align:center;
display:inline;
float:left;
width:130px;
height:50px;
background:url("buttons copy.jpg");
padding-top:0.50em;
}

To try to get the text centered in middle ( vertically ) in the button when i use the padding-top:0.50em; it puts the text in the right place but the button background also starts to repeat

joeyjojo · 19 Dec 2006 at 10:23

Don't use em imo, don't see the point.

Code:

#nav ul li{
text-align:center;
display:inline;
float:left;
width:130px;
height:50px;
background:url("buttons copy.jpg");
padding-top:17px;
line-height:16px;
}

17 + 16 + 17 = 50px