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 13 of 13
Like Tree3Likes
  • 1 Post By abduraooft
  • 1 Post By sunfighter
  • 1 Post By abduraooft

Thread: Problem with aligning multiple images in a vertical line.

  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with aligning multiple images in a vertical line.

    It seems that social media icons are pushing my logo image away from the center and I have no idea how to fix it please help me fix it :

    http://i.imgur.com/SPpqNuR.png

    Code:
    .socialmediaicons {margin: 8px; float: right;}
    
    .logoimage {
    color: black; 
    font-weight:normal; 
    text-transform:uppercase; 
    font-family:"Century Gothic", Arial, sans-serif; 
    text-align:center;}

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Can't do anything with a picture. Post link to your site or use the code tags and post the code here.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    .socialmediaicons {
    top: 8px; 
    right:8px;
    position:absolute;
    /*float: right;*/
    }
    (assuming the container of these elements has got a position:relative; in its style)
    OskarKoch likes this.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Can't do anything with a picture. Post link to your site or use the code tags and post the code here.
    Oskar Koch | Bringin' You What's Best.

  • #5
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    .socialmediaicons {
    top: 8px; 
    right:8px;
    position:absolute;
    /*float: right;*/
    }
    (assuming the container of these elements has got a position:relative; in its style)
    did exactly as you said, still doesnt work :/

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    still doesnt work is not a good analysis of the problem. Your very close to center with your logo and everything else in the body tag. You have a 5 px gap at the right and all things are forced to the left.
    You do have a </div> without an opening tag, but don't think that has anything to do with things. Your social media icons are not causing any problems.

    So is it that 5px on the right that's bother you or do you have a different problem?

    I removed you BODY margins and made the page full spread.
    body {
    background-color:white;
    //margin-left: 15%;
    //margin-right: 15%;
    }

    Looks OK at 1020px width Haven't got a bigger monitor so see if you like it. It does get rid of the unknown 5px for outer space thingy.
    Last edited by sunfighter; 08-30-2014 at 10:26 PM.
    OskarKoch likes this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    still doesnt work is not a good analysis of the problem. Your very close to center with your logo and everything else in the body tag. You have a 5 px gap at the right and all things are forced to the left.
    You do have a </div> without an opening tag, but don't think that has anything to do with things. Your social media icons are not causing any problems.

    So is it that 5px on the right that's bother you or do you have a different problem?

    I removed you BODY margins and made the page full spread.
    body {
    background-color:white;
    //margin-left: 15%;
    //margin-right: 15%;
    }

    Looks OK at 1020px width Haven't got a bigger monitor so see if you like it. It does get rid of the unknown 5px for outer space thingy.
    It was much more than 5px and it really looked not good (check imgur link in my 1st post), but I added two br's for now just to make it look OK.. for now.. but I want the icons to be at the same level as logo ? any help would be greatly appreciated

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Remove those <br>s and do the following
    Code:
    <div id="buttons">
    
    <a target="_blank" href="http://www.mixcloud.com/oskarkoch"><img alt="mixcloud" src="img/Social Media Icons/32x32mixcloudcircular.jpg" class="socialmedialinks"></a>
    <a target="_blank" href="http://www.youtube.com/0zkidrumandbass"><img alt="youtube" src="img/Social Media Icons/32x32youtubecircular.png" class="socialmedialinks"></a>
    <a target="_blank" href="http://www.facebook.com/oskarkoch"><img alt="facebook" src="img/Social Media Icons/32x32facebookcircular.png" class="socialmedialinks"></a>
    </div>
    Code:
    #buttons{
    position: absolute;
        right: 0;
    }
    Then add position:relative; to body, since body is the container element of #buttons.

    Now, you may remove the float from .socialmedialinks, if required.
    OskarKoch likes this.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much abduraooft! It worked perfectly

    Also I've got one question for you, I've noticed some of the content on my website doesn't appear in chrome but it does in firefox. Do you know any quality resources that will guide me in the right direction? Thanks!

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    "I've noticed some of the content on my website doesn't appear in chrome but it does in firefox"

    Please be more specific

    btw, I do notice you haven't followed exactly what I said.

    You don't have to set margin-left & right to #buttons.

    If you just add position:relative; to body, it'll be okay. That's the way an absolutely positioned element work.
    Last edited by abduraooft; 09-01-2014 at 12:04 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    If you just add position:relative; to body, it'll be okay. That's the way an absolutely positioned element work.
    changed

    Quote Originally Posted by abduraooft View Post
    Please be more specific
    For instance the text on: oskarkoch.com/share.html does not appear in chrome but it does on firefox (or maybe it's just me :P).. basically are there any good articles or books you'd recommend.. that will help me optimize a website for all major web browsers?

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I get the same content in both browsers. Perhaps you need to rectify the errors in your markup, before dealing with cross browser issues.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Cool Image floating left and right

    Image floating left and right
    Code:
    Image floating left and right
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
        <head>
            <title>Image Floating Left And Right</title>
    <style type='text/css'>
    img {
        margin: 8px;
        border: 1px solid rgb(144, 196, 120);
    }
    img#happycodings {
        float: left;
    }
    img#codes {
        float: right;
    }
    p {
        font: 16px arial;
    }
    </style>
    
    
        </head>
        <body>
            <img src='http://www.happycodings.com/images/happy.gif' alt='happycodings' id='happycodings' />
            <p>
                The truth is that there is only one terminal dignity - love.<br>
                And the story of a love is not important - what is important<br>
                is that one is capable of love.<br>
                It is perhaps the only glimpse we are permitted of eternity.<br>
    
                Helen Hayes
                <img src='http://www.happycodings.com/images/happy.gif' alt='happycodings' id='codes' />
    
    
                Love is that condition in which the happiness of another person<br>
                is essential to your own.<br>
    
                Robert Heinlein<br>
            </p>
            <p>
                The mountains are capped with snow of white<br>
                The fires are lit, the cabins are bright<br>
                Two lovers sit, not alone tonight<br>
                Their hearts are warm on this cold winter night<br>
                Outside the snow falls to the ground<br>
                But no one will know, it won't make a sound<br>
    
                Cody Schroeder
            </p>
        </body>
    </html>
    Image margin top and margin left negative value
    Code:
    Image margin top and margin left negative value
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Margin Top And Margin Left Negative Value</title>
    <style type="text/css">
    img {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -86px;
     margin-left: -128px;
     height: 180px;
     width: 240px;
    }
    </style>
    </head>
    
    <body>
    
      <img src="http://www.happycodings.com/images/happy.gif" width="160" height="80" alt="happy codings">
      
    </body>
    </html>


  •  

    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
    •