How to position some text?


Tags: html,css,twig

Problem :

Sorry for the noobie and stupid question, but I know only a bit about css and I don't know how to style my site. Here is my code:

HTML (Twig) :

<div class="wrap">
    <div>
        <img class="birthday" src="http://www.clker.com/cliparts/1/d/a/6/11970917161615154558carlitos_Balloons.svg.med.png">
            <div class="try"> 
               This friends have brithday today: 
               {% for bd in birthdays %}

               <p>
                   <a href="{{ path('friend_id', {'id': bd.id}) }}">{{ bd.name }}</a>
                      <span class="years">
                         ({{ bd.years }} years)
                       </span>
               </p>

               {% endfor %}

            </div>

    </div>
</div>

CSS:

body {
    background-color: #FFFFF1;
    text-align: center;
    font-size: 17px;
    font-family: Tahoma, Geneva, sans-serif;  
}

p {
    margin: 10px;
}

a {
    text-decoration: none;
    color: #6a9211;
}

a:hover {
    text-decoration: underline;
}

.wrap {
    width: 700px;
    margin: auto;
}

.birthday {
    width: 49px;
    height: 80px;
    float: left;
    margin-left: 150px;
    display: block;  
}

.try {
    display: block;
    margin-right: 150px;
    margin-bottom: 50px;
}

.years {
    font-size: 12px;
}

And this is what I get. The thing I want to fix is Maria and Peter to be display under Anna and John, all of them 4 centered under the label This friends have birthday today:. I know that it's because of the image, but I don't know how to make it look fine. :(

Please help! Thanks in advance!



Solution :

You only need to add some margin-left to the try-class: http://jsfiddle.net/VWY8N/

.try {
    display: block;
    margin-right: 150px;
    margin-bottom: 50px;
    margin-left: 201px;
}

    CSS Howto..

    How do I remove a CSS class from a jqGrid cell?

    How to choose font different font-weight? use bolder one or just font-weight?

    How to set a different main content background for each page in weebly?

    How to use vertical align in bootstrap

    CSS: How to make the padding-right between li even?

    How to center align circles?

    XPath how to find second element with CSS class name

    How to get the bottom border to stretch fully across a page in CSS

    How to align images and unordered list

    How to fill margin space with divs and give it styles?

    How to set DIV's width based on CSS indexes

    How to script CSS to achieve hide/appear effect based on hover

    Styling the input type=“file”. How do i display the filepath?

    How to pass an array from controller to PHP file that contains CSS before the view is loaded?

    How to make this styling with css

    How to place several elements in one row when using a list?

    Vertical alignment in css of multiple elements (How to achieve this layout)

    How to have logo go into / overlay black bar along the top of screen?

    How to expand link on hoover? Add “<” “>” symbols around link?

    how to search with GET method in MVC

    CSS how to select nav and li tags but exclude specified class?

    How to increase size of something in class, but not other elements in class?

    How i can set the height of black overlay in css that all other things goes hidden?

    How to get the current year using css?

    CSS: How to target a specific cell inside a table?

    How to make bootstrap 3 dropdown menu working for no JS user

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to use the css height attribute for showing scroll bar in HTML table

    JQuery Animate() showing sticky behaviour with other elements in the same class

    How can i make the responsive design using CSS?