Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help with positioning box link in CSS

  • This topic is empty.
Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #107476

    You haven’t failed at all! Everyone has to learn, and as far as I can tell you are doing a pretty awesome job for how much you currently know.

    To answer your question, try something like this:


    Phone: 0123456789

    Where you currently have the element is probably fine, you might try floating it to the right to help get it in position.

    #107477
    agogley
    Participant

    I’ll try that tomorrow. If I stay up any longer tonight my wife will not be happy. (Plus I do need to go to work since I don’t get paid for coding websites).

    Based on your code, I’m assuming I’ll have to make a CSS entry that is something like
    #contact-info (And then put the code to float:right)
    and then two CSS entries to define the span class and “a class.”

    Correct me if I am wrong, but it also looks like it doesn’t matter in html whether you put class or href first within an anchor tag. For example, in your code above I could have switched the class and href references and it would have worked the same, right?

    #107478

    Correct, although rather than using a # (which means ID, and can only be used once on each page) you would use a . (which means class). In other words: .contact-info

    Regarding attributes (href, class, etc.) the order doesn’t matter at all, although common practice is to list classes first to make it easier to find what you are looking for and make changes.

    #107555
    agogley
    Participant

    Ok, I played around with the code. I need your help to verify.

    I added the following to HTML per yout suggestion:

        

    Phone: 281-550-9321  l
      

    So that html was added under the div-id “nav-bar.”

    And I added this to CSS (actually coded it manually!):

    .contact-info {float:right; margin-top:13px; margin-right:75px}

    .phone {font-size: 14px;
    font-weight: bold;
    color: #57A2AE;font-family:Arial}
    .email {font-size: 14px;
    font-weight: bold;
    color: #57A2AE; font-family:Arial}

    This pushed down my div-class .nav-area to where it was no longer centered over the grey bar. So for the .nav-area I had to change the padding from 56px to 42px. That seemed to do the job.

    So is that how I should have coded it from the beginning? Or am I still missing something? Did I do the right thing by changing the padding on the nav-area or should I have properly adjusted something else?

    Thanks again for your help. (BTW, I didn’t publish the changes so you can’t see them on my link above).

    #107558

    That seems fine to me! One thing that might help for this, and in the future, is that you could do this:

    .phone,
    .email {
    color: #57A2AE;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    }

    That saves you from writing out the same properties twice.

    #107559
    agogley
    Participant

    So simple, LOL.

    Thanks again. I’ve learned a lot from this exercise and now I think I can properly code the text in my footer by creating new classes just like we did here.

    BTW, I think I was so intent on creating an email link within the text that I missed the forest for the trees. The “EMAIL US” link is now right above the “CONTACT US” link in the main navigation bar. So after all that, I’ll be making a change. But, I now know I can successfullly move it or create something new elsewhere.

    BTW, just to ask one more question. Was changing the padding the right move with the nav-area bar? Or would you have handled the change some other way?

    Also, what is the difference in using padding vs. margins?

    #107560

    Glad to help out, and that you have learnt some stuff too!

    In this case, padding is suitable, and behaves a bit more than margin (two margins butting up against each other collapse for instance). If you had a background image though, margin would be the way to go.

    To understand a bit more about the difference between margin and padding, and the CSS box modal in general, have a read of this: https://css-tricks.com/the-css-box-model/

Viewing 7 posts - 16 through 22 (of 22 total)
  • The forum ‘CSS’ is closed to new topics and replies.