• 0

need help with website


Question

ok i'm making a website for a friend of mine and im having some serious problems...

i created the layout in photoshop and sliced it...

then i renamed the gif images accordingly to what they are...

now im tryin to create the div ids on the style sheet but i have no clue what im doing...can someone help me please I know im asking for a lot probably and its very time consuming...but if someone can at least direct me towards the right path ill be greatful...

Ill attach the page and images in a zip file...

TMS.zip

Link to comment
Share on other sites

Recommended Posts

  • 0

Hi I suggest you go to a professional PSD > HTML service. It will get the job done for you quicker and professionally.

P.S if you do this they will probably ask to slice the images themselves, your way would make it far more difficult than it needs to be.

Hope I helped :>

Link to comment
Share on other sites

  • 0

can someone help me pelase i cant seem to get the links.gif to appear so that im able to write the links on it....its driving me insane lol...theres something so stupid that im not doing right and cant seem to identify the problem...

Link to comment
Share on other sites

  • 0

If you're new to the whole slicing concept and then coding with XHTML/CSS, I definitely recommend you look at the links in another post of mine here.

That should help you out with what you should be doing and whatnot, as a start..

Link to comment
Share on other sites

  • 0

see slicing the layout is not the problem, ive done it many times and havent really ran into any difficulties....the problem im having now is getting the sliced images to display correctly on dreamweaver...i think im makin some mistakes on the css properties and cant realize what exactly is messing me up...

this is what i got so far

html { margin: 0px; }

body {

font: 10pt Verdana, Arial, Helvetica, sans-serif;

margin: 0px;

padding: 10px;

}

container {

width: 900px;

margin: 0 auto;

overflow: hidden;

}

#header {

height: 217px;

background image: url(images/banner.gif);

background-repeat:no-repeat;

background: #fff;

}

#headerbottom {

height: 30px;

width: 307px;

background-image: url(images/bannerb.gif);

background-repeat:no-repeat;

background: #FFF;

}

#nav {

list-style: none;

text-align: center;

background: url(images/links.gif) no-repeat right;

overflow: hidden;

float: right;

height: 30px;

}

#nav li a {

font-size: 7pt;

text-transform: uppercase;

float: left;

}

now the banner is showing properly....then im tryin to get a piece of the bottom of the banner to show on the left which i do have....then im tryin to get the links to appear right beside it and right beisde that another gif image...but its not workin out too well...hopefully what i wrote makes sense...

Link to comment
Share on other sites

  • 0

Ok first off, I took a look at your images and I will say that you have sliced your template quite poorly. For your design you do not need so many images. bannerb.gif, links.gif and linkside.gif could all be one image. infobox.gif, mainbox.gif and newsbox.gif are just plain white images so you don't even need those period. And that's just the start. In fact, if you utilize CSS3's border-radius, then the only image you would need is your header. But I digress, since you don't seem intent on changing your slicing, lets work with what you have. Here is a quick knock up I came up with to get you started. It's not tested in all browsers (only FF3.6 and IE8) and I did it fast so I may not have chosen the best approach for everything, but it should be enough to get you going.

If you have any questions about any part of the code, just ask. And if you found this helpful, feel free to vote me up :)

First the HTML

<div id="container">
	<div id="header">
		<img src="images/banner.gif" alt="TEK-MOR" />
		<img src="images/bannerb.gif" class="left" />
		<ul>
			<li>link1</li>
			<li>link2</li>
		</ul>
		<img src="images/linkside.gif" class="right" />
	</div>
	<div id="content">
		<img src="images/contentop.gif" />
		<img src="images/contentside.gif" class="left" />
		<div id="contentbody" class="left">
			<p>In here goes your content</p>
			<div id="footer">
				<img src="images/topfooter.gif" />
				<img src="images/footer.gif" />
			</div>
		</div>
		<img src="images/contentsideb.gif" class="right" />
	</div>
