An ***easy*** HTML question!

Discussion in 'Software' started by Robster12, Oct 31, 2004.

  1. Robster12

    Robster12 The Horse Whisperer

    I have been reading tutorials, but have now been able to find how this is done.

    This is an example of what I want to do:

    http://www.w3.org/QA/Tips/uri-manage

    Now, see how that when you scroll down the page, the sidebar on the right hand side stays in the same place, and doesn't scroll?

    I think that is SO COOL!

    Could anybody give me keywords to google with to find out the kind of coding that gives these results?


    Robert
     
    Robster12, Oct 31, 2004
    #1
  2. ThisChick

    ThisChick Corporal

    This is all done with CSS and before you jump into CSS you have to learn at least some HTML coding. You have to create a style sheet to be able to do that, and it's kinda hard... So get going and lear the whole HTML coding thing first.....
     
    ThisChick, Oct 31, 2004
    #2
  3. goldfish

    goldfish Lt. Sushi.DC

    Yes, looks like its CSS to me too. But I can't find the definition... Hmmm...

    Ok here we go. They were sneaky. They imported a stylesheet into a stylesheet into a page.

    Right, this is the style definitions relating to the menu. (a <div> with the id of "Menu")
    Code:
    #Menu {
   overflow:auto;
   width:10em;
   position:fixed;
   float:right;
   margin-right/* hide from IE5.0/Win */ : 2em;
   margin-top: 0.5em;
   right: 2em;
   left:auto;
   top:8em;
   bottom:2em;
   text-indent: 0.5em;
   padding:0;
   background: #eec;
   color: #000;
   border:0px solid #000;
   line-height:1.5em;
	}

body>#Menu {
	right: 2em;
   margin-right: 2em;
	}
    The important part is
    Code:
       position:fixed;
   float:right;
    For some reason their measurements are all in em's. They probably have some silly standards compliant reason to do that, but I'd use pixels myself ;)

    position:fixed;     means it stays in the same place reletive to the borders of the page in the browser, not the page as a whole. You can do this for backgrounds too : www.goldfishsbowl.co.uk (notice the background gradient stays in the same place)

    float:right; means that it basically ignores all of the other content and goes to the right of the page. Text is word-wrapped around it, but other elements can overlap with it. without this there would be a space where it would be before CSS moved it.


    The margin top left right bottom stuff is positioning, mostly.

    Want to know about CSS?
    CSS Beginner's Guide

    In this case, I would create a div that looks like this
    Code:
    <div id="mycoolmenubar"></div>
    (obviously with somthing in it) and use Internal stylesheets to apply styles to it. I.e. in the <head> tag, put the following
    Code:
    <style>
#mycoolmenubar {    
   position:fixed;
   float:right;
   some:definitions; 
 }
</style>
    http://www.htmldog.com/guides/cssbeginner/applyingcss/

    You can use style classes as well, but since there is only one menubar I wouldn't bother with them :)

    Thats not too hard, is it?
     
    goldfish, Oct 31, 2004
    #3
  4. Adrynalyne

    Adrynalyne Guest

    He has a page in his signature that he built ;)

    I would say that counts as some html experience.
     
    Adrynalyne, Oct 31, 2004
    #4
  5. ThisChick

    ThisChick Corporal

    Thankyou Goldfish For The Link....
     
    ThisChick, Oct 31, 2004
    #5
  6. glennk721

    glennk721 MajorGeek

    glennk721, Oct 31, 2004
    #6
  7. Robster12

    Robster12 The Horse Whisperer

    In my Epiphany Browser, the whole thing scrolls,
    will try it in firefox...
     
    Robster12, Oct 31, 2004
    #7
  8. Robster12

    Robster12 The Horse Whisperer

    I have my web page coded in the XHTML. It validates, too. Yes. CSS.
    I was going to respond to your post earlier regarding a book, but only going to respond for you NOT to purchase the O'Reilly HTML & XHTML The Definitive Guide by Musciano & Kennedy.
    What a dissapointment that book was. But, maybe its just me.
     
    Robster12, Oct 31, 2004
    #8
  9. goldfish

    goldfish Lt. Sushi.DC

    That doesn't work in Mozilla. Use CSS, it makes w3.org happy :p

    Theres nothing in that <body> tag you couldn't replace with CSS. much more tidy and cross browser compatible.
    Code:
    <style type="text/css">
/* - the non scrolling background -*/
body {  
  background-color:#000;
  color:#fff;
  background-image:url(http://www.geocities.com/SiliconValley/Foothills/4733/stardove.JPG);
  background-attachment:fixed;
}
/* - the links */
a:link { color:yellow; }
a:active { color:#000; }
a:visited { color:red; }
</style>
    Makes things a whole lot cleaner :)
     
    goldfish, Oct 31, 2004
    #9
  10. Robster12

    Robster12 The Horse Whisperer

    hahaha!

    See, I knew that this would be child's play for you people!

    Thank you!

    Goldfish! You are "da-Man" for sure! hahaha!

    Well, I haven't forgotten about your "open window" suggestion, but, my interest is piqued with this effect here, and I ***MUST*** have it! I must!

    I can surely follow this out, now. I hope I have time tonight to chase it, but if not, soon!
     
    Robster12, Oct 31, 2004
    #10
  11. Robster12

    Robster12 The Horse Whisperer

    Oh, and the link, Goldfish. I echo the thanks given by ThisChick. I am sure that we will both get a good start from it!
    Joy, Joy!

    ThisChick: I saw your page the other day, a Unix Woman! You are something!
     
    Robster12, Oct 31, 2004
    #11
  12. NeoNemesis

    NeoNemesis Moutharrhea

    BTW robster, your stats page is really nice. I like how you changed the colors. :)
     
    NeoNemesis, Oct 31, 2004
    #12
  13. goldfish

    goldfish Lt. Sushi.DC

    No probs.

    @ ThisChick : Please oh PLEASE put a "stop music" button on your website somewhere! I had to open my javascript console, sift through the source and manually type in the JavaScript command to make the danm music stop! Which is document.RAOCXplayer.stop() if you're in the main frame when you execute it.
     
    goldfish, Oct 31, 2004
    #13

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds