Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Needed: Positioning Links

    Hi All,

    I am having trouble with three links I have and trying to position them in a triangular shape. The top of the triangle link is fine and it is centered and positioned correctly.

    However,

    the other two I am having problems with and ideally I want them to be at the same height and positioned near the left and right respectively. However, the outcome is not that and they are positioned in places that I cant work out why.

    Help would be appreciated.


    Code:

    <div class="home-button-menu">
    <div id="gamebattles-link">
    <a href="#" style="color: black; text-decoration: none;">GAMEBATTLES</a>
    </div>
    <div id="forum-link">
    <a href="#" style="color: black; text-decoration: none;">FORUM</a>
    </div>
    <div id="about-link">
    <a href="#" style="color: black; text-decoration: none;">ABOUT</a>
    </div>
    </div>


    CSS:

    .home-button-menu {
    background: url(http://cdn.wccftech.com/wp-content/u...x_One_logo.png) center center;
    height: 1000px;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%
    }

    #gamebattles-link{
    position: relative;
    top: 10%;
    }

    #forum-link{
    position: relative;
    top: 10%;
    left: 10%;
    }

    #about-link{
    position: relative;
    top: 50%;
    }

  2. #2
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    * Correction:


    #forum-link{
    position: relative;
    top: 50%;
    left: 10%;
    }

    #about-link{
    position: relative;
    top: 50%;
    right: 10%
    }

  3. #3
    Regular Coder
    Join Date
    Feb 2016
    Posts
    530
    Thanks
    0
    Thanked 112 Times in 110 Posts

  4. #4
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sempervivum View Post
    This seems to give me the outcome that I want.

    However, I want the forum and about links to be slightly wider but when I put it to 60% each, the links seem to go somewhere random down the bottom?

    Do you know why this is and how to fix it? Ideally you could let me know why as well so that I can learn from this...

    Thanks

  5. #5
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have now managed to sort this.

    Another step with the same links is creating the zoom effect when I am hovering over the links.

    This is my first time at having a go at this so if you could help out that would be great. I tried adding the transition and transform but nothing changed.

    I do not have a set number on what the zoom should be so whatever number can be added to start with so I can then edit it around.

    HTML:

    <div class="home-button-menu">
    <div id="gamebattles-link">
    <a href="#" style="color: black; text-decoration: none;">GAMEBATTLES</a>
    </div>
    <div id="forum-link">
    <a href="#" style="color: black; text-decoration: none;">FORUM</a>
    </div>
    <div id="about-link">
    <a href="#" style="color: black; text-decoration: none;">ABOUT</a>
    </div>
    </div>


    CSS:

    #forum-link{
    display: inline-block;
    margin-top: 25%;
    text-align: left;
    width: 40%;
    transition: all 200ms ease-in;
    transform: scale(1);

    }

    #gamebattles-link{
    margin-top: 10%;
    transition: all 200ms ease-in;
    transform: scale(1);

    }

    #about-link {
    display: inline-block;
    margin-top: 25%;
    text-align: right;
    width: 40%;
    transition: all 200ms ease-in;
    transform: scale(1);
    }

  6. #6
    Regular Coder
    Join Date
    Feb 2016
    Posts
    530
    Thanks
    0
    Thanked 112 Times in 110 Posts
    You didn't apply a hover yet. Look here:
    https://jsfiddle.net/Sempervivum/0nvhecro/2/
    If you want to position the links towards the border of the window you can do this by applying a margin.
    Last edited by Sempervivum; 01-12-2017 at 12:22 AM.

  7. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,455
    Thanks
    2
    Thanked 219 Times in 209 Posts
    1) this appears to a a menu. Menus are LISTS of links, so get that in a LIST tag.

    2) 99% of this should probably be applied to the anchors, NOT a tag wrapping the anchor.

    3) Likewise as George Carlin once joked, "not every ejaculation deserves a name" -- to that end, ease up on slopping classes on everything.

    4) inline-block + 50% width can fail due to whitespace on certain browsers... so let float do it's job here.

    5) get the style the huff out of the blasted markup!!! 99% of the time you use style="" you are doing something wrong. 100% of the time you see anyone using <style> they ARE doing something wrong.

    Code:
    <ul id="someMenu"><!-- use a more descriptive ID if possible -->
    	<li><a href="#" class="first">GAMEBATTLES</a></li>
    	<li><a href="#">FORUM</a></li>
    	<li><a href="#" >ABOUT</a></li>
    </ul>
    Code:
    #someMenu {
    	list-style:none;
    	overflow:hidden; /* wrap floats and margins */
    	zoom:1; /* trip haslayout, wrap floats & margins legacy IE */
    	/* remove the zoom if you give a flying purple fish about legacy IE */
    }
    
    #someMenu li {
    	float:left;
    	width:50%;
    	text-align:center;
    }
    
    #someMenu li.first {
    	float:none;
    	margin:1em auto;
    }
    
    #someMenu a {
    	display:inline-block;
    	padding:2em;
    	text-decoration:none;
    	color:#333;
    	transition:all 0.3s;
    }
    
    #someMenu a:active,
    #someMenu a:focus,
    #someMenu a:hover {
    	color:#000;
    	transform:scale(1.5);
    }
    https://jsfiddle.net/c03f2Lvt/

    Naturally adjust your margins and/or padding as needed. I just belted this out quick. Oh, and if you could give a damn about legacy IE, you could lose that .first class and use :first-child instead.

    Also notice I target :active, :focus and :hover. This trips keyboard, puffer stick, mouth stick, and other alternative navigation, not just the mouse you happen to be fortunate enough to be able to use.

    If you can't have the proper semantic markup before you start applying style, you probably shouldn't be styling it yet.

    ... and don't forget media query to make it all one simple column when the screen is too small for the content to do that.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  8. #8
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This does not have the background image in it which is vital...

    I actually have it all sorted now accept that the two links that form the bottom corners of the so called 'triangle' have the wrong zoom effect.

    Because of the align's I am using for them when I hover over the box of the links which isn't even the word it zooms n but not from the center of the actual word, the center of the box I think.

    I do not know how to get round this given that I need the aligns to keep them in the triangle nicely.

  9. #9
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code I have right now:

    HTML:

    <div class="home-button-menu">
    <div id="gamebattles-link">
    <a href="#" style="color: black; text-decoration: none;">GAMEBATTLES</a>
    </div>
    <div id="forum-link">
    <a href="#" style="color: black; text-decoration: none;">FORUM</a>
    </div>
    <div id="about-link">
    <a href="#" style="color: black; text-decoration: none;">ABOUT</a>
    </div>
    </div>

    CSS

    .home-button-menu {
    background: url(http://cdn.wccftech.com/wp-content/u...x_One_logo.png) center center;
    height: 1000px;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    text-align: center;
    }

    #forum-link{
    display: inline-block;
    margin-top: 25%;
    text-align: left;
    width: 40%;
    transition: all 200ms ease-in;
    }

    #forum-link:hover {
    transform: scale(1.5);
    transform-origin: left;
    }

    #gamebattles-link{
    margin-top: 10%;
    transition: all 200ms ease-in;
    }

    #gamebattles-link:hover {
    transform: scale(1.5);
    transform-origin: center;
    }

    #about-link {
    display: inline-block;
    margin-top: 25%;
    text-align: right;
    width: 40%;
    transition: all 200ms ease-in;
    }

    #about-link:hover {
    transform: scale(1.5);
    transform-origin: right;
    }

  10. #10
    Regular Coder
    Join Date
    Feb 2016
    Posts
    530
    Thanks
    0
    Thanked 112 Times in 110 Posts
    but not from the center of the actual word, the center of the box I think.
    IMO the zooming works fine in my fiddle. I experienced that the easiest way to achieve centered zooming is to center the element being zoomed. If you intend to change the position of the links, use different mechanisms such as applying a margin.
    I you don't get it working at all, please post the code you used.

  11. #11
    New Coder
    Join Date
    Jan 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the output of this: Imgur: The most awesome images on the Internet (The Forum and About zooming effect is the error, nothing else)

    It zooms in to the right instead of centre and reversed with the other link.

    HTML:

    <div class="home-button-menu">
    <div id="gamebattles-link">
    <a href="#" style="color: black; text-decoration: none;">GAMEBATTLES</a>
    </div>
    <div id="forum-link">
    <a href="#" style="color: black; text-decoration: none;">FORUM</a>
    </div>
    <div id="about-link">
    <a href="#" style="color: black; text-decoration: none;">ABOUT</a>
    </div>
    </div>


    CSS:

    .home-button-menu {
    background: url(http://cdn.wccftech.com/wp-content/u...x_One_logo.png) center center;
    height: 1000px;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    text-align: center;
    }

    #forum-link{
    display: inline-block;
    margin-top: 25%;
    text-align: left;
    width: 40%;
    transition: all 200ms ease-in;
    }

    #forum-link:hover {
    transform: scale(1.5);
    transform-origin: left;
    }

    #gamebattles-link{
    margin-top: 10%;
    transition: all 200ms ease-in;
    }

    #gamebattles-link:hover {
    transform: scale(1.5);
    transform-origin: center;
    }

    #about-link {
    display: inline-block;
    margin-top: 25%;
    text-align: right;
    width: 40%;
    transition: all 200ms ease-in;
    }

    #about-link:hover {
    transform: scale(1.5);
    transform-origin: right;
    }


 

Tags for this Thread

Posting Permissions

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