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 12
  1. #1
    Junior Member
    Join Date
    Jun 2015
    Posts
    16
    Member #
    50643

    help - align image with text

    Hi guys. As you know already, I don't have any experience as web developer.
    So, I'm creating a website for my company as a first project.

    My problem right now is visible in bellow picture:

    exemplo.jpg

    I want to align that list of pictures with a list of bottoms.

    What is the best way to fix it?
    It driving me crazy, because I saw lots of tutorials but i'ts not working.

    Thank you very much guys!

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quickest fix i can say is to put each icon in a div with the text that should be below it.


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member
    Join Date
    Jun 2015
    Posts
    16
    Member #
    50643
    You mean create a div for each icon and put the text in the same div?

    thanks

  5. #4
    Member
    Join Date
    Jul 2015
    Posts
    52
    Member #
    50729
    Liked
    2 times
    Yes. Fixed width on the divs. Within the div, set the left and right margin of each icon to auto. Set text align to center on each div.

    Or you could just use a table, which is ideal for fixed-gird layout. Ooops! Sorry, that's not politically correct.

  6. #5
    Junior Member
    Join Date
    Jun 2015
    Posts
    16
    Member #
    50643
    Hi. Thanks for the help. But I need some more

    This is my html:
    <div class="empresa">
    <img src="empresalogocinza.png"><br>
    <a href="empresa.html">EMPRESA</a>
    </div>


    <div class="produtos">
    <img src="produtoslogocinza.png"><br>
    <a href="produtos.html">PRODUTOS</a>

    <div class="contatos">
    <img src="contatoslogocinza.png"><br>
    <a href="contatos.html">CONTATOS</a>

    EXEMPLO.JPG

    My css:
    div.empresa {
    margin: auto;
    text-align: center;
    }

    div.empresa {
    margin: auto;
    text-align: center;
    }

    div.produtos {
    margin: auto;
    text-align: center;
    }



    Where can I improve? My logos are vertical. How can I put them horizontally?


    Thanks very much
    Last edited by Rafael Vinhas; Aug 12th, 2015 at 04:45 AM.

  7. #6
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Firstly, use the same class name for all 3 of your divs, that way you only need one set of CSS code for the divs. Then put display: inline.

    Id names are for single elements.
    Class names can be for multiple elements.

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Like Breno said using a class can clean up the css a lot. Using 1 class will make editing easier especially if you plan to go responsive(which you should) and using media queries.

    Also your Productos, Contatos divs have no closing div tag that I can see. Make sure you close your tags.


    Sent from my iPhone using Tapatalk

  9. #8
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Also you have div in front of your class selectors. Take that away so its only .classname not div.classname

  10. #9
    Junior Member
    Join Date
    Jun 2015
    Posts
    16
    Member #
    50643
    Thanks for all of you
    great help

  11. #10
    Junior Member
    Join Date
    Jun 2015
    Posts
    16
    Member #
    50643
    Hi all!
    Sorry to interrupt again.

    I tried what you suggest me, but didn't work. For sure is something that I'm doing wrong.

    My html:
    <div class="botoes">
    <img src="empresalogocinza.png"><br>
    <a href="empresa.html">EMPRESA</a>
    </div>

    <div class="botoes">
    <img src="produtoslogocinza.png"><br>
    <a href="produtos.html">PRODUTOS</a>
    </div>

    <div class="botoes">
    <img src="contatoslogocinza.png"><br>
    <a href="contatos.html">CONTATOS</a>
    </div>


    My css:

    body{
    background-color: white;
    margin: 0px;
    }

    .botoes {
    display: inline;
    margin: auto;
    text-align: center;
    }


    nav{
    text-align:center;
    }


    That's the result:
    exemplo.jpg


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 10:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com