Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: help with Arie's script

  1. #11
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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.
    Thanks,

    Bud

  2. #12
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,026
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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;
    Code:
    #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;
    Code:
    <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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #13
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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.
    Thanks,

    Bud

  4. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by ajfmrf View Post
    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.

  5. #15
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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.
    Thanks,

    Bud

  6. #16
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Since you're using HMTL 4.01 stick this in the head:
    HTML Code:
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. The Following User Says Thank You to bernie1227 For This Useful Post:

    ajfmrf (12-13-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •