1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Alignment using CSS

Discussion in 'CSS' started by Nicky21, Feb 20, 2005.

  1. #1
    Hello

    I'd like to align 3 elements using DIV and SPAN and i would like to know how is this done using css.

    Element 1 has 1 image (logo)

    Element 2 has some text (2 H1 headers)

    Element 3 will ocupy with a background all the remaining of the screen (depends on how much is left)

    Now using tables it would look like that:
    <table width=100%>
    <tr>
    <td width=100>
    <img ....>
    </td>
    <td width=1>
    <h1>Blah</h1>
    <h1>more blah blah blah</h1>
    </td>
    <td style="background ....">
    </td>
    </tr>
    </table>

    however trying the same thing with one <div> and three <span> i found that it won't align correctly

    Can i get some help here?

    In case you're curious i'm trying to rewrite the header for my homepage.
     
    Nicky21, Feb 20, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's hard to help when you don't say what's broken :)

    Anyway, you can find some info on centering block-level elements in the thread 7061.

    Within block-level elements, you can align using text-align. Keep in mind that text-align is inheritable and don't set it in a high-level element unless you know what you are doing.

    Sometimes it is easy to align inline elements as blocks by changing their display property (e.g. <img style="display: block; margin: auto;" ... >)

    Finally, you can shift block-level elements to either side by making them into floats.

    J.D.
     
    J.D., Feb 20, 2005 IP
  3. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks J.D. for the help!

    It's so hard to tell what's broken... there are so many things that don't work....
    I don't even know where to start!

    I'll read the thread you gave me and do some more experimenting, then get bak here with (hopefuly) a more concrete problem...
     
    Nicky21, Feb 20, 2005 IP
  4. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok: here's one concrete problem (one of the many)

    <div style="width:100%; height:120px;">
    <h1>Blah</h1>
    <h1 class=a>More blah blah blah</h1>
    </div>

    The combined <h1>'s use about 60 pixels height, unless the text wraps and takes two lines; in this case they take about 80 pixels.

    The challenge is: how should i vertically allign the <h1>'s ? As you can see, the div is 120 pixels height, but the "vertical-align" doesn't work...

    Using tables i would just put the property "valign=middle" in a <td>........
     
    Nicky21, Feb 20, 2005 IP
  5. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here's another problem:
    http://www.crea-soft.com/about1.html

    I can't seem to enter a <br> without the second line to go below the div.

    When I enter the <br> the output looks like this:
    http://www.crea-soft.com/about2.html


    the offending code:
    <div style="width:100%; height:116px; background: #FFFFFF url(./img/puzzles-grid/jigsaw<? print ((int)(Date("j")) % 8); ?>.jpg) no-repeat right top;">
    <span>
    <img src="/img/jigsaw-puzzles.jpg" width="130" height="96" border="0" vspace="10" hspace="10" alt="Jigsaw Puzzles and Puzzle Games">
    </span>
    <span>
    <h1 valign=center style="display: inline; vertical-align:top;"><?php print $header1;?></h1>
    <br>
    <h1 style="display: inline;vertical-align:top;" class=a><?php print $header2;?></h1>
    </span>
    </div>

    Apparently the <br> is a block element and gets displayed after the next block element (the div). But how am i suppose to display the second text below the first one?
     
    Nicky21, Feb 20, 2005 IP
  6. nullbit

    nullbit Peon

    Messages:
    489
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Try this (untested):
    
    <style>
    #divA, #divB, #divC
    {
      float: left;
    }
    
    #divA
    {
      width: 10%;
    }
    
    #divB
    {
      width: 40%;
    }
    
    #divC
    {
      width: 40%;
    }
    </style>
    
    [ ... ]
    
    <div id="divA">
      [Content ...]
    </div>
    
    <div id="divB">
      [Content ...]
    </div>
    
    <div id="divC">
      [Content ...]
    </div>
    
    Code (markup):
    Adjust the widths accordingly. Don't let the total width reach 100% , it will wrap in some browsers (IE), and remember, allow for padding and margins which adds to the total width.

    If you want the same thing you have with tables, you need to do a lot of CSS hacking (or just stick with tables).
     
    nullbit, Feb 20, 2005 IP
  7. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks! the code work fine.

    Question: how do i adapt the code for the following widths:

    Width 1: 100px;
    Width 2: All the remaining screen width?

    I will need this in numeous places.....

    Thanks again!
     
    Nicky21, Feb 20, 2005 IP
  8. nullbit

    nullbit Peon

    Messages:
    489
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #8
    This works in Firefox (untested in IE):

    
    <style>
    #content
    {
      margin: 0 0 0 110px;
      background: red;
    }
    #left
    {
      width: 100px;
      float: left;
      background: green;
    }
    </style>
    
    <div id="left">
      [ content ... ]
    </div>
    
    <div id="content">
      [ content ... ]
    </div>
    
    Code (markup):
    I added the background colours, so the layout was clear.
     
    nullbit, Feb 20, 2005 IP
  9. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks! That code works just fine!!!!

    I have just another question:

    This code does not align my <h1><h2> headers in the middle; can somebody please give me a code that aligns vertically the div's content?

    <div style="vertical-align: middle; height: 120px;">
    <h1>Text 1</h1>
    <h2>Text description ....</h1>
    </div>

    you can see the output here:

    www.crea-soft.com/about2.html
     
    Nicky21, Feb 20, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #10
    vertical-align has no effect on block-level elements, only on inline elements and table cells. Use padding, margin and line-height to space h1's. Use floats to shift them left or right.

    J.D.
     
    J.D., Feb 20, 2005 IP
  11. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    J.D. , i noticed that.... Vertical won't work...

    Can you give me please a solution that would not involve any fixed margin? sometimes the <h1> elements occupy half of the 120pixels height i have assigned for the header, but sometimes they take all the height.
    I would need a solution that aligns them vertically centered, not just 10-20 pixels from the top down...

    Thanks!
     
    Nicky21, Feb 20, 2005 IP
  12. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #12
    In general, in CSS any element can be displayed as something else using the display property. Unfortunately, IE doesn't seem to understand anything but block and inline. In FF, the following would do what you need:

    <div style="display: table-cell; height: 120px; vertical-align: middle;">
    <h1>0123456789 0123456789</h1>
    Code (markup):
    Another approach would be to inrease line-height, but in your case it won't work because you may have 2-3 lines in <h1> and lines will stand too far apart from each other.

    I can't really think of anything else and would simply use a table - it seems that it's the right tool for the job in this case.

    J.D.
     
    J.D., Feb 20, 2005 IP
  13. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thanks guys for all the help! you've made my transition from table world to css world a lot smoother!

    I'd like to offer you something back: some links from my website. J.D. , nullbit, please mail me your site's details and i'll add you a link on my pages!

    Email: traian at crea-soft com
     
    Nicky21, Feb 20, 2005 IP
  14. nullbit

    nullbit Peon

    Messages:
    489
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #14
    You are too kind. It's not necessary, I'm glad to help anyway.
     
    nullbit, Feb 22, 2005 IP
  15. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #15
    But i want to! I'm not using of receiving something without giving something back. And a link costs me nothing!
     
    Nicky21, Feb 22, 2005 IP
  16. nullbit

    nullbit Peon

    Messages:
    489
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #16
    You can click on the scales image instead, to add to my reputation. I'd be happy with that.
     
    nullbit, Feb 22, 2005 IP