Skip navigation
Currently Being Moderated

How can I structure these texts and pictures?

Nov 24, 2012 10:38 PM

I'm learning CSS and trying to make these columns into tables.

 

http://aldenmarin.com/btp/btpindex.htm

 

How can I structure these texts and pictures? I want the next row of pictures to start on the same line.

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 24, 2012 11:05 PM   in reply to 123proust

    Do you mean you want each one of picture-text combination to come on new row - below the previous one?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 25, 2012 12:02 PM   in reply to 123proust

    In that case, your HTML should be like this from <body> onwards:

     

     

          

    <h1>BTP</h1>

     

    <div class="container">

     

     

    <div class="article">

    <img class="floatLeft" alt="Baretta" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Baretta.jpg">

       

     

        <h1>PICTURE</h1>

        <p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.</p>

        <p>Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem </p>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit misso annos centum qui decidit, inter perfectos veteresque referri debet an inter vilis atque perfectos novos? Excludat iurgia finis. ìEst vetus atque probus, centum qui perficit annos.î Quid, qui deperiitnihis perfectos uno mense vel?ìIste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.î Utor permisso, caudaeque nisi pilos ut equinae paulatim vello et virtutem, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem aestimat annis miraturque nihil nisi quod.Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur</p>

    </div>

    <div class="article">

    <img class="floatLeft" alt="Baretta" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Campbell_Robert.j pg">

       

     

        <h1>PICTURE</h1>

        <p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.</p>

        <p>Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem </p>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit misso annos centum qui decidit, inter perfectos veteresque referri debet an inter vilis atque perfectos novos? Excludat iurgia finis. ìEst vetus atque probus, centum qui perficit annos.î Quid, qui deperiitnihis perfectos uno mense vel?ìIste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.î Utor permisso, caudaeque nisi pilos ut equinae paulatim vello et virtutem, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem aestimat annis miraturque nihil nisi quod.Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur</p>

    </div>

    <div class="article">

    <img class="floatLeft" alt="Baretta" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Carlile_DJ.jpg">

       

     

        <h1>PICTURE</h1>

        <p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.</p>

        <p>Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem </p>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit misso annos centum qui decidit, inter perfectos veteresque referri debet an inter vilis atque perfectos novos? Excludat iurgia finis. ìEst vetus atque probus, centum qui perficit annos.î Quid, qui deperiitnihis perfectos uno mense vel?ìIste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.î Utor permisso, caudaeque nisi pilos ut equinae paulatim vello et virtutem, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem aestimat annis miraturque nihil nisi quod.Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur</p>

    </div>

     


    <div class="article">

    <img class="floatLeft" alt="Herb Bermann" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Garcia_Ramon.jpg">

     

        <h1>PICTURE</h1>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit m</p>

        <p>esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem au</p>

    </div>

    <div class="article">

    <img class="floatLeft" alt="Herb Bermann" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Log.jpg">

     

        <h1>PICTURE</h1>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit m</p>

        <p>esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem au</p>

    </div>

    <div class="article">

    <img class="floatLeft" alt="Herb Bermann" src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Lovas_Paul.jpg">

     

        <h1>PICTURE</h1>

        <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit m</p>

        <p>esse, is non videt quae quamque rem res consequatur. Haec disserens qua de re agatur et in quo causa consistat non videt. Non enim si alii ad alia propensiores sunt propter causas naturales et antecedentes, idciro etiam nostrarum voluntatum atque appetitionum sunt causae naturales at antecedentes; nam nihil esset in nostra potestate si res ita se haberet. Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis, qui autem ex eo cogi putat ne ut sedeamus quidem au</p>

    </div>

     

     

    </div>

     

     

    Add these to the beginning of your CSS file:

     

    .container{

    width: 800px;

    margin: 0 auto;

    }

     

    .article{

    width: 800px;

    }

     

    Find #column5 and #column6 in your CSS and comment those lines like this (or you can also remove those 2 lines). This HTML code wont require that selector for row wise listing:

     

    /*#column5 {float:left; width: 50%;}

    #column6 {float:left; width: 50%;}*/

     

     

    This will give you each of the article in a new row, one below the other at 800px wide, centered horizontally on screen.

     

    What we're doing is creating a 'container' div at 800px width and centering it horizontally with margin: 0 auto. Then each article is configured to be 800px wide too. Each of the person you're writing about is then moved into an article class div to make it 800px wide. This way they'll wrap to 800px width and come one after each other.

     

    Trust this helps.

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2012 12:04 PM   in reply to 123proust

    Do you want a column of images with text in an adjacent column?

    If yes, look at CSS display:table properties.  No floats required.

    http://www.alt-web.com/TEMPLATES/equal-height-css-columns.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 1, 2012 12:23 PM   in reply to 123proust

    Don't use table layouts and HTML styles.  That's the 1990's approach to web design.

     

    You should learn to do things the modern way with HTML5 and CSS.  The whole idea behind the modern web is to keep styles & content separate with minimal markup.

     

    To illustrate, copy & paste the following code into a new, blank page.  Change colors to suit with the CSS properties panels.

     

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS Display Table</title>
    
    <style>
    html {background: #960}
    
    body {
    font: 13px/22px Helvetica, Arial, sans-serif;
    color: #FFF;
    height: 100%;
    background: #577867;
    margin: 30px auto;
    width: 1000px;
    border:6px outset #FFF;
    background-color: #069;
    /**rounded borders**/
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    /**box shadow**/
    -moz-box-shadow: 10px 5px 5px #333;
    -webkit-box-shadow: 10px 5px 5px #333;
    box-shadow: 10px 5px 5px #333;
    display:table;
    text-align:center;
    }
    
    section {display: table-row;}
    
    aside {
    display: table-cell;
    text-align:center;
    width: 25%;
    vertical-align:middle;
    }
    aside:nth-child(even) /* every even column */  {
    border:none;
    background-color: #EBEBDF;
    color:#325C74;
    }
    aside:nth-child(odd) /* every odd column*/ {background-color: #CADFEB; color:#069;}
    
    /**text styles**/
    h1, h2 {
    font-size: 20px;
    padding: 0 20px;
    line-height: 24px;
    
    }
    h3, h4 {
    font-size: 16px;
    line-height: 18px;
    padding: 0 20px;
    }
    
    p {padding: 0 20px;}
    </style>
    </head>
    <body>
    
    <header><h1>XYZ Web Site</h1></header>
    
    <!--top section-->
    <section>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Baretta.jpg" alt="Baretta">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
    </aside>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Campbell_Robert.jpg" alt="">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
    </aside>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Carlile_DJ.jpg" alt="">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
    </aside>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Garcia_Ramon.jpg" alt="">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
    </aside>
    </section>
    
    <!--bottom section-->
    <section>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Log.jpg" alt="Herb Bermann" alt=""></a>
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
    </aside>
    
    <aside>
    <img src="http://i191.photobucket.com/albums/z40/LAPOEM/Author_Lovas_Paul.jpg" alt=""></a>
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
    </aside>
    
    <aside>
    <img src="http://farm9.staticflickr.com/8068/8174198166_a0e6cc08f8_o.jpg" width="238" height="240" alt="buchla side WEB">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
    </aside>
    
    <aside>
    <img src="http://farm7.static.flickr.com/6015/5949499554_ed9cc66818_m.jpg" width="238" height="240" alt="DRG ONLINE COVER">
    <p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
    </aside>
    </section>
    
    <footer>
    <p>©2012 Footer message here</p>
    </footer>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 2, 2012 9:45 AM   in reply to 123proust

    Design View is not & never has been 100% reliable.  For best results, use Split view with Live View.  And Preview in browsers to test.

     

    I used embedded CSS in the web forum for expediency.  Ideally, you should  move all your CSS code to an external style sheet.  It makes site management much simpler.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points