...

View Full Version : i'm super super noob, help please :(



Kym
10-22-2010, 03:42 PM
so i decided to make a new layout for my site, using imagemap and iframes. my webdesigner friend said this was a stupid idea and told me not to do it..and that if i did i'd have heaps of problems. but i did anyway (lol)
he was right aha, i'm having trouble already. but i don't want to admit defeat and hear him say "i told you so" so i decided to ask a bunch of randos on the internet for help!

first of all, i know it's a mess. like i said i'm a total noob at this and just make it up/google things as i go. oh and i know i haven't done the pages yet, i just want to figure this out first.

k heres where i've been working on it:
http://www.manateeny.com/testpage.htm

so what i want to do is have it centered. is there a way to do this without splicing it up and using tables?

also. is there a way to make everything resize to fit different screen sizes?

thanks in advance and sorry for any frustration my noobness may cause :)

SB65
10-22-2010, 03:57 PM
If a non-absolutely positioned element has a width, and the page has a valid doctype then margin:0 auto will centre the element horizontally:


#wrapper{width:90%;margin:0 auto}

You can make your pages fluid - change relative to the available width by using percentages. Here's an example (http://bonrouge.com/hcf-fluid.php).

Incidentally, I'm certain I've answered a question this week regarding this url, but cannot now find it. Odd.

Kym
10-22-2010, 04:23 PM
If an element has a width, and the page has a valid doctype then margin:0 auto will centre the element horizontally:


#wrapper{width:90%;margin:0 auto}

You can make your pages fluid - change relative to the available width by using percentages. Here's an example (http://bonrouge.com/hcf-fluid.php).

Incidentally, I'm certain I've answered a question this week regarding this url, but cannot now find it. Odd.

i guess my doctype thing is wrong because it doesn't seem to be working :/

and yeah i edited it since i decided to redesign the whole thing anyway. and apparently you can't delete posts here?

SB65
10-22-2010, 04:33 PM
I can't see any element in your page with margin:0 auto.

Kym
10-22-2010, 04:39 PM
I can't see any element in your page with margin:0 auto.

"
#image_container {
width:100%
margin:0 auto;""

?

where exactly should i be putting it? :S

SB65
10-22-2010, 04:46 PM
Right, you have:


#image_container {
width:100%
margin:0 auto;
position: absolute;
}


Two things. It won't work with absolutely positioned elements - I should have been more explicit. And, you have not closed the width statement with a semi-colon. I'm not sure why would you want to centre something that's 100% wide anyway....

teedoff
10-22-2010, 04:48 PM
Remember, anything 100% wide will be just that, 100% wide as it relates to its parent element. If the parent of container is body, then container 100% will be the whole width of the available screen res.

Kym
10-22-2010, 04:58 PM
ohh i see...i thought having a smaller percentage shrinked the image down from its original size or something.
sorry, i haven't had much sleep and it's 4am here lol. probably not the best time to be working on it.

thanks! the main image is centered like i wanted it now.

...but now i don't know how to position my iframe over it :/

abduraooft
10-22-2010, 05:08 PM
...but now i don't know how to position my iframe over it :/
Apply position:absolute; on #iframe_container and change the top value, if required.

Kym
10-23-2010, 03:07 AM
Apply position:absolute; on #iframe_container and change the top value, if required.

that doesn't position it exactly where i want it on the image though? :/
also if i resize the screen the iframes suddenly in a different place.
is there a way to position it exactly where i want it and make it follow the image?


..and now my image map isn't working cause of the fluid thing. are image maps even possible with fluid layouts?

thanks

Kym
10-23-2010, 12:27 PM
any ideas? :(

abduraooft
10-23-2010, 12:43 PM
How about
#iframe_container {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
} ?

Kym
10-23-2010, 03:24 PM
How about
#iframe_container {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
} ?

http://www.manateeny.com/testpage.htm

it still needs to be quite a bit over to the right though. also i'm not sure if it would look different with different screen sizes?

hm, maybe what i'm trying to do isn't possible with a fluid layout :/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum