main body of website

unwashed potato! · 13 Oct 2006 at 23:04

http://img179.imageshack.us/my.php?...ntitled1qu4.jpg

ok that should be a link to the design of the main page, or atleast the photo page of the website.

the images is only blurred as thats my gf, and also not full name for same reasons.

as you can see the grey bit around the edge is only when viewed by a big monitor. the images i want to load different each visit if it looks good, and then when the thumbnail is clicked over it will load it smoothly (i tihnk javascript is needed for that?) so that an outline of the thumbnail grows and moves into the big image space, and then when the big image is clicked it opens the full image on a new page. Also will have more pictures so the lijnk at the bottom will replace the bottom 2 thumbnails with new ones.

I also want the navigation bar 9is it called that) to be slightly better looking, tjhough i do like the simple look of it right now, i think it needs some way of knowing what page its on, also a nice hover and click effect

other pages will have the resume etc on the page and a download of it in MS word or something, how i do this i don't know

also was thinking when done i will make it so that there is different colours for the site and either loads randomly each visit or the user can choose.

the help i need is kind of a list of the order i should do this site, what info would be in css etc. already im having trouble with the background but can't imaging how bad the rest is going to be, a lot of late nights hopefully.

any help with this is appreciated. i don't even know the ideal font size, i know verdana is most readable but don't know font size lol?#

can someone tell me what i need to start with, e.g. start righting the css for the background, then the HTML, then test, then the header in css, then html, then test etc just to get me started? thanks

[Edit]

changed this post so that new readers know what newest thing i need help with

Mekrel · 13 Oct 2006 at 23:30

You use divs, it's advised that you put your site into a wrapper div - which is just a container to have everything in.

Give the div an ID and style it within the CSS with the following code:

Code:

div#idname {
margin: 0 auto;
}

The div then has 0 margin for top and bottom, and the auto means what ever length is left on the page is divided into right and left - thus making it centered.

The markup/structure of the site and its content go into the HTML, the content and structure is styled by the CSS.

Best thing I would recommend is to grab yourself Firefox and the Web developer extension. It has a real time css editor.
http://www.meknet.co.uk/test is a site I'm working on at the moment, feel free to see how it is structured. Very simply done.

unwashed potato! · 13 Oct 2006 at 23:44

hey thanks for the relpy, didn't expect to get one just yet.

i have made the layout in PS but i don't know how to add the image. Anyone help me with this? do i need to put it on an image site and then link it? or is threre not a better way just to upload the image on this forum?

p.s. i am using FF and have the web develpoer thing already lol, never really exploered it though, as i got it ages ago when i was learning PS and i've forgot about it since then

Mekrel · 13 Oct 2006 at 23:46

You have to upload the image as they disabled attatching files, as you can imagine the kind of storage needed for the member base here.

unwashed potato! · 13 Oct 2006 at 23:50

Mekrel said:
You have to upload the image as they disabled attatching files, as you can imagine the kind of storage needed for the member base here.

ok thats what i thought, makes sense. So is ther anywhere i can quickly upload it, rather not have to sign up for anywhere as it would be just a one off

Mekrel · 13 Oct 2006 at 23:56

yoimg, or image shack?

unwashed potato! · 14 Oct 2006 at 00:09

http://img179.imageshack.us/my.php?image=untitled1qu4.jpg

ok that should be a link to the design of the main page, or atleast the photo page of the website.

the images is only blurred as thats my gf, and also not full name for same reasons.

as you can see the grey bit around the edge is only when viewed by a big monitor. the images i want to load different each visit if it looks good, and then when the thumbnail is clicked over it will load it smoothly (i tihnk javascript is needed for that?) so that an outline of the thumbnail grows and moves into the big image space, and then when the big image is clicked it opens the full image on a new page. Also will have more pictures so the lijnk at the bottom will replace the bottom 2 thumbnails with new ones.

I also want the navigation bar 9is it called that) to be slightly better looking, tjhough i do like the simple look of it right now, i think it needs some way of knowing what page its on, also a nice hover and click effect

other pages will have the resume etc on the page and a download of it in MS word or something, how i do this i don't know

also was thinking when done i will make it so that there is different colours for the site and either loads randomly each visit or the user can choose.

