Need fireworks advice

Hi guys I have a real problem here.

I’m a graphic designer (print, university) who landed a job as a content officer a while back, and I’ve been learning heaps about HTM<l and a bit of CSS, and when I’ve found time I’ve been bringing my skills up. I even have a wordpress site (own domain) where I can muck around.

Anyway I’ve been working on an identity (logo, bus card, signage) for a friend for no pay for sometime (don;t ask) and I told them I would do their website.

I was one of those guys who sliced up sites in image ready and used dream weaver to make my site, and I was using this site to construct a basic css site.

Anyway, I did my layout, she liked it, then promptly had a baby (well my partner did).

The little tacker is 7 days old, and for some crazy reason she (friend?) is asking me to make the site as her store opens soon.

She said she was thankful for my work, but if I could not do it would I mind her taking it somewhere else.

Inside I don’t want to do that, I need this site as an example of my work, and all of the branding is mine. Also I spent ages on the template and have had really good feedback, I don;t want that work to go to waste.

Which leads me to my question.

I know exporting css from fireworks is bad practice, but can I get away with it? She actually offered me a little bit of money (finally) which I’ve just at, due to things being really, really tight around here.

I guess I’m after a mentor, someone who can take a look at my code. It is a very basic site, I just wanted to use slices until I made the whole things in CSS and HTMl from scratch, however I have most things as Background images and I think I have a solid template to work from now that I’s sliced up and I have it in dream weaver.

I already know most of the fundamentals, I just need a hand. I thinking I can put two hours a day in have it by new years, It is a really basic site.

So please don;t flame me for the Fireworks thing, just need some advice so I can get it going and then rework it all when things calm down.

In return I can come and help others or something, I don’t know.

Thanks

Not the best time of year to come under stress.

In seeking a mentor, do you mean someone to provide free private help, away from Sitepoint? I think you’d do better to keep it public. It’s possible you may get roasted a little (though Sitepoint is the most civil forum I know of) but it’s worth the pain, and you’ll benefit from a wider range of experience.

keeping it public is fine. I can just post questions here as they arise?

Ideally, I would like to provide a cms, using wordpress. The client wants to have a landing page (image supplied already) that she update.

At this stage, I may give her filzezilla and show her how to upload the new images (and tell her the size she needs to have the image).

Anyway, I’ll post questions here.

  1. I currently have my header and an effect with gradient as a background image. However, I sliced it up into different bits. I have heaps of divs that are bg images. Would it be better to have the entire background as one background div?

  2. I have a div (that is an image) in the middle of the page. I want to use this as a text box. Do I need to make another div over the top of this?

Let me clean it up a bit and I’ll post the code. Thank you Vic

  1. I have a nav bar with some images I made to swpa with mouse over.

When exporting (css and images) out of fireworks ( I used the swap image function) It discards the hotspots and behaviours.

I wish it would let me export HTMl ,css and images, but it seems to be only css and images, or HTML and images.

I don’t want to slice each nav option up as I’ll end up with heaps of little slices.

halp!

oh I’ll mark things off as I smash through Google.

IMHO, just say no to Adobe… everything… Well, except photoshop, though really you’re hitting up against the #1 mistake people building websites make.

You drew a pretty picture instead of building a website… Which is effectively putting the cart before the horse – completely back-assward.

Even when I’m stuck working from someone’s PSD (which as a rule I don’t do) my approach is to first create the content of the page as plaintext – then you mark up the text using semantic HTML to say what that content IS with no regard for the final Screen, print or other media appearance… THEN you use CSS to create the layout, then and ONLY then does one start up the goofy paint program to make the graphics to hang on the layout; most of the time for me the PSD someone hands me being next to useless in that regard anyhow with my having to redraw EVERYTHING to work with the common image replacement, sliding doors and other tiling background image methods.

To me when you say “I did the layout” that should mean you have HTML and CSS done… if not, you’ve gone about it ALL WRONG.

You want, I could take a look at the image you have, and give you a rough idea of what’s involved and what is viable on a website and what isn’t, as well as what steps to take.

I thought one of the benefits to using CSS was that you could design a website to look the way you wanted?

