Jump to content
SkatePerception
Corey

Custom Website Tutorial

Recommended Posts

[quote name='gatlyngun' post='2580430' date='Aug 21 2008, 11:26 PM']I have another question. My header is like a couple pixels down from the top of the page. How do i make it snap to the top?[/quote]
in your css:
[code]html, body {
margin:0;
padding:0;
}[/code]

Share this post


Link to post
Share on other sites
[quote name='Corey' post='2581064' date='Aug 22 2008, 11:54 AM']in your css:
[code]html, body {
margin:0;
padding:0;
}[/code][/quote]
:goldenwub:

Share this post


Link to post
Share on other sites
[quote name='Colin Reilly' post='2586758' date='Aug 25 2008, 12:35 PM']y not use px after 0?[/quote]
b/c its not necessary. 0px = 0pt = 0in = 0. its all the same

Share this post


Link to post
Share on other sites
oh i see.

yeah that scared me a little bit when i was using just "0"

i viewed the source code and ie/ff added "pt" after it. so the source said 0pt. it was weird.

Share this post


Link to post
Share on other sites
what size do you have to make your page if you want it to just fit in a landscape way with no scrolling arrowns

Share this post


Link to post
Share on other sites
[quote name='NYClurker' post='2595508' date='Aug 28 2008, 08:58 PM']what size do you have to make your page if you want it to just fit in a landscape way with no scrolling arrowns[/quote]
that depends, everyone has different sized monitors.

the widest i would personally go is about 950-1000 pixels wide.

Share this post


Link to post
Share on other sites
I finally took the time to read through this, and it seems way simpler than I thought it would be. I think I'm gonna try this today. thanks!

Share this post


Link to post
Share on other sites
Ok, i've read all of that and i'm still not sure what to do and pretty confused. I'm trying to put links inside each lens of [url="http://farm4.static.flickr.com/3087/2809464227_948683d731_b.jpg"]this[/url], so you just click inside each lens and it takes you there. Help?

Share this post


Link to post
Share on other sites
[quote name='rts' post='2597062' date='Aug 29 2008, 07:49 PM']Ok, i've read all of that and i'm still not sure what to do and pretty confused. I'm trying to put links inside each lens of [url="http://farm4.static.flickr.com/3087/2809464227_948683d731_b.jpg"]this[/url], so you just click inside each lens and it takes you there. Help?[/quote]

Either splice and code each lens as separate parts or use dreamweaver to use image maps.

[size=1]I know you don't need dreamweaver to do image maps, it just makes it a million times easier when you do.[/size]

Share this post


Link to post
Share on other sites
thankyou so much for this tutorial....one thing thou when i coded it, my background image for my content area was two of the same images on top of each other (kinda hard to explain) do you know whats goin on?

Share this post


Link to post
Share on other sites
[quote name='mikejd34' post='2811377' date='Dec 8 2008, 06:06 PM']thankyou so much for this tutorial....one thing thou when i coded it, my background image for my content area was two of the same images on top of each other (kinda hard to explain) do you know whats goin on?[/quote]
figured it out.

Share this post


Link to post
Share on other sites
^I have the same problem now as this guy had, and cannot figure it out.

And also, is there any reason why my navigation bar buttons have blue squares around them. And also they are not in one straight line they go like this

[======] [=======](then instead of continuing here)
(the next one is here)[======]

also with the first problem I said my right and left content body of the page is repeated twice horizontally, then under that the left one is repeated horizontally. Then the footer is fine, and then the nav is kind of wrecked.


All my images are visible, so no problems with the linking or anything.

The index.html
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<div id="container">

<div id="header"></div>

<div id="navigation">
<!-- We're going to place all of our navigation images here in a line, as links to the pages -->
<a href="index.html"><img src="images/etc.jpg"></a><a href="index.html"><img src="images/home.jpg"></a><a href="about.html"><img src="images/contact.jpg"></a>
</div>

<div id="left">
Content for left side.
</div>

<div id="right">
Content for right side.
</div>

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

</div> <!-- This is closing that "container" DIV that we created at the top -->

</body>
</html>[/code]

then the styles.css

[code]#container {
margin:auto;
width:900px;
}#header {
width:897px;
height:117px;
background:url(images/header.jpg) center no-repeat;
}#navigation {
width:900px;
height:88px;
}#left {
float:left;
padding:3px 3px 3px 69px;
width:607px;
height:728px;
background:url(images/left.jpg) top left;
overflow:auto;
}
#right {
float:left;
padding:3px 84px 3px 3px;
width:295px;
height:756px;
background:url(images/right.jpg) top right;
}#footer {
clear:both;
width:900px;
height:55px;
background:url(images/footer.jpg) center no-repeat;
}[/code]

I also sliced this in a photo program by hand, so their might be something wrong with it lining up, but I think I did alright. It's also all coded in notebook and no fancy dreamweaver bullshit.


Help me please, getting kind of desperate.

Share this post


Link to post
Share on other sites
the reason for the nav is probably b/c you sliced it by hand and now the images don't fit inside the container in one line. if your #nav is 900px wide, then all your images width's have to add up to 900px (or less).

if you dont want the background to repeat, then in the css, add this line:
background-repeat:no-repeat;

Share this post


Link to post
Share on other sites
ya i just added wrong a bunch of times. u just have to make sure all of the padding and width adds up to the origional width

Share this post


Link to post
Share on other sites
Well the layout was only 900 wide in the first place when I made it. But when i sliced it by hand it and coded it in, it must have grew. Now it's fine. Thanks.


Yeah thanks guys. I got it to work now. Well I got all the mathematics right now. I totally ignored it when i did the coding before. I never knew it was so mathematical.


Well my site is looking better. But the right and left content sides are perfectly next to each other with an inch gap between them.
My left and right sides are just

[ and ] but they should look like this [] tight together.

Is there anything I can do to make them touch each other fully?
I just lowered the container size and got them the closest to each other as I could. But they still are not touching fully there is a tiny gap inbetween.
Is this because the slicing was done so badly? or is there something else.

Share this post


Link to post
Share on other sites
could be the slicing. could be that your images are too small. or maybe you want them to repeat horizontally? if its easy, just make the images wider.

Share this post


Link to post
Share on other sites
Thanks man, I will continue working on it tonight.

But yeah this has been just a test for a serious website and layout I will start work on soon(with proper slicing). Thanks for the guide and help. Now I know the basics I will go from there.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×