</div>

I know a lot of those images would have been better off used as background images but that would require some different slicing.. or a lot of empty div's.

Now the CSS

body {
	margin: 0;
	padding: 0;
	text-align: center;
}

#container {
	margin: 0 auto;
	padding: 0;
	width: 950px;
	text-align: left;
}

#header {
	background-color: #242424;
	overflow: hidden;
}

img {
	display: block;
}

.left {
	float: left;
}

.right {
	float: right;
}

#header ul {
	float: left;
	margin: 0;
	padding: 0;
	color: #fff;
	list-style-type: none;
}

#header ul li {
	float: left;
	margin: 10px 8px 0 8px;
	padding: 0;
}

#content {
	overflow: hidden;
}

#contentbody {
	width: 813px;
	height: 565px;
	position: relative;
}

#footer {
	position: absolute;
	bottom: 17px;
}

  • Like 2
Link to comment
Share on other sites

  • 0

Just realized I missed one image for the footer. It's too late to edit my post above so i'll just add the quick changes here.

HTML change

<div id="footer">

<img src="images/topfooter.gif" />

<img src="images/footer.gif" />

<img src="images/bottomfooter.gif" />

</div>

CSS change

#footer {

position: absolute;

bottom: 0px;

}

  • Like 1
Link to comment
Share on other sites

  • 0

oh thats awesoem dude works out perfectly....

just one more question...

notice how i had those 2 small content boxes for latest news and product info...

is there anyway u can tell me how i can do that...u dun have to do it urself i know im already asking for 2 much... but if you can show me your the man! lol

also if i wanted to put links on the bottom footer how can i do that?

thanks again all your help is appreciated!

Link to comment
Share on other sites

  • 0

I just did a browser compability in dreamweaver, and im getting a double float margin bug...i did some research on google on it and it says to use the _display hack...any idea on how i can fix it? never heard of this before?

Link to comment
Share on other sites

  • 0

oh thats awesoem dude works out perfectly....

just one more question...

notice how i had those 2 small content boxes for latest news and product info...

is there anyway u can tell me how i can do that...u dun have to do it urself i know im already asking for 2 much... but if you can show me your the man! lol

also if i wanted to put links on the bottom footer how can i do that?

thanks again all your help is appreciated!

There are a few ways you can do this. If you insist on using your slices, you can do this:

In the HTML replace <p>In here goes your content</p> with this:

&lt;div id="newsbox"&gt;
	&lt;div id="latestnews"&gt;
		&lt;p&gt;latest news goes here&lt;p&gt;
	&lt;/div&gt;
	&lt;div id="productinfo"&gt;
		&lt;p&gt;product info goes here&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

And add this to your CSS:

#newsbox {
	background: #ffffff url('images/topsmallcontent.gif') no-repeat top left;
	overflow: hidden;
}

#latestnews, #productinfo {
	float: left;
	margin-top: 50px;
}

#latestnews {
	background: #ffffff url('images/separator.gif') no-repeat top right;
	width: 359px;
	padding: 0 24px;
}

#productinfo {
	padding: 0 24px 0 8px;
	width: 374px;
}

Or, the way I would prefer would be without any images like this:

&lt;div id="newsbox"&gt;
	&lt;div id="latestnews"&gt;
		&lt;h4&gt;Latest News&lt;/h4&gt;
		&lt;p&gt;latest news goes here&lt;p&gt;
	&lt;/div&gt;
	&lt;div id="productinfo"&gt;
		&lt;h4&gt;Product Info&lt;/h4&gt;
		&lt;p&gt;product info goes here&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

#newsbox {
	border-top:1px solid #DBDBDB;
	overflow: hidden;
}

#latestnews, #productinfo {
	float: left;
	margin-top: 20px;
	width: 366px;
	padding-left: 20px;
}

#latestnews {
	border-right:1px solid #DBDBDB;
}

^^ Note: You would still need to style your h4's

also if i wanted to put links on the bottom footer how can i do that?

Make the following change to your HTML:

<div id="footer">

<img src="images/topfooter.gif" />

<div id="footerlinks">Links can go here</div>

<img src="images/bottomfooter.gif" />

</div>

And add this to your CSS:

#footerlinks {
	background-color: #CCE2ED;
	height: 23px;
	padding-top: 14px;
	/* height plus padding-top must equal 37px */
}

I just did a browser compability in dreamweaver, and im getting a double float margin bug...i did some research on google on it and it says to use the _display hack...any idea on how i can fix it? never heard of this before?

I'll look this up in a minute and get back to you. One thing I picked up on quickly was that float: left; in #header ul is completely unnecessary and can be removed (don't know why I had that there to begin with). That might be the cause of the problem, it might not. I know I have had hella pain's trying to tame float's in IE6 before. I'll get back to you if I figure out anything else with regards to this problem.

what u guys think of it so far? let me know both good and bad lol

Tek-Mor

Nice improvement on the nav. Looks much better. As well as the industrial pic.

Link to comment
Share on other sites

  • 0

I just did a browser compability in dreamweaver, and im getting a double float margin bug...i did some research on google on it and it says to use the _display hack...any idea on how i can fix it? never heard of this before?

Ok so in my test I found that removing float:left; from #header ul does fix the double float margin bug. However, from what I read, the fix really should be that you apply display: inline; to any element that is floated left with a left margin or floated right with a right margin. You can add display:inline; to #header ul li if you want to just to be safe but it doesn't seem necessary from my test once you remove the float: left; from #header ul.

Moving on, I discovered some other bugs. Something I always forget to add to the CSS until I start IE6 testing. Basically, when you float an element but want the parent element to wrap around said float, the easiest way is to add display: hidden; to the parent. However, for this trick to work in IE6, you need to trigger hasLayout by giving the parent a width (or height). This is the part I forgot. All you need to do is add width:100%; to #header and #newsbox

Finally, to solve a 1px discrepancy in the footer in IE6, for #footer change bottom: 0px; to top: 464px;

Yep, now everything should look neat in IE6. I also tested in FF1.5 for good measure.

thanks a lot Jordan without ur help id be nowhere right now lol....thanks again!

No prob man. I enjoy this :)

Link to comment
Share on other sites

  • 0

why is tehre a bullet showing beside the first link at the bottom? i cant figure a way to get rid of it :s

Link to comment
Share on other sites

  • 0

one more problem lol...i think this has to do with the images...i added the info and news box but theres not enough room to show the text below the heading...i guess that is because the side images r not long enough so it wont scroll the page down along with the amount of text displayed...if im not mistaken theres a way of fixing this by adding the image and makin it repeat...?

i added an image so you can understand what i mean better...also u can see that black bullet i was talkin about on the post above...

post-5119-12671957216482_thumb.jpg

Link to comment
Share on other sites

  • 0

why is tehre a bullet showing beside the first link at the bottom? i cant figure a way to get rid of it :s

You are probably using a <ul> for your links in the footer. Either remove the <ul> or give it list-style-type:none; in the CSS. If you can't figure it out, post your code so I can take a look.

one more problem lol...i think this has to do with the images...i added the info and news box but theres not enough room to show the text below the heading...i guess that is because the side images r not long enough so it wont scroll the page down along with the amount of text displayed...if im not mistaken theres a way of fixing this by adding the image and makin it repeat...?

i added an image so you can understand what i mean better...also u can see that black bullet i was talkin about on the post above...

Ahhh.. This is one of the reasons I said earlier that I would have sliced the design differently. The current setup has a fixed height. I've whipped up 2 new slices and changed the code a bit to allow for a fluid height that stretches with the content. Here it is:

HTML - You'll need to compare this closely with your current html to see what all is different. I left a comment to show where the changes start. It actually should be less cluttered now.

