Css layout help

hargi · 27 Oct 2008 at 13:32

sorry for a noob question about css.
Im just trying to make a simple layout similar to this

i want pinstriping round the outside, then a div at the top for the logo,
a navbar that i can use graphics in inderneth the logo the main content area,
and a footer.

How do i go about doing this

hargi · 27 Oct 2008 at 15:02

Cheers
i have got

Code:

<html>
<head>
<title> Tin Can Art </title>
<LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body>
<DIV id=container>
hello</DIV>
</body>
</html>

and

Code:

BODY {
	
	FONT: 0.9em mangal,  verdana, arial, sans-serif;
	COLOR: #000;
	BACKGROUND: url("stripe.png") #000000;
}

#container {
width:800px;
margin:0 auto;
background-color:#FFFFFF
}

Whys it not in the middle

I see it works in FF but not IE how do i get around this

hargi · 28 Oct 2008 at 12:19

Cheers.

I got this now
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>

  <title>Tin Can Art</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link href="style.css" rel="stylesheet" type="text/css" />

</head>


<body>
<div id=container>
<div id=logo>
<img src="logo copy.gif" alt=" Logo" >
</div>
<div id=logospace>
</div>
<div id=navbar>
<ul>
<li> Home </li>
<li> News </li>
<li> My Art </li>
<li> Events </li>
<li> Contact Me </li>
</ul>
</div>
<div id=content>
hello 
</div>
<div id=footer>
hello
</div>
</div>
</body>
</html>

and CSS

Code:

body  {
	color: #000;
	font: 0.9em verdana, arial, sans-serif;
	background: #000000 url("stripe.png") repeat;
	text-align: center;
	min-width: 800px;
}
/* container is the box for the middle all div tags should be nested in here */
#container {
width:800px;
position:relative;
margin-left:auto; 
margin-right:auto;
background-color:#000;
}
/*logo creates the div tag for the logo to fit in */
#logo {
float:left;
width:160px;
height:170px;
background-color:#000;
}
/*logospace creates the div for the black space on the right of the logo just to fil the row */ 
#logospace{
float:right;
width:640px;
height:170px;
background-color:#000000;
}

/*navbar */
#navbar{
float:left;
height:80px;
background-color:#CC0099;
}

	#navbar ul li{
	width:160px; 
	[COLOR="Red"]display:inline;
	text-decoration:none;
	list-style-type:none;[/COLOR]
	text-align:center;
	}

	
/*main content. clear gets rid of floating eliments.*/
#content{
clear: both;
height:auto;
background-color:#aa0099;
}
/*footer*/
#footer {
	clear: both; 
	 width: 800px;
	  color: #888; 
	  padding-top: 20px; 
	  text-align: right;
}

Applogies for the colours its just so i know where the divs are.
Just my nav list, is not displaying horizontaly and it still has bullit points in there. Even though i think in the CSS i have set it to no decoration and dispaly:inline.

What have i done wrong?

FOUND IT!!! need to name navbar all the same all the way through

hargi · 28 Oct 2008 at 14:08

Cheers this stuff is really helping me. I have tryed to comment my code better, and that margin thing solved a problem i was having with using background images in the navbar.

I was wondering how you would do this simpler

Code:

#navbar ul li{
float: left;
width: 160px;
height: 50px;
display: inline;
text-decoration: none;
line-height: 40px;
text-align: center;
background-image: url(bg1.png);
}

ul	{
	padding: 0;
	margin: 0;
}

#navbar ul li a{
float: left;
width: 160px;
height: 50px;
display: inline;
text-decoration: none;
line-height: 40px;
text-align: center;
background-image:url(bg1.png);
}
#navbar ul li a:hover{
float: left;
width: 160px;
height: 50px;
display: inline;
text-decoration: none;
line-height: 40px;
text-align: center;
background-image:url(bg2.png);
}

What im wanting to do is when the mouse goes over the link the back ground changes. i tried just using
#navbar ul li a:hover{
background-image:url(bg2.jpg);
}

but this didnt keep the image the correct size

hargi · 4 Nov 2008 at 08:30

