PDA

View Full Version : help please!

FrenchPipi
07-21-2006, 04:09 PM
i'm not sure where to post this so i posted it under tables too. sorry. but..

hi. i really need help. i'm trying to create a webpage but im having some trouble. ideally, i want an image in the middle and with arrows pointing from the image to the 4 corners. and on each corner i want a little square with links. my questions are..

should i put the links in a table? and if i do, how do i place that table exactly where i want it? and if i do get it where i want, will it look different depending on which computer you're on because of screen resolutions???

PLEASE HELP ME.

thanks for reading this. :)
Turquoise
07-21-2006, 04:31 PM
Well, if I'm correct in thinking what you want your layout to look like, it'd be fairly easy to make each square with links a css div and position it exactly where you want them to go.

For each div, you would need to use position: absolute which makes the div go however many pixels away from the top, left, bottom or right you tell it to. To make a square you'll also need to set the height and width as well.

For example, the top left div should be something like:
#divtopleft {
position: absolute;
top: 5px;
left: 5px;
height: 150px;
width: 150px;
}

That would give you a 150px square div 5 pixels away from the left hand side and 5 pixels away from the top of the page.

The HTML for the div would be:

<div class="divtopleft"> whatever your links are </div>

You'd need to repeat this for your other 3 divs, except using different values than top and left when neccessary (e.g. for the top right corner you'd use top and right instead)

For the image and arrows the only way I can think of is including the arrows in with your picture and making the rest of your image transparent.

This page (http://www.w3.org/Style/Examples/007/center.html) sums up far better than I could do ways of centering an image with css. You could also just use the <center> HTML tag.

Anyway, I'm sure there's ways to create a similar effect with tables instead of divs but I know nothing about tables, so I'll leave that to someone else.
FrenchPipi
07-21-2006, 04:39 PM
haha. yeah, i dont work with divs. but let me try to understand what you're saying..

so i put this:
#divtopleft {
position: absolute;
top: 5px;
left: 5px;
height: 150px;
width: 150px;
}

into my head tag??
Turquoise
07-21-2006, 04:47 PM
It works just as well in your body tag, but you'll need a
<style>
before the css and a
</style>
to end.
FrenchPipi
07-21-2006, 05:06 PM
i looked it up and i get it. except there's a problem. all i'm getting is 4 lines. theres no box around each and there not positioned, where i set them. this is the code i have on the website. do you see a problem with it?

<!-- \/ starthtml -->
<html>
<head>
<TITLE>IH Management System</TITLE>

<style type="text/css">

#divtopleft {
position: absolute;
top: 5px;
left: 5px;
border: solid #000000 1px;
height: 150px;
width: 150px;
}

#divtopright {
position: absolute;
top: 5px;
left: 805px;
border: solid #000000 1px;
height: 150px;
width: 150px;
}

#divbottomleft {
position: absolute;
top: 805px;
left: 5px;
border: solid #000000 1px;
height: 150px;
width: 150px;
}

#divbottomright {
position: absolute;
top: 805px;
left: 805px;
border: solid #000000 1px;
height: 150px;
width: 150px;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B">
<div class="divtopleft"> whatever your links are </div>

<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B">
<div class="divtopright"> ih management system </div>

<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B">
<div class="divbottomleft"> whatever your links are </div>

<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B">
<div class="divbottomright"> i think i understand! </div>

</body>
</html>
<!-- /\ end html -->
FrenchPipi
07-21-2006, 05:08 PM
oh and this is what it looks like. so im guessing there something wrong with the styleshet...?

http://bppractice.tripod.com/index.html
Turquoise
07-21-2006, 05:14 PM
I'm sorry, I made a stupid mistake.
It should be id, not class.
FrenchPipi
07-21-2006, 05:22 PM
it works! hahahahahaha. THANK YOU!!

.. i am not worthy >.<

yeah, if i set the image as the background and then set the boxes to where the arrows are and get them aligned and stuff. will it look different on someone elses computer? i mean, will the boxes still be aligned to the backround?

..it should, right?
Turquoise
07-21-2006, 05:24 PM
As long as they're still absolutely positioned, it should look the same on all browsers :)
FrenchPipi
07-21-2006, 06:22 PM
thank you thank you thank you

one last question, i promise.
how do i center all the boxes.
i mean like, right now it looks like

box box
box box
box box box box

and thats what i want it to look like but i realized, that it looks centered on my screen because thats the size of the window.. like if i open the window more, it looks like the boxes are up against the left side of the screen (left aligned). how can i get to be centered on the window?? no matter what the window size is

box box
box box
box box box box
Turquoise
07-21-2006, 10:16 PM
As far as I know, the only way of going about that without getting into many layers of complicated divs is to float the divs against the left or right hand side and then position them a certain % away from where they were floated.

It's an interesting question - I've never coded a layout using this method before. I'll go and have a quick look and then post the code here if it works.

Otherwise - unless you want a very clean and web standards compliant layout - I'd recommend switching to tables.
Turquoise
07-21-2006, 10:50 PM
Sorry about the double post, I didn't realise there was a time limit for editing your post.

Anyway, it seems like the best way to do this is use relative positioning instead.

If you change each of your divs from position: absolute to position: relative, the top, left, right or bottom attributes are now used to determine how many pixels the div is away from its normal position, rather than from the top, left, right or bottom side of the page. This can be more complicated to work out but it means you can center the divs.

To center divs in IE:

body {
text-align: center
}

I don't know why this makes it work, I think it is a glitch on IE's behalf.

To make them centered in Firefox (and presumably other browsers as well)

#divtopleft (or whatever you called the div you want centered) {
margin: 0 auto;
}