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..

    Big Cartel - Slideshow Questions

    How to make custom layout grids more semantic? [closed]

    how to change text color hover

    How to apply table cell formatting using CSS

    How to make a transition in height without knowing the height before?

    how to adjust the background color to the right height

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    How to access my .png from a folder using CSS?

    How to set background texture to 50% of the page in css

    How to extend the length of a page through CSS?

    How i can create dynaminc ordered list items with pure css

    How come my divs are jumping around during a transition?

    How to center a child div with a smaller parent div

    How to make the click logo appear without a href in css/html?

    How can I change the path to the css file dynamically?

    How to create a separated menu with logo in between

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How to change the order of columns in CSS template to put important content first?

    How does CSS float work when applied to an “ul” element

    How to center a span in a div

    jQuery: How to change the size of a css block?

    How do I make a DIV tag stretch to the size of it's children?

    How do I set the table cell widths to minimum except last column?

    How can i make it through using bootstrap grid?

    How to fill Frameless grid dynamically?

    CSS: how to keep image never modified with same “offset” all the time?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    how to highlight specific control with css [duplicate]

    how to write this code in right way in javascript

    How to style dropdown menu using CSS in HTML