Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 23, 2012, 01:14 PM   #1
LERsince1991
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
New to web design; help with coding

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!
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s

Last edited by LERsince1991; Jan 31, 2012 at 06:49 AM.
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 02:01 PM   #2
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
how can I sort out the centering of the page please?
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s

Last edited by LERsince1991; Jan 24, 2012 at 02:12 PM.
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 02:24 PM   #3
dkotter
macrumors member
 
Join Date: Jul 2009
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.
dkotter is offline   1 Reply With Quote
Old Jan 24, 2012, 02:53 PM   #4
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
so whats the best way to get rid of it all together?
the layout will be like the flash one shown at the address www.lukeriggall.co.uk/2012
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s

Last edited by LERsince1991; Jan 30, 2012 at 08:50 PM.
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 03:14 PM   #5
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
think I've managed to centre the page and adjust the absolute positioning accordingly, seems to work well! Thanks!
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 03:16 PM   #6
gr8whtd0pe
macrumors 6502
 
Join Date: Feb 2008
Location: Belle, WV
Send a message via AIM to gr8whtd0pe
Why are you assigning div's classes if you are just going to put the style in the tag? Defeats the purpose.
__________________
Kirk
27" iMac | aTV2 | 5 | iPAD "3" | +
WVMS | CREATEITFOR.ME | FB
gr8whtd0pe is offline   0 Reply With Quote
Old Jan 24, 2012, 03:24 PM   #7
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
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
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 03:34 PM   #8
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
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 ))))
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s

Last edited by LERsince1991; Jan 24, 2012 at 04:49 PM.
LERsince1991 is offline   0 Reply With Quote
Old Jan 24, 2012, 04:55 PM   #9
bjett92
macrumors 6502a
 
Join Date: Oct 2007
Location: Indy, IN
Send a message via AIM to bjett92
Quote:
Originally Posted by LERsince1991 View Post
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.
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 by bjett92; Jan 24, 2012 at 05:02 PM.
bjett92 is offline   0 Reply With Quote
Old Jan 26, 2012, 09:28 AM   #10
ericrwalker
Banned
 
Join Date: Oct 2008
Location: Albany, NY
Quote:
Originally Posted by LERsince1991 View Post
heres the flash website mockup (takes a while to load);
http://www.lukeriggall.co.uk/2012
Yeah a long while, it might be a good idea to have a "loading" screen.
ericrwalker is offline   0 Reply With Quote
Old Jan 26, 2012, 09:40 AM   #11
ericrwalker
Banned
 
Join Date: Oct 2008
Location: Albany, NY
What you might be looking for is something I have on my daughter's website.

http://sakurawalker.com/albums/ismil.../photoview.php

I used a package for the photo galleries from cutesoft. (The PHP version).

There was more functionality as well. They include the ability to upload photos from the web and to comment on each photo.

They have free trials included as well ( http://phpimagegallery.com/ ).
ericrwalker is offline   0 Reply With Quote
Old Jan 26, 2012, 11:37 AM   #12
gr8whtd0pe
macrumors 6502
 
Join Date: Feb 2008
Location: Belle, WV
Send a message via AIM to gr8whtd0pe
Quote:
Originally Posted by ericrwalker View Post
What you might be looking for is something I have on my daughter's website.

http://sakurawalker.com/albums/ismil.../photoview.php

I used a package for the photo galleries from cutesoft. (The PHP version).

There was more functionality as well. They include the ability to upload photos from the web and to comment on each photo.

They have free trials included as well ( http://phpimagegallery.com/ ).
I did mine in wordpress

http://anaddieaday.com
__________________
Kirk
27" iMac | aTV2 | 5 | iPAD "3" | +
WVMS | CREATEITFOR.ME | FB
gr8whtd0pe is offline   0 Reply With Quote
Old Jan 26, 2012, 11:51 AM   #13
ericrwalker
Banned
 
Join Date: Oct 2008
Location: Albany, NY
Quote:
Originally Posted by gr8whtd0pe View Post
I did mine in wordpress

http://anaddieaday.com
I like that, a picture every day. Awesome idea.
ericrwalker is offline   0 Reply With Quote
Old Jan 26, 2012, 01:58 PM   #14
gr8whtd0pe
macrumors 6502
 
Join Date: Feb 2008
Location: Belle, WV
Send a message via AIM to gr8whtd0pe
Quote:
Originally Posted by ericrwalker View Post
I like that, a picture every day. Awesome idea.
Yup, starting at 6 months. Wish we had started earlier, and don't know when to end it lol
__________________
Kirk
27" iMac | aTV2 | 5 | iPAD "3" | +
WVMS | CREATEITFOR.ME | FB
gr8whtd0pe is offline   0 Reply With Quote
Old Jan 26, 2012, 03:54 PM   #15
ericrwalker
Banned
 
Join Date: Oct 2008
Location: Albany, NY
Quote:
Originally Posted by gr8whtd0pe View Post
Yup, starting at 6 months. Wish we had started earlier, and don't know when to end it lol
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.
ericrwalker is offline   0 Reply With Quote
Old Jan 27, 2012, 12:14 AM   #16
gr8whtd0pe
macrumors 6502
 
Join Date: Feb 2008
Location: Belle, WV
Send a message via AIM to gr8whtd0pe
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
__________________
Kirk
27" iMac | aTV2 | 5 | iPAD "3" | +
WVMS | CREATEITFOR.ME | FB
gr8whtd0pe is offline   0 Reply With Quote
Old Jan 30, 2012, 08:16 PM   #17
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
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
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s
LERsince1991 is offline   0 Reply With Quote
Old Jan 31, 2012, 12:21 PM   #18
gr8whtd0pe
macrumors 6502
 
Join Date: Feb 2008
Location: Belle, WV
Send a message via AIM to gr8whtd0pe
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.
__________________
Kirk
27" iMac | aTV2 | 5 | iPAD "3" | +
WVMS | CREATEITFOR.ME | FB
gr8whtd0pe is offline   0 Reply With Quote
Old Apr 23, 2012, 10:36 AM   #19
LERsince1991
Thread Starter
macrumors 65816
 
LERsince1991's Avatar
 
Join Date: Jul 2008
Location: England
Send a message via MSN to LERsince1991
Forgot to mention the website was done ages ago

www.lukeriggall.co.uk

Not bad for a couple of weeks work from knowing nothing about html or web design
__________________
www.lukeriggall.co.uk
Arcam A22 with DAC | B&W 685
2.4GHz | Dual SSD + HDD | 8Gb | 13" Alu Macbook
16TB HDD's | 32" TV/Monitor | Canon 60D | iPhone 5s
LERsince1991 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
How many people use MBA13 exclusively for design/web design? dxr808s MacBook Air 4 Jul 11, 2013 12:06 PM
iPad: iPad for graphic design and web design maddogsrfr81 iPad 19 Feb 9, 2013 12:50 PM
advice on school for graphic design or web design/dev skatementle Web Design and Development 30 Sep 11, 2012 10:03 AM

Forum Jump

All times are GMT -5. The time now is 06:28 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC