Jump to content

JoHubb

Members
 View Profile  See their activity

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by JoHubb

    Change Column width in Document

    in CSS

    Posted · Edited by JoHubb

    4 hours ago, dsonesuk said:

    IS the link i gave what you want?

    It shows all columns but the last three at 25% of total 100% width, the last three 33.33% of total 100% width,

    Is this statement what you mean by a 'silly guessing game'?

    I was grateful for your help but clearly it only goes a certain distance.

    Change Column width in Document

    in CSS

    Posted

    Maybe  I am being very slow, but when I use your code, I get 3 columns throughout the document.

    Perhaps I did not make myself clear.

    For the first two-thirds of the paper I need 4 columns for rows of photos.  I have rows of text spanning the entire width of all four columns between these.

    For the last one-third I want only 3 columns also for rows of photos but I want these photos to take up almost all the available space i.e. they will be larger than the 4 column photos.  Again, there will be text spanning the entire width of all four columns between them.

    Am grateful for your help and interest. 

     

    Change Column width in Document

    in CSS

    Posted · Edited by JoHubb

    Thanks. I get the general drift but don't understand about 

    nth-last-child

    I need one row of three columns for photos between perhaps 5 or 6 rows of text.  I can do this when i am using four columns for the photos,  but I don't know how to make the change to three columns half-way through.

    I can see that the changes I need are made at the top of the document which is a start.  And  'nth-last-child' must refer to either the last column, or is it the last row?

    Am confused. 

    Change Column width in Document

    in CSS

    Posted

    At present, using this at the top of the document, I have four columns. 

    I would like to change this to three columns towards the end of the document.  I have experimented without success. 

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Using Internal CSS</title>
    <style type="text/css">
    body    {
        font-family: Arial, Verdana, sans-serif;}
        
    h3      {
        text-align: center;
        color: BlanchedAlmond;}
        
    p       {
        line-height: 1.21em;
        font-size: 1.18em;
            }
    * {
    box-sizing: border-box;
        }

    .column {
    float: left;
    width: 25%;
    padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}  
      
     </style>

    I'd be grateful for advice.  Thanks!
     

    Images stacked instead of in a row.

    in CSS

    Posted · Edited by JoHubb

    I have two images of different heights to be placed in a row between lines of text.

    Zoe C2 is a taller file by about 50% than Congo.jpg.  This coding sets the pictures one on top of the other. 

    I'd be grateful for advice.  

     <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 50%;
    padding: 20px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>

<body>
<h2>Four Foolish Maidens</h2>

<p> These four were absolutely stupid. They forgot to bring oil for their lamps.</p>
<div class="row">
    <div class="column">
        <img src="file:///home/howard/Pictures/Congo.jpg" alt="Congo" style="width:10%">
    <div class="column">        
        <img src="file:///home/howard/Pictures/Zoe%20C2.png" alt="Zoe C2" style="width:100%">
    </div>
</div>    
</body>
</html>
     

    Images

    in HTML/XHTML

    Posted

    On 9/19/2018 at 11:09 PM, dsonesuk said:

    Get the image to show using file:/// as you did in accessing html file in bowser address bar. Also with windows you can right click->open with-> then select browser, this will open the image in browser, not a a html web page, use the Linux alternative to get the same result. You can get the url required to use in image src attribute.

    This did the trick!  This way of doing things would seem pretty fool-proof, using as it does the exact path to the file. 

     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>

    <body>
    <h2>Four Foolish Maidens</h2>

    <p> These four were absolutely stupid. They forgot to bring oil for their lamps.</p>
    <img src="file:///home/howard/Pictures/Congo.jpg" alt="Congo" width="826" height="516">

    </body>

    </html>

    Many thanks! 

    Images

    in HTML/XHTML

    Posted · Edited by JoHubb

    Thanks.  But you are jumping ahead of me!  I am running a desktop PC with Linux. It is not a server. I do not have a website. I am using the 'Try it Yourself' pages.

    When I try to open my own picture in a 'Try it Yourself' page, it cannot find it.  Maybe I am jumping ahead of myself.

    Images

    in HTML/XHTML

    Posted

    It's my first post and I am not far up the HTML learning curve. Thanks for having me on these boards.

    Quote

     

    However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

    Example

    <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

     

     
    I run Linux Kubuntu and I don't follow this. How does the program know where to look for the sub-folder? There is no path...?? 
    In any case there is no /images sub-folder in my set up. Do I need to create one somewhere? If so, where? 
×
×
  • Create New...