Got the site up now http://www.tincanart.co.uk

But the black main container moves positions when theres pictures on the page can i stop this happening?

CSS

Code:

abody  {
	color: #000;
	font: 0.9em verdana, arial, sans-serif;
	background: #000000 url("stripe.png") repeat;
	text-align: center;
	min-width: 800px;
		}
/* container is the box for the middle all div tags should be nested in here */
#container {
	width: 800px;
	position: relative;
	margin-left: auto; 
	margin-right: auto;
	background-color: #000;
	}


/*logo creates the div tag for the logo to fit in */
#logo {
	float: left;
	width: 160px;
	height: 170px;
	background-color: #000;
	}
	
	
/*logospace creates the div for the black space on the right of the logo just to fil the row */ 
#logospace{
	float: right;
	width: 640px;
	height: 170px;
	background-color: #000000;
	}

/*navbar */
#navbar{
	width: 800px;
	}

#nav ul{
	list-style-type: none;
	}
/*sets the attributes for the navbar*/
#navbar ul li{
	float: left;
	width: 160px;
	height: 50px;
	display: inline;
	text-decoration: none;
	line-height: 40px;
	text-align: center;
	background-image: url(bg1.png);
	color: #000;
	font-family: forte, verdana, arial, sans-serif;
	font-size: 20px;
	line-height:50px;}
/*makes the navbar work properly keep in*/
ul	{
	padding: 0;
	margin: 0;
	}
/*navbar link needs to be similar to navbar*/
#navbar ul li a{
	float: left;
	width: 160px;
	height: 50px;
	display: inline;
	text-decoration: none;
	line-height: 40px;
	text-align: center;
	background-image:url(bg1.png);
	color: #fff;
	font-family: forte, verdana, arial, sans-serif;
	font-size: 20px;
	line-height:50px;}
/*navbar hover needs to be similar to link*/	
#navbar ul li a:hover{
	float: left;
	width: 160px;
	height: 50px;
	display: inline;
	text-decoration: none;
	line-height: 40px;
	text-align: center;
	background-image:url(bg2.png);
	color: #000;
	font-family: forte, verdana, arial, sans-serif;
	font-size: 20px;
	line-height:50px;}
	
/*main content. clear gets rid of floating eliments.*/
#content{
	clear: both;
	height: auto;
	background-color: #000;
	color: #fff;
	font-family: verdana, arial, sans-serif;
	font-size: 16px;
	padding-top:10px;
	padding-right:10px;
	}
/*class for images on homepage div*/
div.thumbnail
{
float:left;
margin: 10px;
width: 320px;
}

/* sets the properties for the images on home page*/
div.thumbnail img
{ 
margin-top:10px;
margin: 10px;
}

/*class for images on homepage div*/
div.gallery
{
float:left;
margin: 10px;
width:780px;
}

/* sets the properties for the images on art page*/
div.gallery img
{ 
float:left;
margin-top:10px;
margin: 10px;
width:400px;
height:300px;
}

div.gallery p 
{
margin: 0;
padding: 10px;
Padding-top: 110px;
}
 
.clear{
clear:left;
}

#content a {
	color: #46e0f1; 
	text-decoration: underline;
	text-align: right;
	}
#content a:visited {
	color: #46e0f1; 
	text-decoration: underline;
	text-align: right;
	}
#content a:hover {
	color: #46e0f1; 
	background-color: #fe4144;
	text-align: right;
	}
/*footer*/
#footer {
	  clear: both; 
	  width: 800px;
	  color: #888; 
	  text-align: right;
	}

#footer a {
	color: #46e0f1; 
	text-decoration: underline;
	}
#footer a:visited {
	color: #46e0f1; 
	text-decoration: underline;
	}
#footer a:hover {
	color: #46e0f1; 
	background-color: #fe4144;
	}

hargi · 4 Nov 2008 at 12:01

Cheers Tripnologist,

I found that there was some margins in there that wasnt needed.
Dont really know about em's bur that blog loogs good.

If you could tidy the nav up that would be wonderful. All i know is that it works

but im sure theres a neater way of doing it.