Results 1 to 18 of 18

Thread: More Dreamweaver help please

  1. #1
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590

    More Dreamweaver help please

    Okay, well I learned some more about style hseets and got my background where it will resize to be centered in any resolution.

    Problem - I've got buttons thta I want to move with the background at any resolution, follow me ?? So I've tried settin the layer with the css positioning thingy but it's not working. The buttons go nowhere.

    Any help ??

    thanks.
    Last edited by Grimson; 02-18-04 at 08:31 PM.
    Crackin' skulls and breaking kneecaps.

  2. #2
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    bump
    Crackin' skulls and breaking kneecaps.

  3. #3
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    position:relative top:xx% left:xx%

    will put the objects at a scalable location.

    Best to put group of buttons in a table and then use the positioning for the whole table:

    table.buttons {position: relative top:xx% left:xx%}

    <table class="buttons"><tr><td><img src="button1.gif" width="xx" height="xx"><br>><img src="button2.gif" width="xx" height="xx"><br><img src="button1.gif" width="xx" height="xx"></td></tr></table>
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  4. #4
    SG DC Team Member Paft's Avatar
    Join Date
    Feb 2001
    Location
    Charlottesville, VA
    Posts
    5,736
    Originally posted by TonyT
    position:relative top:xx% left:xx%

    will put the objects at a scalable location.

    Best to put group of buttons in a table and then use the positioning for the whole table:

    table.buttons {position: relative top:xx% left:xx%}

    <table class="buttons"><tr><td><img src="button1.gif" width="xx" height="xx"><br>><img src="button2.gif" width="xx" height="xx"><br><img src="button1.gif" width="xx" height="xx"></td></tr></table>
    Or just put them in a <div> box, so to speak.

    <div id="buttons"><img src="button1.gif" width="xx" height="xx"><br>><img src="button2.gif" width="xx" height="xx"><br><img src="button1.gif" width="xx" height="xx"></div>

    It's just a nice way to contain things without tables.

  5. #5
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    Originally posted by Paft
    Or just put them in a <div> box, so to speak.

    <div id="buttons"><img src="button1.gif" width="xx" height="xx"><br>><img src="button2.gif" width="xx" height="xx"><br><img src="button1.gif" width="xx" height="xx"></div>

    It's just a nice way to contain things without tables.
    I tried that, my layers (<div>'s) don't move with the page. They stay in the same place.
    Crackin' skulls and breaking kneecaps.

  6. #6
    SG DC Team Member Paft's Avatar
    Join Date
    Feb 2001
    Location
    Charlottesville, VA
    Posts
    5,736
    Originally posted by Grimson
    I tried that, my layers (<div>'s) don't move with the page. They stay in the same place.
    <div id="itemtomove"></div>

    in CSS:

    #itemtomove
    {
    position: relative;
    right: 2%;
    left: 4%;
    ...
    }



    Did you do that?

  7. #7
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    should be:

    div.itemtomove {position: relative; top:x%; left:x%;}

    <div class="itemtomove"> xxxxyyyyxxxxyyyy</div>
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  8. #8
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    Are you guys still talking about css ??

    Here are two pages. 1.htm has tables and cells set to autostretch and 2.htm has layers, 1 is using static and 2 is using relative position css. I don't know what's wrong with them.

    http://mywebpages.comcast.net/grimson1/matt/1.htm

    http://mywebpages.comcast.net/grimson1/matt/2.htm
    Crackin' skulls and breaking kneecaps.

  9. #9
    SG DC Team Member Paft's Avatar
    Join Date
    Feb 2001
    Location
    Charlottesville, VA
    Posts
    5,736
    Originally posted by TonyT
    should be:

    div.itemtomove {position: relative; top:x%; left:x%;}

    <div class="itemtomove"> xxxxyyyyxxxxyyyy</div>
    Either way works. Class or Id. Check the CSS standards.

  10. #10
    SG DC Team Member Paft's Avatar
    Join Date
    Feb 2001
    Location
    Charlottesville, VA
    Posts
    5,736
    Originally posted by Grimson
    Are you guys still talking about css ??

    Here are two pages. 1.htm has tables and cells set to autostretch and 2.htm has layers, 1 is using static and 2 is using relative position css. I don't know what's wrong with them.

    http://mywebpages.comcast.net/grimson1/matt/1.htm

    http://mywebpages.comcast.net/grimson1/matt/2.htm
    You have relative positioning set, that's fine. You also want to take into account that on a smaller browser size, the cells will overlap if the sizes stay static.

  11. #11
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    Originally posted by Paft
    You have relative positioning set, that's fine. You also want to take into account that on a smaller browser size, the cells will overlap if the sizes stay static.
    2 has layers(<div>'s) but they still don't move with the page. There is a way to make them stay centered with the css background right ??
    Crackin' skulls and breaking kneecaps.

  12. #12
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    Resize the background image to 640x480, then try this code:
    (it will scale to fit any browser window 800x600 resolution and above)

    Dreamweaver is adding a boatload of unnecessary code, much like Frontpage does.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">

    body {background-attachment: scroll;
    background-color: #000000;
    background-image: url(blackbckgrnd.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    font-family: "Palatino Linotype";
    font-size: small;
    font-style: normal;
    color:#ffffff;
    line-height: 25px;
    margin-left:10px; margin-right:10px; margin-top:10px;}

    p.top {position:absolute; width:100%; height:60px;}

    table.left {position:absolute; top:0px; left:10px; width:200px; height:100%; z-index:-1;}

    p.button {position:absolute; top:84%; width:100%; height:70px;}

    </style>

    </head>

    <body bgcolor="#000000" onLoad="MM_preloadImages('images/resume2.gif')">

    <p class="top" align="center" valign="top">Put some buttons or some text here</p>

    <table class="left"><tr><td>This is the page that has tables and cells set to autostretch and a css positioning style applied to the cell with the resume button in it.<br>I've tried it diff. ways and nothing works.</td></tr></table>

    <p class="button" align="center"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0"></a></p>

    </body>
    </html>
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  13. #13
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    damn you're good. What was I not doing right ?? I can compare my code and yours but, like you said my code is alot bigger and you used diff. css things.

    <style type="text/css">

    body {background-attachment: scroll;
    background-color: #000000;
    background-image: url(images/blackbckgrnd.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    font-family: "Palatino Linotype";
    font-size: small;
    font-style: normal;
    color:#ffffff;
    line-height: 25px;
    margin-left:10px; margin-right:10px; margin-top:10px;}

    p.top {position:absolute; width:100%; height:60px;}

    table.left {position:absolute; top:0px; left:10px; width:200px; height:100%; z-index:-1;}

    p.button {position:absolute; top:84%; width:100%; height:70px;}
    What are the p.top, table.left and p.button things ?? Style sheets I know but think you could explain what you did there ??

    Thanks, it works perfectly, now if I only understood it. If I need to add 2 more buttons, I can add them in here
    <p class="button" align="center"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0"></a></p>
    or do I need to add them in their own line ??

    Crackin' skulls and breaking kneecaps.

  14. #14
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    What are the p.top, table.left and p.button things ??
    They are styles for SPECIFIC tags used on the page. You can use a style for any element on the page, e.g. <p>, <h>, <table>, <tr>, <td>, <body>, etc. etc. etc.

    But, you do not always want ALL <p> (or others) to have the same styles, therefore you distinguish them by using your own made up classes. In the css, the tag is followed by a period and a class name. Then, in the actual tag code, you call the style and class by writing <p class="xyz"> or <h1 class="xyz> etc etc. Almost all properties can be defined in css.

    In the code above, there are 2 paragraph classes:
    p.top and p.button. It was not necessary to use table.left but I did it anyway in case another table is added to the page somewhere. It's a good idea to do that if using multiple like tags on the page, they then retain their own separate styles.

    or do I need to add them in their own line ??
    Add the other buttons on same line, separating them by non-breaking space(s).

    <p class="button" align="center"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0">& n b s p ;<a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume2.gif" name="Image3" width="175"
    height="66" border="0></a></p>
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  15. #15
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    after you do above, read up on css here:
    http://www.w3schools.com/css/default.asp
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  16. #16
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    Will I need to creat another style sheet to add 2 more buttons on the same line but diffrent places on the horizon ?? See hwat I'm saying ??

    I need to add a button on the left and the right of the resume button. I need to make more style sheets for that ??
    Crackin' skulls and breaking kneecaps.

  17. #17
    Elite Member TonyT's Avatar
    Join Date
    Jan 2000
    Location
    Fairfax, VA
    Posts
    10,337
    Just add the other buttone:

    <p class="button" align="center"> [b]<a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0"></a>[ &nbsp;/b]
    <a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0"></a> &nbsp; <a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('Image3','','images/resume2.gif',1)"><img src="images/resume1.gif" name="Image3" width="175"
    height="66" border="0"></a>
    </p>
    No one has any right to force data on you
    and command you to believe it or else.
    If it is not true for you, it isn't true.

    LRH

  18. #18
    Senior Member Grimson's Avatar
    Join Date
    Oct 2001
    Posts
    9,590
    I worked on it a bit more today.

    http://mywebpages.comcast.net/mattmorehead/index1.htm

    I had to add in all that javascript stuff to get the buttons to roll over but other than that I think it's okay.

    Thanks again Tony.

    Crackin' skulls and breaking kneecaps.

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
  •