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 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Facebook like button and centering issue

    hello peoples!!

    I've got an issue with my facebook like button.....

    i'm trying to create a responsive website.....

    everything on my site looks great BUT when i resize the window 2 things happen....

    1. the buttons at the top of the page don't stay centered (check the site at its smallest dimensions) (i've tried text align center, it doesn't work right)

    and

    2. the facebook like button seems to jump down about 25px when you start resizing the site....

    i'm not sure what the problem is???

    http://gandhiproductions.herobo.com/...4/mapping.html

    please help me anyone??

    thank you

    Gandhi

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again evilgandhi,
    I'm almost positive we've gone over this before...

    For text-align: center; to work it must be applied to the parent. That will center inline elements it contains.

    The child elements would then be display: inline-block; so they can be centered by the way the parent is handling inline elements.

    In this case, ul.nav is parent and the ul.nav li's are child.



    edit... This is exactly what you're doing with your ul.psel on the same page.
    Last edited by Excavator; 03-07-2013 at 07:26 PM.
    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
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah i've tried that, it works but the images and text in each button doesn't display correctly and i confusing me...

    i've updated it have a look and see

    http://gandhiproductions.herobo.com/...4/mapping.html

    i'm still confused about whats happening with the last button (facebook like button)

    thank you for your help

    gandhi

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by evilgandhi View Post
    yeah i've tried that, it works but the images and text in each button doesn't display correctly and i confusing me...
    Look back at our conversation just this morning about relative and absolute positioning.



    i'm still confused about whats happening with the last button (facebook like button)
    Also earlier this morning where you used vertical-align: top; to control how the inline elements get positioned.


    ...
    I'm sorry if I sound impatient, I don't mean to. I dislike being ignored though. It seems like you are using this board for help, applying fixes offered here and completely ignoring any explanation of how they work.

    [/rant]
    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

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey dude, sorry if it sounds like i'm not listening, it's just frustrating when it takes me a whole day trying to figure out a simple problem like this, constant back and forth between dreamweaver and browser, searching the web for answers etc..... all to no avail.... makes me feel like i'm going in circles...

    i've got the boxes at the top to center but i really don't understand why the images and text don't stay where they are when the browser resizes....

    i'm really sorry but i can't figure it out........ i even had it working fine in a previous version, which i've looked at but.... still i can't get it right.....

    sorry, i don't wanna seem like i'm wasting your time, i'm really grateful for all the help i get..... please remember i'm still learning

    gandhi

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by evilgandhi View Post
    i've got the boxes at the top to center but i really don't understand why the images and text don't stay where they are when the browser resizes....
    Those images move around different than their parent li because they are absolutely positioned relative to #naholder when it should be your ul.nav li.mapping that is relative.

    As a perfect example, look at your own ul.psel further down that page you link to. It's absolute positioned .details are relative to their parent li's because ul.psel li are position: relative;

    ...
    I think I am not explaining the relationship between relative and absolute positions well enough.
    Look at this demo snippet for a more visual picture, just copy/paste the entire code into a new .html document and view it in your browser. Resize your browser a time or two and note how the red box moves.

    Then remove the position: relative; line (highlighted in red below) from the CSS for #container, open the document in your browser again and try resizing the viewport again. You should notice quite a difference in how the absolute positioned red #box moves.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	margin: 50px auto;
    	background: #999;
    	position: relative;
    }
    #box {
    	height: 200px;
    	width: 200px;
    	position: absolute;
    	top: 100px;
    	left: 200px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="container">
    		<div id="box"></div>
        <!--end container--></div>
    </body>
    </html>
    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

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry but i still can not get this to work, i've tried changing the postions relative and absolute........ but nothing changing..... i'm still getting the same problems...... i really don't know where i'm going wrong.....

    this is a previous version you may of helped me with......

    http://gandhiproductions.herobo.com/...st2/menu2.html (this one uses 1 svg image per box)

    why does this one work?

    yet i can't get my revised version working

    http://gandhiproductions.herobo.com/...4/mapping.html (this on uses 1 image for all boxes)---is this linked to the problem?

    i've got this one working to a degree......... it's just not centering at it smallest dimensions

    i've tried to implement your advice, but like i said i can't get it working...........
    Last edited by evilgandhi; 03-08-2013 at 02:16 PM.

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i can get the boxes to center..... using "text-align" but then all the images go wrong again...... i know this isn't what you wanna hear...... but i seriously can not get the absolute and relative thing to work..... i understand it..... it just doesn't seem to solve the problem.....

    i'm not sure what to do....

    current version->
    http://gandhiproductions.herobo.com/...4/mapping.html

    old version that works
    http://gandhiproductions.herobo.com/...st2/menu2.html

    this one is using the absolute and relative
    http://gandhiproductions.herobo.com/...5/mapping.html

    gandhi


  •  

    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
    •