Web Design Forums

pat · 25-08-2005, 07:19

Starting this website, in css/xhtml. I've done the single column layout with a header and footer quickly, and have been concentrating on the nav bar in the header - got it all positioned with percentage margins, and then i've tried to stick in a tiled background image (a strip of rectangle with drop shadow either side that repeats down the page).
To get the bg image alligned with the nav bar/header, all i could do was literally move the gif along a few pixels in photoshop, then re-export.

This means it all looks fine in ie, but out of place in FF. Any better way?
p.s widths of the grey bg aren't right on the firefox scrnshot because i cut it out poorly.

emil · 25-08-2005, 07:24

you have horizontal scrollbars in ie as well...
any chance you could post a link? or at least the code?

pat · 25-08-2005, 07:28

Code:

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
<html>
<head>
<title>exp.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style typ="text/css">

body {
	margin: 0;
	padding: 0;
	background: #ccc url(bgtile.gif) repeat-y 50% 0;
	}
	
#header {
	height: 47px;
	width: 46%;	
	margin-right: 29%;
	margin-left: 29%;
	margin-top: 0;
	background: url(headerbg.gif) top left no-repeat;
	}
	
#content {
	margin-right: 30%;
	margin-left: 30%;
	width: 40%;
	}
	
#footer {
	margin-right: 30%;
	margin-left: 30%;
	padding: 20px;
	background: #ccc;
	}
	
#nav {
	margin: 0;
	padding: 0;
	height: 41px;
	list-style: none;
	display: inline;
	overflow: hidden;
	}
	
#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	}
	
#nav a {
	float: left;
	padding: 41px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:20px; /* for IE5/Win only */
	}
	
#nav a:hover {
	background-position: 0 -41px;
	}
	
#nav a:active, #nav a:selected {
	background-position: 0 -82px;
	}
	
#thome a {
	width: 47px;
	background: url(home.gif) top left no-repeat;
	}

#tcourse a {
	width: 58px;
	background: url(course.gif) top left no-repeat;
	}

#twork a {
	width: 96px;
	background: url(work.gif) top left no-repeat;
	}
	
#tstudents a {
	width: 73px;
	background: url(students.gif) top left no-repeat;
	}
	
#tresources a {
	width: 82px;
	background: url(resources.gif) top left no-repeat;
	}
	
#tcontact a {
	width: 66px;
	background: url(contact.gif) top left no-repeat;
	}
</style>
</head>

<body>

<div id="header">


<ul id="nav">
	<li id="thome"><a href="#" class="selected">Home</a></li>
	<li id="tcourse"><a href="#">Course</a></li>
	<li id="twork"><a href="#">Coursework Examples</a></li>
	<li id="tstudents"><a href="#">Students</a></li>
	<li id="tresources"><a href="#">Resources</a></li>
	<li id="tcontact"><a href="#">Contact</a></li>
</ul>

</div>

<div id="content"> <strong>CONTENT</strong>Lorem Ipsum is simply dummy text of 
  the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
  dummy text ever since the 1500s, when an unknown printer took a galley of type 
  and scrambled it to make a type specimen book. It has survived not only five 
  centuries, but also the leap into electronic typesetting, remaining essentially 
  unchanged. It was popularised in the 1960s with the release of Letraset sheets 
  containing Lorem Ipsum passages, and more recently with desktop publishing software 
  like Aldus PageMaker including versions of Lorem Ipsum. </div>

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

</body>
</html>

smallbeer · 25-08-2005, 07:32

a proper doctype would help. xhtml 4.01?

Code:

<!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" xml:lang="en" lang="en">
<head>
...

pat · 25-08-2005, 07:44

Cheers.

Here's it uploaded: LINK

Extra firefox problem - it doesn't seem to like the hover state, i do the rollovers with one image, with the three states on:

emil · 25-08-2005, 07:48

i'd stay out of the percentage margins.

emil · 25-08-2005, 08:03

try this

HTML Code:


<!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" xml:lang="en" lang="en">
<head>
<title>exp.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">

body {
	margin:0px;
	padding:0px;
	background: url(bgtile.gif) center repeat-y  #ccc;
	text-align:center; /*to align divs in center*/
}
div {text-align:left;} /*to reset text alignment in divs */

h2, p {margin:0px;} /*these are just to make everything stick together in ff */

#container {width:500px; margin:auto;} /*margin auto to align stuff in center*/
	
#header {
	height: 47px;
	background: #EEE; /*background just to see where everything goes */
	}
	
#content {
	background:#38A; /*background just to see where everything goes */
	}
	
#footer {
	padding: 20px;
	background: #123; /*background just to see where everything goes */
	}
	
#nav {
	margin: 0px;
	padding: 0px;
	height: 41px;
	list-style-type: none;
	}
	
#nav li {
	margin: 5px;
	padding: 0px;
	float:left;
	background:#C13;
	}
	
#nav a {
	padding: 41px 0 0 0;
	
	}
	
	
#thome a {
	width: 47px;
	background: url(home.gif) top left no-repeat;
	}

#tcourse a {
	width: 58px;
	background: url(course.gif) top left no-repeat;
	}

#twork a {
	width: 96px;
	background: url(work.gif) top left no-repeat;
	}
	
#tstudents a {
	width: 73px;
	background: url(students.gif) top left no-repeat;
	}
	
#tresources a {
	width: 82px;
	background: url(resources.gif) top left no-repeat;
	}
	
#tcontact a {
	width: 66px;
	background: url(contact.gif) top left no-repeat;
	}
</style>
</head>

<body>
<div id="container">

	<div id="header">

		<ul id="nav">
			<li id="thome"><a href="#" class="selected">Home</a></li>
			<li id="tcourse"><a href="#">Course</a></li>
			<li id="twork"><a href="#">Coursework Examples</a></li>
			<li id="tstudents"><a href="#">Students</a></li>
			<li id="tresources"><a href="#">Resources</a></li>
			<li id="tcontact"><a href="#">Contact</a></li>
		</ul>
	</div>

	<div id="content"> 
		<h2>CONTENT</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type   and scrambled it to make a type specimen book. It has survived not only five   centuries, but also the leap into electronic typesetting, remaining essentially   unchanged. It was popularised in the 1960s with the release of Letraset sheets   containing Lorem Ipsum passages, and more recently with desktop publishing software  like Aldus PageMaker including versions of Lorem Ipsum. 
	  </p>
  	</div>

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

</div>
</body>
</html>

emil · 25-08-2005, 08:20

for a tri-state single image try this

Code:

<style type="text/css" media="screen">

#nav a {text-decoration:none;} /*to remove the blue line issue in FF*/

#home {text-indent:-3000px;}
a#home {display:block; width:47px; height:41px; background:url(pat/home.gif) left top no-repeat;} /*normal state;*/
a#home:hover { background:url(pat/home.gif) right top no-repeat;} /*hover state move everything to the left;*/
a#home.selected { background:url(pat/home.gif) left bottom no-repeat;} /*when .selected class applied align to bottom left*/
</style>

HTML Code:


		<ul id="nav">
			<li><a id="home" href="#" class="selected">Home</a></li>
		</ul>

and use an image similar to the one in the attachment

pat · 25-08-2005, 08:42

christ, cheers emil, ill get going on that. owe you one.

emil · 25-08-2005, 08:44

pat · 25-08-2005, 11:41

LINK

right then, had a large break, just come back to it and sorted it out, but i can't get my buttons to line up horizontally. i thought it might be sommat to do with display: block; so i tried doing display: inline; and the all disappeared

anyone?

smallbeer · 25-08-2005, 11:45

display the list items inline. then float the links with display block.

Code:

li {
display:inline;
}

li a {
float: left;
display: block;
}

integrated with the rest of your code obviously.

pat · 25-08-2005, 18:17

I'm sorry to be such a useless cockswab, but i can't for the life of me get my navigation bar to line up with my background, or my header to fit the nav bar perfectly either

LINK

emil · 26-08-2005, 02:11

I don't see anything wrong.

25-08-2005, 07:19	#1 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,860	ie and ff probs Starting this website, in css/xhtml. I've done the single column layout with a header and footer quickly, and have been concentrating on the nav bar in the header - got it all positioned with percentage margins, and then i've tried to stick in a tiled background image (a strip of rectangle with drop shadow either side that repeats down the page). To get the bg image alligned with the nav bar/header, all i could do was literally move the gif along a few pixels in photoshop, then re-export. This means it all looks fine in ie, but out of place in FF. Any better way? p.s widths of the grey bg aren't right on the firefox scrnshot because i cut it out poorly. Attached Thumbnails __________________

25-08-2005, 07:44	#5 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,860	Cheers. Here's it uploaded: LINK Extra firefox problem - it doesn't seem to like the hover state, i do the rollovers with one image, with the three states on: __________________

25-08-2005, 08:42	#9 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,860	christ, cheers emil, ill get going on that. owe you one. __________________

25-08-2005, 11:41	#11 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,860	LINK right then, had a large break, just come back to it and sorted it out, but i can't get my buttons to line up horizontally. i thought it might be sommat to do with display: block; so i tried doing display: inline; and the all disappeared anyone? __________________

25-08-2005, 18:17	#13 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,860	I'm sorry to be such a useless cockswab, but i can't for the life of me get my navigation bar to line up with my background, or my header to fit the nav bar perfectly either LINK __________________

25-08-2005, 07:24	#2 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000	you have horizontal scrollbars in ie as well... any chance you could post a link? or at least the code?

25-08-2005, 07:32	#4 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	a proper doctype would help. xhtml 4.01? Code: <!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" xml:lang="en" lang="en"> <head> ...

25-08-2005, 07:48	#6 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000	i'd stay out of the percentage margins.

25-08-2005, 08:44	#10 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000

25-08-2005, 11:45	#12 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	display the list items inline. then float the links with display block. Code: li { display:inline; } li a { float: left; display: block; } integrated with the rest of your code obviously.

26-08-2005, 02:11	#14 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000	I don't see anything wrong.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search