What about this?

I agree with you though. The tyrouble this client (friend turned client) is very fusyy and has been really hard to deal with. I’ve got a concept that she likes, know I need to make it work that way.

I would love to have some sliding doors in there and funnily enough, some JQuery (signature noted).

At this stage though, I want to make it is easily as possible so that it is up there. Later, I can try and intergrate the whole thing with a CMS and make it up proerly.

There is iff so little content on this website it’s not funny. I got her to write the copy, and I have an image for the landing page to use. The gallery will have a coming soon sign’

But before I can put that content in there, I need the divs, and I have most of the slices as background images right now.

I’m still having trouble with fireworks, but it was a simnple problem and should be fixed. I’ll post code soon.

In the meantime, here is the image for the home page:

Uploaded with ImageShack.us

Thanks you Death any hep is greatly appreciated.

I just want to note that I know this is not the right way to go about things.

My slices have heaps of unnecessary divs, I know.

(ther is no meta yet, and

My style sheet is in the same directory as the index page for now.
Here is the HTML (not sure how to do that funky little trick where you have an embedded doc)

<!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 http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>GS sliced 5</title>
<link rel=“stylesheet” type=“text/css” href=“./GS sliced 4.css” media=“all” />
<!–[if IE]>
<style type=“text/css” media=“all”>.borderitem {border-style:solid;}</style>
<![endif]–>
</head>

<body>

<div id=“main”>
<img src=“images/logo.jpg” id=“logo” alt=“” />
<br class=“clearfloat” />
<img src=“images/navbar.jpg” id=“navbar” alt=“” />
<br class=“clearfloat” />
<img src=“images/GS sliced 4_r3_c1.jpg” id=“GS_sliced_4_r3_c1” alt=“” />
<div id=“colwrap1”>
<img src=“images/Home.jpg” id=“Home” alt=“” />
<img src=“images/GS sliced 4_r4_c3.jpg” id=“GS_sliced_4_r4_c3” alt=“” />
</div>
<img src=“images/GS sliced 4_r3_c4.jpg” id=“GS_sliced_4_r3_c4” alt=“” />
<div id=“colwrap2”>
<img src=“images/News.jpg” id=“News” alt=“” />
<img src=“images/GS sliced 4_r5_c7.jpg” id=“GS_sliced_4_r5_c7” alt=“” />
</div>
<img src=“images/GS sliced 4_r3_c8.jpg” id=“GS_sliced_4_r3_c8” alt=“” />
<div id=“colwrap3”>
<img src=“images/Gallery.jpg” id=“Gallery” alt=“” />
<img src=“images/GS sliced 4_r6_c9.jpg” id=“GS_sliced_4_r6_c9” alt=“” />
</div>
<img src=“images/GS sliced 4_r3_c10.jpg” id=“GS_sliced_4_r3_c10” alt=“” />
<div id=“colwrap4”>
<img src=“images/Contact.jpg” id=“Contact” alt=“” />
<img src=“images/GS sliced 4_r5_c11.jpg” id=“GS_sliced_4_r5_c11” alt=“” />
</div>
<img src=“images/GS sliced 4_r3_c12.jpg” id=“GS_sliced_4_r3_c12” alt=“” />
<br class=“clearfloat” />
<img src=“images/Concept.jpg” id=“Concept” alt=“” />
<br class=“clearfloat” />
<div id=“leftmain”>
</div>
<div id=“colwrap5”>
<img src=“images/Gmain.jpg” id=“Gmain” alt=“” />
<img src=“images/GS sliced 4_r9_c2.jpg” id=“GS_sliced_4_r9_c2” alt=“” />
<div id=“GS_sliced_4_r9_c5”>
</div>
<br class=“clearfloat” />
</div>
<div id=“GS_sliced_4_r8_c6”>
</div>
<br class=“clearfloat” />
</div>

</body>
</html>

CSS

body {
background-color: #ffffff;
margin:0px;
padding:0px;
}
.p {
margin:0px;
padding:0px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
color: inherit;
line-height: inherit;
vertical-align: top;
}
p {
padding-top:0px;
margin-top:0px;
}
img {
border:0px;
}
div {
margin:0px;
padding:0px;
font-family:verdana; font-size:12px;
}
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
height:0px;
}
a:link, a:visited{
COLOR:inherit;
text-decoration:inherit;
}
#main {

