Easy question regarding absolute pos. (I think).

[MacBoobsPro]

I am not a web designer and dont pretend/intend to be but I have been tasked with creating a site for the company I work for. The current site is 12000 pages in total and being an innovative but lazy I have figured out a way to get it down to just 4 pages (yes four) and the rest can be done using PDFs as the majority of the site is promoting our publications.

Anyhoo... I have been specifically asked to make the site auto centre in the browser window, and after a while of faffing around in DWCS4 I have figured out how to do it.

The only problem is I have a jumpmenu that is backbone of the site and it only seems to do what I want it to do when it is set to an absolute position. However if I then set the body/container to float centrally the jumpmenu remains where it has been told to and effectively slides around the page when the browser window is resized.

How can I make the jumpmenu move around in relation to the rest of the site. I'm guessing using the 'relative' position would be the most obvious choice but the jumpmenu then shoots of the page and seem to do what it wants.

I have attached the html file (and images) so you can see what I mean. I know the site is not constructed the best way but its the only way I know.

Any help would be appreciated.

 

[angelwatt]

Quite the post for a "simple" question

I won't go into how the page should be done because it would take too long and you've already stated you're not a web designer. I'll focus on a direct solution.

Use this CSS,

#apDiv1 {
 position: absolute;
 display: inline;
}
#form {
 position: relative;
 right: -15px; /* Showing a negative so that you can see that you can
                 push the drop box off to the right more so if desired */
 display: inline;
}

Place the entire div that has an id of apDiv1 inside the td tag after the image where the code starts as,

<td rowspan="4">
  <img src="images/index_14.gif" width="442" height="701" alt="">

This is just at the end of the HTML code that has the menu items. That allowed the drop box to stay in the same place and the browser window changed size.

 

[MacBoobsPro]

Quite the post for a "simple" question

I won't go into how the page should be done because it would take too long and you've already stated you're not a web designer. I'll focus on a direct solution.

Use this CSS,

#apDiv1 {
 position: absolute;
 display: inline;
}
#form {
 position: relative;
 right: -15px; /* Showing a negative so that you can see that you can
                 push the drop box off to the right more so if desired */
 display: inline;
}

Place the entire div that has an id of apDiv1 inside the td tag after the image where the code starts as,

<td rowspan="4">
  <img src="images/index_14.gif" width="442" height="701" alt="">

This is just at the end of the HTML code that has the menu items. That allowed the drop box to stay in the same place and the browser window changed size.

Thanks angelwatt. I'm not at work right now but will give it a go when I get back. Cheers.

 

[MacBoobsPro]

That didnt seem to work, but as I have no idea what I am doing its most likely me that is doing it wrong. Doing what I think you said just spanners up the entire page and the jumpmenu continues to slide around the page.

Could I be REEEAAAALLLLYYYYY cheeky and ask if you could edit the index file for me and then re upload it?

That way I can study what you have done. Right now placing div tag inside a TD tag just goes WAY over my head. I can change a 4 to a 6 but I don't think thats needed, if it is I would need to know which number 4 needed to be a number 6. Thats how much I know about this kind of stuff.

I cant even get div tags to sit where I want so I have gone the route of creating the site in PS and slicing it up and exporting as HTML.

 

[MacBoobsPro]

I am so inept I have tried re slicing the image and creating a dedicated slice for the jumpenu but its impossible to get the dimensions right and when I place a background image inside the slice it spanners everything else up too. Why is Dreamweaver so bloody complicated?

I just want a menu that moves with site.

 

[angelwatt]

I'm attaching just the index.html file as that was that I edited. I gave it a txt extension because I think Mac Rumors would filter the HTML extension.

As another note on the page, since you're using Photoshop to slice and image, there isn't really any real text on the page. This can create SEO (search engine optimization) and accessibility problems. I'm not sure if you're company needs to abide by Section 508 standards either, but the current design does not meet those standards. I'm just letting you know.

 

[MacBoobsPro]

I'm attaching just the index.html file as that was that I edited. I gave it a txt extension because I think Mac Rumors would filter the HTML extension.

As another note on the page, since you're using Photoshop to slice and image, there isn't really any real text on the page. This can create SEO (search engine optimization) and accessibility problems. I'm not sure if you're company needs to abide by Section 508 standards either, but the current design does not meet those standards. I'm just letting you know.

I know exactly what you mean about SEO and accessibility, but what my boss says goes.

Thanks for the file I will check it out. Much appreciated.

 

[MacBoobsPro]

Still no luck I'm afraid (I know its me being an idiot) but I can't get the menu where I want it without it resorting back to its crazy antics. How do I get it in the grey horizontal menubar at the top and left aligned with the phone number and email address and make it stay there without it destroying the rest of the page? Why is a simple task so complicated?

 

[angelwatt]

Well, currently the phone number and email are right aligned. Do you mean you want the drop box "right"-align with them rather than left-aligned? What I gave you looks like the attached image for me in Firefox on Windows XP.

 

[MacBoobsPro]

When i opened it in Dreamweaver the menu was at the bottom of the page and slightly off centre. When I previewed it in Safari it was still in the same place, firefox sent it somewhere but I couldnt find it.

I have fiddled again and got Safari to display it correctly. I did that by literally dragging the apdiv thing to the place I wanted and then setting #form to be absolute too. However Firefox didnt like it at all and god knows what Explorer would make of it.

Basically I would like it left aligned with the right aligned text. If that makes sense. i.e. so the left edge of the menu sits aligned with the 'r' of regional.

 

[angelwatt]

When i opened it in Dreamweaver the menu was at the bottom of the page and slightly off centre. When I previewed it in Safari it was still in the same place, firefox sent it somewhere but I couldnt find it.

I have fiddled again and got Safari to display it correctly. I did that by literally dragging the apdiv thing to the place I wanted and then setting #form to be absolute too. However Firefox didnt like it at all and god knows what Explorer would make of it.

Basically I would like it left aligned with the right aligned text. If that makes sense. i.e. so the left edge of the menu sits aligned with the 'r' of regional.

OK, so you want it left-aligned with just the email address, not both it and the telephone number. That makes more sense. It sounds like what I sent you isn't rendering the same for you as it did for me. If that wasn't the case all you would have had to do is adjust the right property on the #form selector.

When I opened what I edited in IE, the drop box was in the same place as Firefox, but there were other issues on the page with image slices not aligning. This tasks may get harder when trying to get it to render the same in all browsers. I've never been a fan of the Photoshop slice approach, and this is partly why. There are some here who use it though so hopefully they'll chime in if they have any ideas to make this go forward more smoothly.

I won't be able to really do much while at work since I no longer use a Mac here. If you make some progress and want to post the changes to the index file I'll take a look at it.

 

[MacBoobsPro]

Thanks angelwatt. I really appreciate your help.

I know its really my approach i.e. slices that is causing the problem and then my lack of understanding of how dreamweaver works I think I am trying to fix a problem that wouldnt exist if I wasnt using a roundabout way to get things done.

One thing I did notice is the #form you put in there. Why when I created the jumpmenu was that not automatically done for me?

Because of all this messing around I am taking everything home with me tonight and will have a stab at creating it entirely using CSS and without slices. I have attempted this before but I just couldnt get the basic divtags to do what I wanted so I couldnt even divide the page how I wanted to begin with. Let alone even get a jumpmenu in there.

I really hate web design.

 

[angelwatt]

One thing I did notice is the #form you put in there. Why when I created the jumpmenu was that not automatically done for me?

It likely didn't add it because it did the styling to the div that it was enclosed in so had nothing to add to #form. Though CSS is fairly simply (in programming standards) it has a lot of flexibility and things can be done multiple ways so a program that creates it dynamically has to pick and choose how it creates the CSS. It's why I hand code everything myself.