PDA

View Full Version : Newb And I Need Help =]


TrvHrt
06-17-2011, 11:39 AM
here is my website, www.trvhrt.co.uk (http://www.trvhrt.co.uk) basically i want to create hotspots on this image but it doesnt allow me. I want it to also resize to fit each person screen reso im new to this im good at design but actual website creating im still learning. any help would be great. am i doing it wrong by making a jpg image and making it the background i really have no idea thanks for reading hope you help me

TrvHrt
06-17-2011, 12:38 PM
anyone please?

Corrosive
06-17-2011, 12:43 PM
anyone please?

Whoa there (and welcome to the forum). You have a LOT to learn before you start making your website. Try this for starters; http://www.corrosiveonline.co.uk/articles_beginner_mistakes.php

Carry on down that route and you'll be tearing your hair out for months! Start with the basics; http://www.w3schools.com/ do some simple layouts and grow from there. You are running before you've even started to crawl my friend :)

TrvHrt
06-17-2011, 12:57 PM
Ok ill take a look thank you, i just want my splash page to work, i want it to link to 3 different pages can u help me with it? do i need to slice my splash page then?

Corrosive
06-17-2011, 01:10 PM
I think that image maps/hotspots work on images that are content rather than backgrounds so try putting your splash page image in a div tag and then drawing over it with the hotspot tool.

Corrosive
06-17-2011, 01:12 PM
I think that image maps/hotspots work on images that are content rather than backgrounds so try putting your splash page image in a div tag and then drawing over it with the hotspot tool.

Scratch that, it is what you have done. Seems odd that hotspot isn't working for you. :confused:

TrvHrt
06-17-2011, 01:19 PM
can i send you it and see if u can firgure it out? also i copied code from a site to make it auto change resolution. maybe that messed it up

Corrosive
06-17-2011, 01:31 PM
can i send you it and see if u can firgure it out

Nope, I have an e-mail shot design I am trying to finish today... but nice try :wink: Perhaps someone else will be able to do that for you.

TrvHrt
06-17-2011, 01:42 PM
No one else will help., everyting i seem to add the the docmument though it goes behind the background which is why i think its not allowing hotspot. help with that>?

domedia
06-17-2011, 02:00 PM
Right, background images cannot have hotspots. Can you start with one off the layouts that come with DW ? This will give you a good idea on how web pages are made.

No one else will help How do you know? Some people haven't even woken up yet. 8) Wait a day or two. But it has to be a specific question. Noone can teach you how to make a webpage in a forum post.

.

TrvHrt
06-17-2011, 02:05 PM
Im from uk, sorry its like 2pm here haha Ok i will look. just the problem is i want the background to stay but i cant get it to fit all screen size

Corrosive
06-17-2011, 02:07 PM
Right, background images cannot have hotspots.

That's the weird thing though. I thought that at first but the image is in the page HTML

<img src="wallpaper.jpg" alt="wallpaper.jpg" id="background" title="" />

'Stretching' the image to fit probably isn't helping mind you and Domedia has echoed what I said earlier that you must get the basics down before starting your layout. Learn how to pull a page together using CSS and document flow and you'll soon drop the idea of hotspots. Personally I'd be taking every linked item an individual image placed over the background (added to the body tag through CSS) and then using margins/padding to make them sit where you need them. Then the image becomes the link and you are off and running.

Corrosive
06-17-2011, 02:13 PM
OK, done some Googling. Check; http://css-tricks.com/how-to-resizeable-background-image/ for your background image (the pattern). Ignore the first two and use the third method.

Then, as I said, position your graphics over the top in the HTML itself and using CSS. Then set the images as links.

That will be much better.

TrvHrt
06-17-2011, 02:13 PM
Thank you all for your help, i no the basics, ive sliced the splash page now, but now when i view it on different resolution the background doesnt cover everywhere like my current page no matter what resolution it stays the same.

Corrosive
06-17-2011, 02:19 PM
See my post above for a method of stretching the background to fit.

TrvHrt
06-17-2011, 02:23 PM
Looking now, it doesnt seem to resolve my issue.... im a newb xD

Corrosive
06-17-2011, 02:34 PM
I know you are a noob, which is why some background learning with basic layouts will help you so much in getting this right.

Here is what I would do;


Use that method to get your background to stretch 100%
Cut out the boxes, logo and social networking links in photoshop and save for web and devices
Create a 'wrapper' div on your page with left and right margins (no wider than 960px preferrably)
Position the cut out images over the background image using relative positioning, margins and padding
Link the images using the link dialogue box at the bottom of the DW window


You aren't going to achieve the whole page expanding and contracting with the browser unless you go down the % width route and that is really hard to do. You may have to compromise a bit and have a static/centred 'page' with your chosen background.

TrvHrt
06-17-2011, 02:39 PM
Ok thank you =]

TrvHrt
06-17-2011, 04:22 PM
Hey guys thanks for your help, i think ive done it, it should resize to all screen size ? Thanks so much sorry for being stupid

Corrosive
06-17-2011, 04:28 PM
Glad you got it sorted :) You will, of course, re-do it many times as you learn more (as all of us here have no doubt) but that looks good as a starter. I do get a tiny bit of sideways scroll (Google Chrome, 1280 X 1024 resolution, 4:3 Monitor) but sure that can be overcome with some tweaks.

TrvHrt
06-17-2011, 04:30 PM
i just changed it to 1024x768 because most people use this and it sits nicely, its still not 100% but i think its alot better? Thanks

TrvHrt
06-17-2011, 04:36 PM
I just resized it to 1024x768 so it should suit most people i hope. thanks for your help any other tips?

Corrosive
06-17-2011, 04:43 PM
thanks for your help any other tips?

Yep, knuckle down and learn this stuff. It is a fantastic skill to have :grin:

domedia
06-17-2011, 08:58 PM
I just resized it to 1024x768 so it should suit most people i hope. thanks for your help any other tips?

Make the site for the browser viewport, not for the screen resolution. Noone is going to view your site outside of the browser. Remember that the browser has chrome around it, the address bars etc and a scrollbar to the right