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
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Having trouble positioning line of text in margin auto

    For the life of me I'm missing something probably as obvious as the nose on my face, but I cannot figure out how to position my "About" line in a particular place on my page.

    This is for my mobile site, and the few things that will be on the site are centered -- except I would like my "About" link placed in a certain place -- but it must move with everything else. Right now it just sticks to the left side of my container like it's glued there.

    I've tried text align, display block, margin px auto . . .

    I don't necessarily need the answer, but if someone could steer me in the right direction I would appreciate it. I'm confused.

    Here's a link to my site: http://www.theeagleextra.com/wordic/wordic.html

    I still don't have the whole database uploaded to the table for my search, just some z words such as zone, zip, and zoologist.

    Thanks.


    css:
    Code:
     a.about
     {
     font-family:verdana;
     font-size:10px;
     color:#A4A4A4;
     text-decoration:none;
     font-weight:normal;
     font-style:normal;
     }
    html:
    Code:
    <a class="about" href="http://www.theeagleextra.com/ssi/wordicinput.shtml"
    target="results_frame">About Wordic</a>
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Kevin,
    Since your anchor is really just text, this works -
    Code:
     
     .container {
     width: 100%;
     max-width: 800px;
     min-width: 320px;
     background-color: #fff;
     margin: 0 auto;
    text-align: center;
     }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    To make display: block; and margin: 0 auto; work... it also needs a width.
    Try this -
    Code:
     a.about
     {
     font-family:verdana;
     font-size:10px;
     color:#A4A4A4;
     text-decoration:none;
     font-weight:normal;
     font-style:normal;
    display: block;
    width: 100px;
    margin: 0 auto;
    background: #f00;
     }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi Excavator,

    Thanks! Your idea worked. I first tried your margin: 0 auto; text-align: center; but that did do it.

    I've never had to do this before. Using auto centering is all new to me.

    So, we define a block, give it a width, then center our text inside of it, or text-align to the left or the right. Is this right?

    Here's what I did and it placed my About word in the middle.

    Code:
     a.about
     {
     font-family:verdana;
     font-size:10px;
     color:#A4A4A4;
     text-decoration:none;
     font-weight:normal;
     font-style:normal;
     display: block;
     width: 100px;
     margin: 0 auto;
     background: #fff;
     text-align:center
     }
    If we want the About word all the way to the right, we create a block as wide as we need to get the word over there, then use text-align right to place it there. Is this right?


    ...
    Last edited by Kevin_M_Schafer; 12-19-2011 at 08:05 PM. Reason: text
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    So, we define a block, give it a width, then center our text inside of it, or text-align to the left or the right. Is this right?...
    Not quite. That was two seperate solutions and you are combining them.
    text-align: center; is never going to center that anchor if applied to the anchor It will center the text contained in an element so to center your anchor it must be applied to the anchor's container...in your case, .container.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Kevin_M_Schafer (12-19-2011)

  • #6
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Okay, I'm beginning to see now. So, if I simply use text-align: center in my .container element, I will be centering all text -- including text that is an anchor -- within my .container element.

    If my anchor was an image, I would use display:block and assign a width, and then use margin 0px auto. Right?
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Excavator,

    I applied the text-align to my .container element and deleted the centering instructions from my .about anchor element. It worked just like you said.

    I already had my browser open to my site, so after I uploaded my new page with the changes, I refreshed my browser and the "About" line jumped down about 2pixels.

    I tried to apply a margin-top: -2px or something -- even just a plain margin-top: 30px to see if it would move, and it's stuck in place.

    When I use margin-top:10px in my searchbox element, it spaces it down from my logo. It looks as if this technique doesn't work as easily with anchors.

    ...
    Last edited by Kevin_M_Schafer; 12-19-2011 at 11:18 PM. Reason: test
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Kevin, you might add the display:block to your a.about style. I think if you do that, you should be able to set its top margin.

    Dave

  • #9
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi Dave,

    Thanks for the reply. I've been battling the space issue all night, and when I read your post, I thought to try viewing my page in FF (I know, I should have done that right away). It looks fine and the padding-top code works. However, see the attached image. This is a screen shot of my page in IE9.

    I cannot for the life of me figure out where all this space is coming from beneath the logo and beneath the searchbox (I've marked the two areas with red arrows).

    Here's a link to my page: http://www.theeagleextra.com/wordic/wordic.html

    Firefox looks like it should, but even IE9 looked great all day until about two hours ago.
    Attached Thumbnails Attached Thumbnails Having trouble positioning line of text in margin auto-object.jpg  
    Last edited by Kevin_M_Schafer; 12-20-2011 at 03:34 AM. Reason: text and link
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #10
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Oh, crud. I just went to Developer Tools in IE9 and my browser was on IE9 Compatibility View! How did that happen? I haven't gone to Developer Tools all day!

    Thanks, Dave. I appreciate your help.

    Edit: I got your post below: "Ah, good!"

    You know, I feel stupid for even bothering you! Lol! Thanks.
    Last edited by Kevin_M_Schafer; 12-20-2011 at 03:47 AM.
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Hmmm. For what its worth, I'm looking at it in IE9 and the page looks identical to how it looks in FF. I do not have the larger spaces you're showing in your attached IE9 snapshot...

    Dave

    Edit: Ah, good!

  • Users who have thanked tracknut for this post:

    Kevin_M_Schafer (12-20-2011)


  •  

    Posting Permissions

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