the help i need is kind of a list of the order i should do this site, what info would be in css etc. already im having trouble with the background but can't imaging how bad the rest is going to be, a lot of late nights hopefully.

any help with this is appreciated. i don't even know the ideal font size, i know verdana is most readable but don't know font size lol?#

can someone tell me what i need to start with, e.g. start righting the css for the background, then the HTML, then test, then the header in css, then html, then test etc and the rest just to get me started? thanks

Mekrel · 14 Oct 2006 at 00:37

Ok, I have made little boxes which will be your div setups.

So you have your wrapper which is in green.

Then inside the wrapper, is the header (red box).

After that, is blue box which will be the background for the nav menu.

Nav menu in pink will be done with a unordered list with inline property, so it lists length ways.

Back box will be thumbnail holder, floated left which inside that will be your links which have images nested inside them. With the Javascript, I wouldn't know as ain't got a clue about JS.

unwashed potato! · 14 Oct 2006 at 00:46

Mekrel said:

is there supposed to be an image? it says its loading an image from image shack but after 75 seconds it says done and nothing is there? when i quote what you have said i can see some image default box thing but again not the image itself

btw just want to say thanks for the help so far, it really is much appreciated.
no worried about JS as i don't think that part is too much troulbe in comparison to the rest

Eriedor · 14 Oct 2006 at 01:27

addy_010 said:
...

To make the website how you want will require a mixture of PHP/MySQL and Javascript.

PHP Functions:
Amongst others...
Images Change Each Visit
Different Colour Schemes

Javascript:
Different Colour Schemes
Thumbnails
Smooth loading of images/thumbnails

Rest ofc done through CSS and HTML.

Let me know if you need some help, im fairly new to web dev but i a have been coding for 4years and am finding it a breath of fresh air ;d

Flanders · 14 Oct 2006 at 01:50

You are basically asking us to do your work for you... Or am I missing the point? :confused:

If so, learn to do it yourslef, or dont tell people you can do things which you cant....

unwashed potato! · 14 Oct 2006 at 09:52

Flanders said:
You are basically asking us to do your work for you... Or am I missing the point?

If so, learn to do it yourslef, or dont tell people you can do things which you cant....

no just need advice no what i would start writing to set me on my way

can someone tell me what i need to start with, e.g. start righting the css for the background, then the HTML, then test, then the header in css, then html, then test etc just to get me started? thanks

well the colour chancing isn't that important yet neither the changing image each load. Something iwill do but im not going to concentrate on it until i have finished the site.

[EDIT]
from merkel's help i seem to have it under control for now. im about to do the image part so likely to have problems. Anyways thanks to everyone so far

unwashed potato! · 14 Oct 2006 at 18:11

ok i have hit a problem

i am trying to have an image gallery where there is thumbnails on the left and when the thumbnails are clicked they pop up bigger on the right.

here is the code:

<style type="text/css">

.gallerycontainer{
position: relative;

}

.thumbnail img{
border: 1px solid white;
margin: 0px 0px 0px 0px;
}

.thumbnail:click{
background-color: transparent;
}

.thumbnail:click img{
border: 1px solid grey;
}

.thumbnail span{
position: absolute;
padding: 0px;
bottom: 10px;
border: 1px solid white;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: ;
right: 0px;
z-index: 50;
}

</stlye>

the trouble i am having is 2 problems.

first is that the thumbnails have a gap between them and i can't seem to find a way of getting rid of it

second is that when i hover over the thumbnails the image will appear completely bottom right of the page no matter what resolution and not within the wrapper area.

anyone know how to fix this? i know the setting is atm hover and i want click but then is just for the moment. Also when i change the

.thumbnail span{
position: absolute;

to relative the image then appears left to the thumbnail but then it makes all the other thumbnails appear below the big image no matter if the image is there or not.

here is a screenshot of what is happening, and one of what i want.

happening: <a href="http://imageshack.us"><img src="http://img218.imageshack.us/img218/989/wrongbm3.png" border="0" alt="Image Hosted by ImageShack.us" /></a>

want: http://img107.imageshack.us/my.php?image=rightdl9.jpg

anyone?