Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

New to web design; help with coding

L

LERsince1991

macrumors 65816
Original poster
Jul 24, 2008
1,245
37
UK
Hi,

I've never done any web design or coding, new to it all today, just been following some tutorials and searching google for answers.

I'm trying to make a simple website in html to get me through the next 6 months which replaces my current flash website but is essentially the same with a few tweaks; the flash website was done in indesign and exported so really it was a mockup.

heres the flash website mockup (takes a while to load);
deleted

heres my current progress on the html and css front
http://www.lukeriggall.co.uk/

I just would like someone to check it over for me and to also answer a few questions;

1 - How can I center the page? is there someway to frame the whole page then centre that?

I've updated the page with a separate css file and a profile page as well!
 
Last edited:
D

dkotter

macrumors member
Jul 30, 2009
57
0
The way you have things now, it will be hard to center things. The reason why is you are using absolute positioning on your elements, which positions those at a specific place on the page.

So typically to center something using CSS, you'd set
Code: 
margin: 0 auto;
and make sure the element has a specific width. So you'd typically have a div tag that contains the rest of the page, and that div has the margin and width set on it.

The way you have it now, using absolute positioning, it's going to be hard to center things. What you could try is to create a div that wraps the three main images. Give that a specific width and a margin: 0 auto, as well as a position: relative. Then the absolute positioning of the images will need to be fixed, since it will now calculate the positioning based on the containing div element.

This way should get things most of the way centered. A better way would just get rid of the absolute positioning all together.
 
L

LERsince1991

macrumors 65816
Original poster
Jul 24, 2008
1,245
37
UK
think I've managed to centre the page and adjust the absolute positioning accordingly, seems to work well! Thanks!
 
L

LERsince1991

macrumors 65816
Original poster
Jul 24, 2008
1,245
37
UK
erm, its adjusting the text, didn't think about using it to adjust the position as well :) thanks :)

edit; as I said, only started yesterday or so and never even looked at html or css before then so getting into it still!

Point out anything I can improve if you can :)
 
L

LERsince1991

macrumors 65816
Original poster
Jul 24, 2008
1,245
37
UK
ok so I have a couple more questions about things that are a bit beyond me at the moment!

1
I want to make the images on the right of this page;
http://www.lukeriggall.co.uk/architecture/worship.html

Open in full size in a box when clicked in the centre of the screen. I think its called a lightbox or something and have the arrows where you can click through to left or right to the next or previous image. This fairly easy to do? just something really simple to view the images.

2
auto scroll bars = done

3
I'll also need the PROJECT thumbnails;
http://www.lukeriggall.co.uk/architecture.html
in an invisible box that can be scrolled left or right to older or newer projects, this can be seen working in the flash mockup at /2012
Would be nice to have some sort of animation though like swipe left/right to next or previous page.
edit- I don't want scrolling here, I want to click an arrow on the left or right and to show the next 3 projects.

Thanks :)))))
 
Last edited:
B

bjett92

macrumors 6502a
Oct 22, 2007
733
1
Indy, IN
LERsince1991 said:
ok so I have a couple more questions about things that are a bit beyond me at the moment!

1
I want to make the images on the right of this page;
http://www.lukeriggall.co.uk/architecture/worship.html

Open in full size in a box when clicked in the centre of the screen. I think its called a lightbox or something and have the arrows where you can click through to left or right to the next or previous image. This fairly easy to do? just something really simple to view the images.
Click to expand...

The easiest way to get this done is to use a jQuery plugin. I don't know if you have looked at jQuery before, but it's a javascript framework that makes animation really easy, along with many features and plugins.

Here is a lightbox plugin I have used before, and it looks nice and easy to use.

http://leandrovieira.com/projects/jquery/lightbox/

Google jquery lightbox and you can find a lot more!

Edit:
This is another really nice one. http://fancybox.net/

One more thing. While not technically necessary, it would be a really good idea to get all CSS out of the html and into a seperate linked css file. Also, don't use font tages, those are deprecated.
 
Last edited:
gr8whtd0pe

gr8whtd0pe

macrumors 6502a
Feb 21, 2008
522
18
Dallas, NC
ericrwalker

ericrwalker

macrumors 68030
Oct 8, 2008
2,812
4
Albany, NY
gr8whtd0pe said:
Yup, starting at 6 months. Wish we had started earlier, and don't know when to end it lol
Click to expand...

Is that a wordpress add-on package you downloaded? I started with wordpress and I didn't like it.

I might want to add something like that to my page. I bought a URL for my daughter about 6 months before she was born....then decided I wanted her "first last" name URL a few months before, and bought it. Worked on the site for a few months on and off, and I actually finished it while in the hospital, while my wife was in labor :O

My in-laws are all in Japan, so they love having the site. The cool thing with the cutesoft program is that I can just drop photos in the album file, and it creates the thumbnails automatically. I have black templates for when I create a new album too.
 
gr8whtd0pe

gr8whtd0pe

macrumors 6502a
Feb 21, 2008
522
18
Dallas, NC
Nope. It's just a theme I modified. It simply takes the image posted into a post, displays it at 100X100 and allows you to click on it to load the pic only. The date you see is the title of the post.

I write, I don't pay. Lol
 
L

LERsince1991

macrumors 65816
Original poster
Jul 24, 2008
1,245
37
UK
Thanks for the help and suggestions!
It's getting to where I want it to be :)

Any suggestions on better flickr gallery than the one I have? I tried stretching it but then the images don't show properly, would be best with a nice clean one with a white seamless background to blend in :)

Working on making the project pages a little better with the images on the right.

Also need to discuss compatibility with browsers as it works for safari on mac but i haven't tried on anything else!

Also need to look into how to style the scroll bars as they look crap on windows!

cleaned up the style coding and used the css file more and also cleaned a few other things up and also added google analytics :)

Thanks,
Luke
 
gr8whtd0pe

gr8whtd0pe

macrumors 6502a
Feb 21, 2008
522
18
Dallas, NC
Use developer mode in safari, install chrome and Firefox on your Mac. Chances are if it works in safari, chrome and Firefox will like it too.

For the love of god please do not style the scroll bars.

You could always upload the pics to your site and use something like http://coppermine-gallery.net/ to show them off.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom