Aligning elements with different attributes

Discussion in 'CSS' started by Brown Crow, Jul 12, 2011.

0
  1. #1
    First of all... I'm a complete noob when it comes to web-design, so please bear with me! ;) I'm trying to create a header where the title is continued by an “}” with different formatting from the text preceding it. 

    <html>
<head>
<style type="text/css">

li.header
{
color:black;
font-size: 2em;
font-family: georgia, serif;
font-style:bold;
font-style:italic;
list-style-type:none;
margin:0;
padding:0;
float:left;
}

li.klamme {
color:green;
font-size: 3em;
font-family: georgia, serif;
font-style:bold;
list-style-type:none;
margin:0;
padding:0;
float:left;
}

</style>
</head>

<body>

<ul>
<li class="header">Title</li>
<li class="klamme">}</li>
</ul>

</body>
</html>
    Code (markup):
    In this example the position of the squiggly bracket after the title doesn't match the baseline of the title. What am I doing wrong? I've tried out a few different approaches but none work.
     
    Brown Crow, Jul 12, 2011 IP
  2. bli_wedhooz

    bli_wedhooz Peon

    Messages:
    76
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    add css for ul

    
ul {
display:inline-block;
line-height:100px;
}
    Code (markup):
     
    bli_wedhooz, Jul 13, 2011 IP
    Brown Crow likes this.
  3. Brown Crow

    Brown Crow Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It worked! Thanks a lot, mate! :D
     
    Brown Crow, Jul 13, 2011 IP
  4. Brown Crow

    Brown Crow Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Another question:

    Is there a simple way of creating asymmetrical space between elements
    in the same <ul>, other than inserting many &#160;

    (There would be three classes of <li> here, one for the title, another one
    for the “}”, and one for the links)
    As in the example below:


    TITLE } ___a_ blank_space_here____ Link1 Link2 Link3


    Simply applying "float:right" to the class of <li>where the links are inserted,
    won't float them to the right. The Css for the links are:

    li.header_link {
font-size: 0.6em;
font-family: arial, sans-serif;
letter-spacing:2.15px;
list-style-type:none;
margin:0;
padding:0;
float:right;
}
    Code (markup):
    The code is still identical to the one in post #1, the only difference is that I've
    also followed the suggestion of bli_wedhooz, and also added links:
    <li class="header_link"> url...etc, etc </li>
     
    Last edited: Jul 13, 2011
    Brown Crow, Jul 13, 2011 IP
  5. Brown Crow

    Brown Crow Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I found a way to do this.
    I added "margin-left:25em;" to the link section in the CSS.

    I'm still open to other approaches, though.
     
    Brown Crow, Jul 13, 2011 IP