&lt;div id="container"&gt;
        &lt;div id="header"&gt;
                &lt;img src="images/banner.gif" alt="TEK-MOR" /&gt;
                &lt;img src="images/bannerb.gif" class="left" /&gt;
                &lt;ul&gt;
                        &lt;li&gt;link1&lt;/li&gt;
                        &lt;li&gt;link2&lt;/li&gt;
                &lt;/ul&gt;
                &lt;img src="images/linkside.gif" class="right" /&gt;
        &lt;/div&gt;

        &lt;!-- Changes start here --&gt;

	&lt;img src="images/contentop.gif" /&gt;
        &lt;div id="content"&gt;
		&lt;div id="newsbox"&gt;
			&lt;div id="latestnews"&gt;
				&lt;h4&gt;Latest News&lt;/h4&gt;
				&lt;p&gt;latest news goes here&lt;p&gt;
			&lt;/div&gt;
			&lt;div id="productinfo"&gt;
				&lt;h4&gt;Product Info&lt;/h4&gt;
				&lt;p&gt;product info goes here&lt;/p&gt;
			&lt;/div&gt;
		&lt;/div&gt;
        &lt;/div&gt;
	&lt;div id="footer"&gt;
		&lt;div id="footerlinks"&gt;Links go here&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

CSS - These 2 selectors are the only changes. No more #contentbody.

#content {
	overflow: hidden;
	height: 100%;
	background: #fff url('images/bgrepeat.gif') repeat-y top left;
	padding: 0 68px;
}

#footer {
	background: #fff url('images/foot.gif') no-repeat top left;
	height: 33px;
	padding: 62px 0 0 68px;
}

And last but not least, the 2 new slices. See attached.

post-71602-12672369815804_thumb.gif

post-71602-12672369873996_thumb.gif

Link to comment
Share on other sites

  • 0

hey jordan hows it goin...hope u had a good weekend...i tried the code u gave me...but its not showing up right lol...heres a pic so u can get a better idea... hopefully by the time u read this ill have it figured out on my own lol...if not then u can take a second look whenever u get a chance...no rush...once again thank you for your help!

here's a pic...

post-5119-12674511042855_thumb.jpg

Link to comment
Share on other sites

  • 0

ok i figured out the bgrepeat problem...i didnt save the image you posted correctly lol...but as far as the bottom links i think i need to save the slices differently once again...since i have the links on that banner if i have it setup as an image then it shows up incorrectly...hmmmm...

Link to comment
Share on other sites

  • 0

ok this is what i got im gonna try slicing the side of the bottom banner see what i can do...but im not having much luck right now..

post-5119-12674540996361_thumb.jpg

Link to comment
Share on other sites

  • 0

Looking good roberto. Visually I would recommend a few small changes though. 1) The font for the nav and footer links is a bit blurry at it's current size. Raising the font size by 1pt or 1px should make it a lot more crisp. 2) I think the grey border could be a tad bit darker so that it contrasts with all the white better. 3) Some of the rounded corners are a bit jagged. See if there is a way to smoothen them out. This is usually caused by having the "pencil" setting chosen instead of the "brush" setting when using the rounded corner box tool thingy (I cant remember the proper name for the tool) in photoshop.

Yep, other than those small cosmetic adjustments, it looks good. Simple, clean layout; easy to access info. Good stuff :)

Link to comment
Share on other sites

  • 0

thanks for your feedback jordan...in the end i was told to remove the latest news and product info boxes lol all that work for ntohing lol...but at least i learned for next time lol...thanks for your help!

i'll keep postin for more feedback as i go on with this :)

Link to comment
Share on other sites

  • 0

what you think so far?

Tek-Mor Inc.

Good improvement. But still the font in the navigation and footer is a bit blurry. Did you try increasing its size? Otherwise, I like the gradient and the rounded corners look much smoother. Nice work.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.