help with Arie's script

[ajfmrf]

I got it working here:

http://www.web-user.info/iframes/index.html

But I don't understand why the wrapper border is where it is.

I was trying to center the whole thing but I am totally confused as to what is happening here.

[Beverleyh]

At the moment, you're using absolutely positioned divs inside absolutely positioned divs, which is inserting 2 batches of left-space created by left:21% and left:180px respectively - that's what you need to fix.

But first, the outer #wrapper is narrower than the combined width of the grey menu bar and the fake-iframe #test div within - increase that to 1200px for now and also give #wrapper a relative position so you can place elements within it absolutely;

#wrapper {
border:1px solid red;
width:1200px;
height:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}

Next, tackle the position of #test. We know that the grey menu bar is 200px wide, so change left:21%; to left:200px; (so they sit flush alongside each other) and remove right:20%; altogether.

Now for the grey menu bar. Change left:180px; to left:0, and change top:80px; to top:10%; (to match #test for now, but you can change the top:?% on both to suit)

This div - <div style="position:relative; text-align:left"> - above your list of links - you can remove.

Your body HTML should now look something like this;

<div id="wrapper">

<div id="test" style="position:absolute; left:200px; top:10%; bottom:10%; width:980px; background:#fff; border:10px solid #dedede;"></div>

<div style="position:absolute; left:0; top:10%; bottom:0; width:200px; height:580px; padding-top:20px; background:#dedede; font:16px verdana;">

<a href="index.html?http://web-user.info/search/business"> Business</><br>         			
<a href="index.html?http://web-user.info/search/cars">Cars</a><br>
<a href="index.html?http://web-user.info/search/charity">Charity</a><br>
<a href="index.html?http://web-user.info/search/coupons">Coupons</a><br>
<a href="index.html?http://web-user.info/search/entertainment">Entertainment</a><br>
<a href="index.html?http://web-user.info/search/funny">Funny</a><br>
<a href="index.html?http://web-user.info/search/gadgets">Gadgets</a><br>
<a href="index.html?http://web-user.info/search/games">Games</a><br>
<a href="index.html?http://web-user.info/search/gov">US Government</a><br>
<a href="index.html?http://web-user.info/search/health">Health</a><br>
<a href="index.html?http://web-user.info/search/images">Images</a><br>
<a href="index.html?http://web-user.info/search/movies">Movies</a><br>
<a href="index.html?http://web-user.info/search/music">Music</a><br>
<a href="index.html?http://web-user.info/search/news">News</a><br>
<a href="index.html?http://web-user.info/search/personalfinance">Personal Finance</a><br>
<a href="index.html?http://web-user.info/search/political">Political</a><br>
<a href="index.html?http://web-user.info/search/realestate">Real Estate</a><br>
<a href="index.html?http://web-user.info/search/reference">Reference</a><br>
<a href="index.html?http://web-user.info/search/restaurant">Restaurant</a><br>
<a href="index.html?http://web-user.info/search/science">Science</a><br>
<a href="index.html?http://web-user.info/search/shopping">Shopping</a><br>
<a href="index.html?http://web-user.info/search/social">Social</a><br>
<a href="index.html?http://web-user.info/search/sports">Sports</a><br>
<a href="index.html?http://web-user.info/search/travel">Travel</a><br>
<a href="index.html?http://web-user.info/search/video">Video</a><br>
<a href="index.html?http://web-user.info/search/videogames">Video Games</a><br>
<a href="index.html?http://web-user.info/search/weather">Weather</a><br>

</div>
</div>
</div>

I *think* this is more like the visual you're trying to create, so see how that turns out and tweak to your liking.

BTW - Only tested in IE9 so make sure to check what's happening in other browsers.

Hope that helps

[ajfmrf]

Thanks Beverleyh,That worked great and also made it easy to add a header with my banner as well as a date and time thing too.

Arie,if you see this I would like to know what I need to add to give you credit for your script.

Get back to me and I will add whatever you want me to add.

here is the finished demo page

http://www.web-user.info/iframes/index.html

I will be setting up my main search page this afternoon after I get some sleep.

This was a great script Arie and I want to thank you for it.

[molendijk]

Arie,if you see this I would like to know what I need to add to give you credit for your script.

Well Bud, that's not realy necessary, but if you insist, you could put the following in the head:
/* Script by Arie Molendijk - http://mesdomaines.nu/music */
I'm glad you got it finished.
Arie.

[ajfmrf]

I used the The W3C Markup Validation Service , validator.w3.org/ and got these Notes and Potential Issues:

No Character Encoding Found! Falling back to UTF-8.

No Character encoding declared at document level
No character encoding information was found within the document, either in an HTML meta element
or an XML declaration

How do I fix either of them? I have no clue about the UTF-8 part and not much more regarding the meta-thing about it...

Any direction would be greatly appreciated.

[bernie1227]

Since you're using HMTL 4.01 stick this in the head:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">