Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    something weird is happenning

    and ive been trying to figure it out for the last 45 mins.

    problem is on Coleio Website

    so i have two anchor links and im tring to move them left and right of the page. when i add margin-right to the page, whether i put in 50px or 300 px it goes to the very left of the page. whats going on here, margin left works fine

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    how do i get links to align alongside each other? te way i have it done now is the links start off on top of each other then i use margin-left and right to move them into the correct position on the horizontal plane and margin-top to get them to align the right height. i know im going about it arseways i just cant remember how to do them the easier way and i cant remember where saw the tut.

    maybethere is a way to align lists <ul> on the horizontal plane instead of vertical? that would be the easiest i guess.

    if you look at my site you will see the "funny ****" link is all the way to the left even though i have it set to margin-right:50%; im absolutely stumped!!!
    if ur viewing my site it only works in firefox

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    An element that sits on the left won't respect a right margin if it doesn't have to. It will push other things away from it. You're trying to force each individual element to do slightly different things. If you want to really unlock what CSS can do, you need to start thinking about all of the elements together. For instance, instead of trying to push each individual link to position, let's write one block of code that will make them all naturally flow into position.

    Right now, you have this:
    Code:
    a {color: blue; text-decoration: none;}
    
    #damnlol {position: relative;
    width: 100px;
    margin-right: 50%;
    margin-top: -36px;
    font-family: helvetica;
    font-size: 20px;
    color: white;
    text-align: center;
    line-height: 30px;
    text-shadow: 0px 0px 6px white;
    display: block;
    border-right: 1px solid grey;
    }
    
    
    #facebook {position: relative;
    width: 100px;
    margin-left: 7.5%;
    margin-top: -30px;
    font-family: helvetica;
    font-size: 20px;
    color: white;
    line-height: 30px;
    text-shadow: 0px 0px 6px white;
    display: block;
    border-right: 1px solid grey;
    }
    
    
    #twitter {position: relative;
    width: 75px;
    margin-left: 15%;
    margin-top: -30px;
    font-family: helvetica;
    font-size: 20px;
    color: white;
    line-height: 30px;
    text-shadow: 0px 0px 6px white;
    display: block;
    border-right: 1px solid grey;
    }
    Let's find a way to make this a little easier, and a little more maintainable. I'm assuming this is your navigation. Under that assumption, we have 2 options. We can add a class to each link, or the better option, which is to put them inside a <nav> element.
    HTML Code:
    <nav>
      <a href="http://www.damnlol.com" target="_blank"> funny **** </a>
      <a href="http://www.facebook.com" target="_blank"> facebook </a>
      <a href="http://www.twitter.com" target="_blank"> twitter </a>
    </nav>
    Now, we can select just those links using a descendant selector: nav a{...}
    So, the idea here is that we're going to push the nav element where we want it, and then style the links all together.
    Code:
    nav{    /*This is where we'll push the whole group of links at once */
      position:relative;
      height:30px;
      width:303px;
      line-height:30px;
      /*In here, use positioning values to push the whole nav element into place. */
    }
    nav a{     /*Now, we can style all of the links at the same time*/
      display:inline-block;   /*This will allow sizing without it taking up the whole line */
      height:30px;
      width:100px;
      border-right: 1px solid grey;
      font-family:helvetica, sans-serif;  /*Always provide a generic fallback ;) */
      font-size: 20px;
      color: white;
      text-decoration:none;
      text-shadow: 0px 0px 6px white;
    }
    You'll have to add the positioning values to the nav element where I put the comment in the first CSS block.
    So, we've just about halved your CSS, and it will do the same thing. We also removed the need for an ID on each link.
    Last edited by Ronald Roe; Jan 25th, 2014 at 02:26 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,785
    Member #
    5580
    Liked
    723 times
    I'm trying to visualize what you "wish" it would look like.

    Can you make a little sketch or something (using MS Paint) that shows me what the top line should look like "in your head"?

    I use positioning (relative or absolute) as the last resort in any layout. The reason is simple ... when dealing with a responsive layout for all devices, positioning can wreck everything. That's why I want to see how you really wish it would look ... to render it the way you want without positioning the div or class elements.

    EDIT:
    And to make my point clear, view www.coleio.com website and resize your browser. When it gets narrow, look at what happens to the links on your top line. I'm using my 20 inch monitor now, but what if I was viewing it on an iPad Mini, or a Kindle Fire?
    Last edited by mlseim; Jan 25th, 2014 at 09:21 AM.


  6. #5
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    nanavnavnav lol, i couldnt remember what the element for it was!!

    i knew i was going about it the wrong way, had tried it severl times, thanks ronald

    i havent figured out the different size screens part thing yet, i dont even know how to resize a browser, do you mean clicking the box icon beside the x?

    right now im practicing the code and elements ive learned so i cn remember them properly

  7. #6
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    damn it!!!! i have made those changes Ronald but they are not showing inline, the first two are but the last one is coming up below them.. why does stuff always go wrong for meeeee

  8. #7
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    when i make it wider they just end up showing in a vertical row, dont get this at all!!!

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Oops. I forgot to compensate for the border. Set the nav's width to a higher number, at least 303px; That was my mistake. I changed it above as well.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    thats the first thing i did, but i changed it in the nav a instead of just the nav.. when i changed it in the nav a it aligned them vertically, is that because the width specified there is for each individual link?

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Yes. You change it once, and it changes all of them. To fix it, it's best to adjust the container.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com