SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can I change the location of blog buttons?

    I've opted to put my blog on one of my pages doing the html myself, instead of using a template page....

    okay...

    So I don't really know how to do html,
    in order to skirt that problem I did the page the way I wanted it to look (in SiteBuilder)
    SiteBuilder does all the work...
    then I copied the html from the File Manager and put it in my real page...

    anyway...

    I can't get the buttons to be where I want them to be...

    I think that they are "stuck" because each part of the html ends in --->
    rather than in a closed pointy thing...

    (the buttons are always above or below my page title, whether I move the title right or left... the buttons are always exactly above or below...
    (I don't know what causes them to sometimes be above, and sometimes below)


    Okay, here's the page the way it looks now:
    http://health-boundaries-bite.com/Blog.html

    I want those little buttons that are sitting on top of the hill, to be in the green grass, on the right...

    Any ideas how I can do this?

    I've been trying for over 8 hours...

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    icons

    I'm not familiar with Sitebuilder, but AFAIK, the "<!--$emptyText$-->"s are just comments and shouldn't affect the way the page is rendered.
    You should be able to use CSS to move the icons/link
    HTML Code:
    <div id="y360">
       <div id="y360RSSInfo">
          <span id="y360AddToMyY">
             <a href="http://add.my.yahoo.com/rss?url=http&#37;3A%2F%2Fhealth-boundaries-bite.com%2F.feed%2FBlog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"  alt="Add to My Yahoo!" height="17" width="91" border="0">
             </a>
          </span>
          <span id="y360RSSFeed">
             <a href="http://health-boundaries-bite.com/.feed/Blog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif"  alt="RSS" height="17" width="36" border="0">
             </a>
          </span>
       </div>
       <div id="y360HomeLink">
          <a href="http://health-boundaries-bite.com/">Site Home</a>
       </div>
    </div>
    Maybe move the whole thing with something like
    Code:
    #y360 {
       top: 30px;
       left: 400px;
    }
    It will take some trial and error to get it where you want it.

  3. #3
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Mittineague View Post
    I'm not familiar with Sitebuilder, but AFAIK, the "<!--$emptyText$-->"s are just comments and shouldn't affect the way the page is rendered.
    You should be able to use CSS to move the icons/link
    HTML Code:
    <div id="y360">
       <div id="y360RSSInfo">
          <span id="y360AddToMyY">
             <a href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Fhealth-boundaries-bite.com%2F.feed%2FBlog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"  alt="Add to My Yahoo!" height="17" width="91" border="0">
             </a>
          </span>
          <span id="y360RSSFeed">
             <a href="http://health-boundaries-bite.com/.feed/Blog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif"  alt="RSS" height="17" width="36" border="0">
             </a>
          </span>
       </div>
       <div id="y360HomeLink">
          <a href="http://health-boundaries-bite.com/">Site Home</a>
       </div>
    </div>
    Maybe move the whole thing with something like
    Code:
    #y360 {
       top: 30px;
       left: 400px:
    }
    It will take some trial and error to get it where you want it.
    Thanks, I'll try that tomorrow.

    I'm not sure I can change the little bunch of code very much and have it still work... I haven't activated it yet...

    This is an aside, every time I put in a </div> the thing weirded out, "the thing" is three bits" the buttons, the name of the blog, and the description, and then actually there's a fourth bit, which is the thing where the blog itself will go when I activate it...

    This will be great to have tomorrow. Thank you SOOOO much!


  4. #4
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mitt,

    Well, that didn't work. When I inserted the long code, the buttons disappeared...

    I'm going to play around with the code a bit...

    maybe I can use some of it and have the buttons be visible...

  5. #5
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, if I put in the original code, and leave your code, then there are two of the buttons, two sets, one on top of the other...

    I don't see in your code where the positioning is... I see the height of the objects, but not the left distance, or the distance from the top...

    Help? (please)

  6. #6
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Yes, if I change the numbers the little button things get bigger, but not in a pretty way...

    so I need to have distance type numbers....

  7. #7
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question



    Okay, see how it all moves?

    No matter where I move the buttons, all of the text moves with them...

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    icons

    Sorry for the confusion. The mark-up I posted was not meant to be added. It's the existing mark-up reformatted for readability. in your page it looks like this:
    HTML Code:
    --></style><div id="y360">
    <div id="y360RSSInfo"><span id="y360AddToMyY">
    <a href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Fhealth-boundaries-bite.com%2F.feed%2FBlog.html"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"  alt="Add to My Yahoo!" height="17" width="91" border="0"></a>
    </span><span id="y360RSSFeed">
    <a href="http://health-boundaries-bite.com/.feed/Blog.html"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif"  alt="RSS" height="17" width="36" border="0"></a></span></div><div id="y360HomeLink"><a href="http://health-boundaries-bite.com/">Site Home</a></div>
    </div>
    You do not need to change the image height. Also, as the code has a style tag right before the div you're interested in moving, you should either add the "top" and "left" styles to the impoorted style sheet, ie. health-boundaries-bite.com/blog.css, or add it inline, ie. Change
    HTML Code:
    <div id="y360">
    to
    HTML Code:
    <div id="y360" style="top: 30px; left: 400px;">
    The top and left properties are not in the original code.

  9. #9
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    This is what it looks like when I move it right:
    that is, the whole thing moves, when what I want is the buttons to move but not the text...


  10. #10
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Mittineague View Post
    Sorry for the confusion. The mark-up I posted was not meant to be added. It's the existing mark-up reformatted for readability. in your page it looks like this:
    HTML Code:
    --></style><div id="y360">
    <div id="y360RSSInfo"><span id="y360AddToMyY">
    <a href="http://add.my.yahoo.com/rss?url=http&#37;3A%2F%2Fhealth-boundaries-bite.com%2F.feed%2FBlog.html"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"  alt="Add to My Yahoo!" height="17" width="91" border="0"></a>
    </span><span id="y360RSSFeed">
    <a href="http://health-boundaries-bite.com/.feed/Blog.html"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif"  alt="RSS" height="17" width="36" border="0"></a></span></div><div id="y360HomeLink"><a href="http://health-boundaries-bite.com/">Site Home</a></div>
    </div>
    You do not need to change the image height. Also, as the code has a style tag right before the div you're interested in moving, you should either add the "top" and "left" styles to the impoorted style sheet, ie. health-boundaries-bite.com/blog.css, or add it inline, ie. Change
    HTML Code:
    <div id="y360">
    to
    HTML Code:
    <div id="y360" style="top: 30px; left: 400px;">
    The top and left properties are not in the original code.

    Okay, well I would have no way of knowing that. I have next to NO experience with coding.

    I want to move the buttons but not the text. Can you help me with that task?

    And, yes, I know the top and left properties aren't in the original code.... I figured out what those things look like and then added them. But they move everything.

    that's why I thought those arrows tied everything together.

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    Css

    I can see this will be more involved (but hopefully not too much more). I'll take a closer look when I get the chance.

  12. #12
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Oh, WOW,



    WOW, That's it.

    Too amazing.

    Now I have to figure out why they disappear if I leave only your coding...

    But, I think I can do it now.

    Thank you!

  13. #13
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    div location

    That's good to hear. I've become spoiled from working with CSS styles seperate from the mark-up, so I was afraid there was a dependancy on the divs position affecting the rest of the layout. But it seems the problem was from adding an extra div (my mark-up is your mark-up, just reformatted), (possibly from using the same id twice?).

  14. #14
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    My computer shut down and I guess it somehow erased the post I was making about how I can't really do it.

    They are all tied together again, I spent another hour or so on it and I'm worn out.

    If both your code and Yahoo's are in, then both sets of images appear.

    if I take out Yahoo's code, they disappear.

    without your whole code, I can't get the image sets to separate from each other.

    I think the orignail message was better written... I wasn't quite as... tired out then.

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    buggy

    As the page is now, remove this
    HTML Code:
    <div id="y360">
       <div id="y360RSSInfo">
          <span id="y360AddToMyY">
    
             <a href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Fhealth-boundaries-bite.com%2F.feed%2FBlog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"  alt="Add to My Yahoo!" height="17" width="91" border="0">
    
    <div id="y360">
       <div id="y360" style="top: 45px; left: 498px;">
    
       <div id="y360RSSInfo">
    <div id="y360RSSInfo" style="top: 45px; left: 498px;">
    
          <span id="y360AddToMyY">
    
             </a>
    
          </span>
          <span id="y360RSSFeed">
             <a href="http://health-boundaries-bite.com/.feed/Blog.html">
                <img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif"  alt="RSS" height="17" width="36" border="0">
             </a>
          </span>
       </div>
       <div id="y360HomeLink">
          <a href="http://health-boundaries-bite.com/">Site Home</a>
    
       </div>
    </div>  
       </div>
    </div>
    and change
    HTML Code:
    <style type="text/css" media="all"><!--
        @import "http://health-boundaries-bite.com/blog.css";
    --></style><div id="y360">
    <div id="y360RSSInfo"><span id="y360AddToMyY">
    to
    HTML Code:
    <style type="text/css" media="all"><!--
        @import "http://health-boundaries-bite.com/blog.css";
    --></style><div id="y360" style="top: 130px; left: 400px;>
    <div id="y360RSSInfo"><span id="y360AddToMyY">

  16. #16
    Non-Member Consider-This's Avatar
    Join Date
    Nov 2004
    Location
    New Mexico
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I search for:

    <style type="text/css" media="all"><!--

    the search feature says it's not on the page....

    ****

    I put in the html you said to add, but without taking out the html I couldn't find, and this is how it turned out:


  17. #17
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    moving

    On the page as it is now, of
    HTML Code:
    <link href="http://us.js2.yimg.com/us.js.yimg.com/lib/smbiz/css/y360_blog.css" rel="stylesheet" type="text/css">
    
    <style type="text/css" media="all"><!--
        @import "http://health-boundaries-bite.com/blog.css";
    --></style><div id="y360" style="top: 130px; left: 400px;>
    <div id="y360RSSInfo"><span id="y360AddToMyY">
    </div>
    </div>
    the
    HTML Code:
    <style type="text/css" media="all"><!--
        @import "http://health-boundaries-bite.com/blog.css";
    --></style><div id="y360" style="top: 130px; left: 400px;>
    <div id="y360RSSInfo"><span id="y360AddToMyY">
    </div>
    </div>
    is extra and should be removed. Below that, in the block of code above the body tag is
    HTML Code:
        <div id="e19" 
    <style type="text/css" media="all"><!--
        @import "http://health-boundaries-bite.com/blog.css";
    --></style><div id="y360">
    This is the div id=y360 that should have the style="top: 130px; left: 400px;" added to it.


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
  •