width:960px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;

}
#logo {
margin-left:0px;
margin-top:0px;
width:960px;
height:148px;
margin-bottom:0px;
float:left;
display:inline;

}
#navbar {
margin-left:0px;
margin-top:0px;
width:960px;
height:20px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r3_c1 {
margin-left:0px;
margin-top:0px;
width:585px;
height:32px;
margin-bottom:0px;
float:left;
display:inline;

}
#colwrap1 {
float:left;
width:37px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
#Home {
margin-left:0px;
margin-top:0px;
width:37px;
height:10px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r4_c3 {
margin-left:0px;
margin-top:0px;
width:37px;
height:22px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r3_c4 {
margin-left:0px;
margin-top:0px;
width:45px;
height:32px;
margin-bottom:0px;
float:left;
display:inline;

}
#colwrap2 {
float:left;
width:35px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
news {
margin-left:0px;
margin-top:0px;
width:35px;
height:11px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r5_c7 {
margin-left:0px;
margin-top:0px;
width:35px;
height:21px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r3_c8 {
margin-left:0px;
margin-top:0px;
width:53px;
height:32px;
margin-bottom:0px;
float:left;
display:inline;

}
#colwrap3 {
float:left;
width:44px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
#Gallery {
margin-left:0px;
margin-top:0px;
width:44px;
height:13px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r6_c9 {
margin-left:0px;
margin-top:0px;
width:44px;
height:19px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r3_c10 {
margin-left:0px;
margin-top:0px;
width:41px;
height:32px;
margin-bottom:0px;
float:left;
display:inline;

}
#colwrap4 {
float:left;
width:48px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
#Contact {
margin-left:0px;
margin-top:0px;
width:48px;
height:11px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r5_c11 {
margin-left:0px;
margin-top:0px;
width:48px;
height:21px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r3_c12 {
margin-left:0px;
margin-top:0px;
width:72px;
height:32px;
margin-bottom:0px;
float:left;
display:inline;

}
#Concept {
margin-left:0px;
margin-top:0px;
width:960px;
height:157px;
margin-bottom:0px;
float:left;
display:inline;

}
#leftmain {
margin-left:0px;
margin-top:0px;
width:150px;
height:643px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/leftmain.jpg);
overflow:hidden;

}
#colwrap5 {
float:left;
width:496px;
margin-top:0px;
margin-left:0px;
border: 0px solid #f0f0f0;

}
#Gmain {
margin-left:0px;
margin-top:0px;
width:496px;
height:597px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r9_c2 {
margin-left:0px;
margin-top:0px;
width:495px;
height:46px;
margin-bottom:0px;
float:left;
display:inline;

}
#GS_sliced_4_r9_c5 {
margin-left:0px;
margin-top:0px;
width:1px;
height:46px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/GS%20sliced%204_r9_c5.jpg);
overflow:hidden;

}
#GS_sliced_4_r8_c6 {
margin-left:0px;
margin-top:0px;
width:314px;
height:643px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/GS%20sliced%204_r8_c6.jpg);
overflow:hidden;

}

Good news is I have it working in dreamweaver.

I could not stop thinking about this last night, I have all of the fundamentals I just need to learn the fundamentals of making divs from scratch, and as Death said mark it up beforehand.

I can place HTML code within a div, I forgot.

All of those slices are annoying. The stuff I’ve not named are slices placed in by fireworks. I thought I might be able to get away with it placing the nav items in the correct position. really, I need to float them within the main nav box.

No love?

Drop the slice and dice approach. The results may look OK in Dreamweaver but will have the flexibility and durability of a glass jigsaw - with even small adjustments painful to execute. Getting to grips with HTML and CSS will pay off. You will have a real site, rather than a splintered picture of one, and it will translate more effectively into Wordpress or a CMS.

Importantly for your situation, you are far more likely to get help here if it’s clear you’re determined to get the job done right.

The attached HTML is loosely based on generated body markup from a Wordpress 3 TwentyTen theme page, in a basic XHTML 1.0 Strict document. It may help a little having elements of an existing theme when translating to WP. It’s stripped down but provides a layout with meaningfully named ids and classes, and probably enough hooks on which to hang your design. Valid HTML and CSS, tested in Firefox 3.6.13, Safari 5.0.3, IE8/7/6/5.5, Opera 10.6.3.

The layout can be divided into two main components:

#header - contains the topmost elements for the branding and navigation

#main - the main content of the page. Multiple nested divs that can provide styling hooks. Have included #primary side content.

These are both contained within #wrapper.

See the embedded CSS for comments.

The small text in the “GIRL SPIRIT reveals your true beauty” box is rather small and hard to read. If the text has significance then it should appear as text rather than in an image, or be masked using an image replacement technique such as Gilder Levin (though the use here of a transparent background may make that problematic).

The glow.png background image used ye olde pattern dither with 12 colours. I’m sure you’ll get better results but try to keep the filesize down.

Sorry, out of time!

You’ll need to wait a while for the attachment to be approved.

* {  /* crude margin and padding reset for all elements - investigate reset css */
	margin:0;
	padding:0;
	}

body {
	background: #21192C;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
	width: 960px;
	margin:0 auto 20px;
	border:1px #7D54AD solid;
	border-top-width:0;
}

#header {
	height:199px; /* target height less 1px padding */
	padding-top:1px; /* allows margin of child element to collapse */
	background:#370389 url(images/banner.jpg) no-repeat;
	position:relative; /* enables #nav to position in relation to #header i.e. bottom right */
}

a#site-title { /* link to Home positioned over circular logo */
	position:relative;  /* use of top margin would push #header down from top of viewport */
	top:30px;
	display: block; /* enables width and height to be applied */ 
	width: 150px;
	height:150px;
	margin: 30px auto 0 170px;
	text-indent:-999em; /* text offscreen */
}

.screen-reader-text { /* accessibility feature enabling screen reader users to jump to content */
	left: -9000px; /* positions the link outside the viewport */
	position: absolute;
}

#nav {  /* id applied to the ul element */
	margin-right:100px;
	position:absolute; /* will position relative to the boundaries of #masthead, which has position:relative; */
	bottom:0;
	right:0;
}	

#nav li {
	display:inline;
}

#nav li.current_page_item a { /* current page menu item */
	background: #342855;
}

#nav a, #nav a:visited {
	float: left;
	height:52px; /* matches height of black bar in banner.jpg */
	line-height:52px; /* ditto and for equal vertical alignment */
	background:#000; /* if images are not displayed white text will still show on black */
	color:#fff;
	text-decoration:none;
	padding:0 1em;
}

#nav a:hover, #nav a:active {
	background: #4131B0;
}

#main {
	background:#3E3053 url(images/glow.png) top left no-repeat; /* image is transparent png - IE6 will need fix */
	height:600px; /* temp for demo - remove when content is added */
}

#container {
	float:left;
}

.blurb { /* the box above content */
	margin:40px auto 20px 150px;
	border:1px #7D54AD solid;
	background: url(images/blurb_bg.png); /* image is transparent png - IE6 will need fix */
}

#content {
	width:500px;
	height:400px; /* temp for demo - remove when content is added */
	background: url(images/content_bg.png); /* image is transparent png - IE6 will need fix */
	margin-left:150px;
	border:1px #7D54AD solid;
}

#primary {
	float: right;
	display:inline; /* IE6 doubled margin bug */
	width:220px;
	margin:40px;
	zoom:1;
}

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Girl Spirit</title>


<!-- below is a conditional comment enabling IE6 and earlier to render transparent png backgrounds. Others browsers ignore it -->

<!--[if lte IE 6]>
<style type="text/css" media="screen">
.blurb {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/blurb_bg.png',sizingMethod='scale');
	background:none;
}

#content { 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/content_bg.png',sizingMethod='scale');
	background:none;
}

</style>	
<![endif]-->

</head>

<body>

<div id="wrapper">

	<div id="header">

		<a id="site-title" rel="home" title="Girl Spirit" href="http://domain.com/">Girl Spirit</a>

		<div class="screen-reader-text">
			<a href="#content" title="Skip to content">Skip to content</a>
		</div>

		<ul id="nav">
			<li class="current_page_item"><a href="index.html">Home</a></li>
			<li><a href="news.html">News</a></li> 
			<li><a href="gallery.html">Gallery</a></li> 
			<li><a href="contact.html">Contact</a></li>
		</ul>

 	</div><!-- #header -->

	<div id="main">

		<div id="container"> 

			<img class="blurb" src="images/blurb.png" alt="Girl Spirit reveals your true beauty" />

			<div id="content">
				<h1>Heading 1</h1>
				<p>Text</p>
			</div><!-- #content -->

		</div><!-- #container --> 

		<div id="primary">
			<h2>Side content</h2>
		</div><!-- #primary -->

	</div><!-- #main -->

</div><!-- #wrapper -->

</body>
</html>

Thank you so much for you your help. Just so we are clear, I am really determined to do this properly, I want to build solid sites and I have a bit of a passion for accessible sites for the disabled (I’ve attended accessibility courses run by Vision Australia). My job involves creating accessible content from PDFs and .docs files on a CMS. And while I call styles heets, and write basic markup, it is all very basic stuff and I’m missing the big picture. My jobs repetitive and simple, but requires good attention to detail, and I design banners and stuff occasionally.

I only wanted to help my friend and keep this site (not hand it over) so I can use it as an example of my work so one day when I’m good enough I can do more. I am upset that she asked me while she knew I had the baby, I just need to keep it though.

For the record the logo is her family’s emblem and Algerian is her choice.

I was only looking for a temporary solution to get something up so I can focus on helping River (bub) and my partner.

You have gone to an awful amount of trouble so the lest I can do is try and make it work.

I understand the concepts involved, I can divs you have created and understand the you have used padding to float the components around to their correct spots.

You are right in assuming there is more content to be added on the right hand side, I’m impressed. I am hoping to get a RSS feed, twitter stream or perhaps a gallery which flips
through. Although this was in my concept I’ve not put it in here as I’ve been given very little content.

It is worth mentioning that she has given me an image to use as a landing page, she had a photo shoot done for this. So that image will be my landing page and I’ll have to have an ‘Enter here’ link on that page.

Question:

  1. With the Nav bar list items, have they been styled to appear horizontal across the page? They wont be images but text yeah?

I get confused with that sometimes.

It is here yeah?

#nav li {
display:inline; ( Inline means there is text in the HTML code to display this?)
}

#nav li.current_page_item a { /* current page menu item */
background: #342855; (not sure what this means)
}

#nav a, #nav a:visited {
float: left;
height:52px; /* matches height of black bar in banner.jpg /
line-height:52px; /
ditto and for equal vertical alignment /
background:#000; /
if images are not displayed white text will still show on black */
color:#fff;
text-decoration:none;
padding:0 1em;
} ( does this mean the lines will be displayed also here?)

#nav a:hover, #nav a:active {
background: #4131B0; (this changes the colour when floating over yeah?)

  1. The style sheet had no p tag styling or heading etc, I assume I’ll have to add this in yeah?

  2. I note this:

a#site-title { /* link to Home positioned over circular logo /
position:relative; /
use of top margin would push #header down from top of viewport /
top:30px;
display: block; /
enables width and height to be applied /
width: 150px;
height:150px;
margin: 30px auto 0 170px;
text-indent:-999em; /
text offscreen */

Does this push the logo down so the div sits on top of the one below it?

In any case, until it’s approved I can’t see if you have cut the images out. I would really like to take them out myself to. If you have cut the images out, it will help me to see what you have done so that I can repeat it.

In the meantime, I’m going to commit to doing at lest one basic css tutorial a day (or work towards it depending on bub and xmas), to so that I am truly grateful for your help.

Thank you again.

Oh BTW I’ve set the basics up in DW, so I have an images folder a css folder and my index.html page above these.

I thought there should be some code in the head tags to call the stylesheet

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

&lt;title&gt;Girl Spirit&lt;/title&gt;

<!-- below is a conditional comment enabling IE6 and earlier to render transparent png backgrounds. Others browsers ignore it –>

<!–[if lte IE 6]>
<style type=“text/css” media=“screen”>
.blurb {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/blurb_bg.png’,sizingMethod=‘scale’);
background:none;
}

Content {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/content_bg.png’,sizingMethod=‘scale’);
background:none;
}

</style>
<![endif]–>

</head>

is that where is goes?

or is there a php command in there or something because of wordpress?

Ok so I have this ATM

Uploaded with ImageShack.us

Given the design the only HTML you really need would be something ~similar~ to the below. Everything else can be achieved with CSS without introducing presentational mark-up. There may be a better way to mark-up the “sell-line” probably even a better name for it. Though it seems a little unconventional thus a little difficult to name passed on an established pattern.

Also, some will surely disagree with my decision to make the logo an img, rather than h1. From my perspective though logos are not part of the page hierarchy, thus it is fundamentally incorrect to treat them as such with the common h1 approach. The SEO wizards may disagree but that is the way I see it from a purely fundamental stand-point concerning semantics.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Girl Spirit</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

	<div id="container">
	
		<img id="logo" src="logo.png" alt="Girl Spirit" width="x" height="y">
	
		<ul id="nav-main">
			<li><a class="current" href="#">Home</a></li> <!-- current used to change style of current page link -->
			<li><a href="#">News</a></li>
			<li><a href="#">Gallery</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		
		<div id="sell-line">
			<p>Cool &amp; sexy, casual, wild &amp; innocent</p>
			<p>Confidence of various kinds of beauty in girls</p>
			<p><strong>Girl Spirit</strong> Reveals your true beauty</p>
		</div>
		
		<div id="main-content">
			<!-- requested page content goes here -->
		</div>
	
	</div>

</body>
</html>

yeah the sell line is the my friend’s choice. It would be better as an image due to her wanting Algerian as part of it (I tried to talk her out of using that).

Hmm yeah I’m not professing to being a know at all, clearly I am hear asking for help and bleeding my heart out. However I agree with the logo. Perhaps it has something to do with the Wordpress compatibility? In saying that, I can’t see where the logo is in a H1 in Vic’s code.

I’m confused now, are we going to be using the design I made or a HTML representation of it? Sorry just asking. For example Vic, have you included the small dip below the logo, and does the black line extend across?

It’s hard to see as the Zip is still pending.

hey

I think it makes pretty good sense. and I can see Deaths point.

I only really need to grab two transparent pngs + the logo and contain them in the divs yeah?

Yes.
No. Basically, elements are either Block: taking up the full width available and appearing on their own line, or Inline: taking up only the width they need and not forcing a new line above or below. The default for &lt;li&gt; (list item) is block, which would display each one it's own line, so by setting display:inline we override the default and cause list items to appear side by side on a single line.

See w3.org: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Wiki Block: http://en.wikipedia.org/wiki/HTML_element#Block_elements
Wiki Inline: http://en.wikipedia.org/wiki/HTML_element#Inline_elements

#nav li.current_page_item a is the selector that determines where these style rules are to be applied. "#nav" is the &lt;ul&gt; (unordered list) element that has id="nav", "li.current_page_item" is the &lt;li&gt; that has class="current_page_item", and "a" is the &lt;a&gt; (anchor) element. Selectors enable us to target elements precisely.

"background" applies the background property to the selected element.
#342855 is the HEX colour value being applied.
These are simply styles applied to the anchors in the menu.
Right.
Correct. I've not provided a full list of styles. Add them as you need them.
It has no effect on any other element. It just provides a clickable area around the logo.
I guess you'll have seen these by now.

Tip: use Select Syntax when including chunks of code in a post.

The CSS I provided is embedded within index.html. To move it to a separate stylesheet, cut everything that appears between

<style type=“text/css” media=“screen”> and </style> and paste into a .css file. Link to the external file beneath the <title> element with

<link rel=“stylesheet” href=“css/filename.css” type=“text/css” media=“screen” />

Remove the <style…></style> tags.

Leave the conditional comment in index.html