Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1174658

    Hi,

    I use here a color section with 5 columns.
    Each column has 2 text boxes: one for the book title and one for the author below.

    Unfortunately I don’t get it to work, that the author is always at the bottom of the framed box; my CSS knowledge is not that good.

    View post on imgur.com

    Could you please tell me what I have done wrong or how I can achieve it, so that – not matter how many lines the book title has – the author is always aligned at the bottom of the box?

    And my custom CSS:

    
    #top .bookshelf {
    border-style: double !important;
    max-height: 250px !important;
    }
    
    #top .bookshelf-title {
    	font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.5em;
        letter-spacing: 3px;
    	text-align: center;
    color: #ffffff;
    }
    
    #top .bookshelf-author {
    	font-size: 11px;
    	font-weight: 500;
    	font-style: italic;
    	line-height: 1.7em;
    	letter-spacing: 3px;
    	color: rgba(255,255,255,0.8);
    	text-align: center;
    	margin-top: 60px;
    vertical-align: bottom;
    }

    Thank you.

    #1175025

    Hey BeeCee,

    I need a username and a password to see your page. However i copied your customizations to my local installation.

    Please add following code to Quick CSS as well

    #top .bookshelf {
        border-style: double !important;
        max-height: 250px !important;
        height: 180px;
    }

    Then change following code

    #top .bookshelf-author {
        font-size: 11px;
        font-weight: 500;
        font-style: italic;
        line-height: 1.7em;
        letter-spacing: 3px;
        color: rgba(255,255,255,0.8);
        text-align: center;
        margin-top: 60px;
        vertical-align: bottom;
    }

    To following one

    #top .bookshelf-author {
        font-size: 11px;
        font-weight: 500;
        font-style: italic;
        line-height: 1.7em;
        letter-spacing: 3px;
        color: rgba(255,255,255,0.8);
        text-align: center;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    Best regards,
    Yigit

    #1175108

    This works perfectly, thank you very much, Yigit, I got it to work!

    #1175112

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How to vertical align two text boxes in a column?’ is closed to new replies.