Web page with picture, text, php function

English Programming/Scripting
1

Hello.
I’m trying to create a web page which the presentation is as follows:
1 °) at the top of page an image
2 °) below the text
3 °) to complete a php function that returns information.

I tried different things but none work.

Script 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    padding: 10px ;
    border: 5px solid navy;
    margin: 10px ;
}
img {
    padding: 10px ;
    border: 10px solid cyan;
    margin: 10px ;
}
</style>
<title>THIS IS THE TITLE</title>
</head>
<body>
<div>
<img src="an_image.jpg" alt="stuck-out_tongue.png"
 height="480" width="640" align="middle">
</div>
<div>
<center>THIS IS A TEXT</center>
</div>
<?php phpinfo(); ?>
</body>
</html>

script 2 : the same with small change

img {
    padding: 10px ;
    border: 10px solid cyan;
    margin: 10px ;
    margin-left: auto;
    margin-right: auto
}


<!DOCTYPE html>
<html>
<head>
<style>

img.container1 {
    display: block;
    padding: 10px ;
    border:  10px solid cyan;
    margin:  10px
    margin-left: auto;
    margin-right: auto
}

</style>

<title>THIS IS THE DEFAULT SERVER</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <img class="container1"   src="an_image.jpg" alt="stuck-out_tongue.png" height="240" width="320">
            </td>
        </tr>
        <tr>
            <td>
               A TEXT
                <br>
                ANOTHER TEXT
            </td>
        </tr>
        <tr>
            <td colspan="<?php phpinfo(); ?>">
            </td>
        </tr>
    </table>
</body>
</html>

I the last example :
1°) the align statement in “img” does nothing, the image is always left side
2°) The second row have no horizontal border.

Any help is welcome.

2

The problem here might be that you say “but none work”, but we can not see what you get instead (and we have only a scanty description about what you expected to get). And you know of course that “it does not work” is the worst type of problem description, not only in the computer world.

3

This is a short example (but I do not know if it incorporates your problem):

henk@boven:~/Documents/Linux/eigenboek/www> cat tst.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
</head>
<body>
<p><img src="henm.jpeg" alt="HenM"></p>
<p>Some text</p>
</body>
</html>
henk@boven:~/Documents/Linux/eigenboek/www>

And this is what it does: http://hcvv.home.xs4all.nl/tst/test.html .

BTW, this is validated by the W3C validation servicve as correct.

4

Hello.

Script 1

<!DOCTYPE html>
<html>
<head>
<style>
div {
    padding: 10px ;
    border: 5px solid navy;
    margin: 10px ;
}
img {
    padding: 10px ;
    border: 10px solid cyan;
    margin: 10px ;
}
</style>
<title>THIS IS THE TITLE</title>
</head>
<body>
<div>
<center>THIS IS TEXT 1</center>
</div>
<div>
<img src="image_1.jpg" alt="stuck-out_tongue.png"
 height="480" width="640" >
</div>
<div>
<center>THIS IS TEXT 2</center>
</div>
<?php phpinfo(); ?>
</body>
</html>

http://paste.opensuse.org/7085412
Image is not between text 1 and text 2
Image is not in “it’s box”
Image is not in the middle.
Image has no cyan border
Text 2 is not in the middle ( because of the image )

Script 2

<!DOCTYPE html>
<html>
<head>
<style>

img.container1 {
    display: block;
    padding: 10px ;
    border:  10px solid cyan;
    margin:  10px;
    margin-left: auto;
    margin-right: auto
}

</style>
<title>THIS IS THE TITLE</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <img class="container1" src="image_1.jpg" alt="stuck-out_tongue.png" height="240" width="320" >
            </td>
        </tr>
    </table>

    <div>
        <center>THIS IS TEXT 1</center>
        <br>
        <center>THIS IS TEXT 2</center>
    </div>

    <table>
        <tr>
            <td colspan="<?php phpinfo(); ?>">
            </td>
        </tr>
    </table>
</body>
</html>

http://paste.opensuse.org/40072923
Image stay left

script 3

<!DOCTYPE html>
<html>
<head>
<style>

img.container1 {
    display: block;
    padding: 10px ;
    border:  10px solid cyan;
    margin:  10px;
    margin-left: auto;
    margin-right: auto
}

</style>

<title>THIS IS THE TITLE</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <img class="container1" src="image_1.jpg" alt="stuck-out_tongue.png" height="240" width="320" >
            </td>
        </tr>
        <tr>
            <center>THIS IS TEXT 1</center>
            <br>
            <center>THIS IS TEXT 2</center>
        </tr>
        <tr>
            <td colspan="<?php phpinfo(); ?>">
            </td>
        </tr>
    </table>
</body>
</html>

http://paste.opensuse.org/75798884
Image stay right
Texte is not after image, and not before php function

Than k you for helping

5

Error 404 on your link.

6

Strange, I do not get that. Not in my original post, nor in your QUOTE above this one. >:)

7

Does not work if you include php code as I try.

And extension must be .php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
</head>
<body>
<p><img src="image_1.jpg" alt="image_1" height="240" width="320"></p>
<p>Some text</p>
<?php phpinfo(); ?>
</body>
</html>

http://paste.opensuse.org/64881900

8

I am wondering which tutorial on writing HTML you are using. And also which version of HTML you are using.

You do a lot lot of things I never would do (like adding height and width to your img, normaly heigth and width are extracted by the browser from the image file).
Why isn’t your text not within <p></p>? And <center></center> does not exist in some HTML versions. Also, I would start composing the page and then add the styles later.

I would normaly like to sit with you at the system and then discuss and try things (while looking through the docs), but that is realy difficult with this Forums as a media :frowning:

9

It is difficult to assess, because your page is incorporated in the openSUSE paste page (what is what when looking at the page source). But IMHO adding that phpinfo is not something where you can understand rightaway what it does. It generates a lot of code and it is probably not written to be incorporated inside another page.

I do not know if you realy want to show the phpinfo in your final result or if you only use it as an example. In the last case, I would use a some more simple PHP statements.

But as said earlier, it is not 100% clear what you want. I know that is dificult to explain, because it is somewhere in your head and not on a picture. But it is difficult.

10

Can try this or kill the table stuff and make life easier :slight_smile:

http://paste.opensuse.org/90148158

phpinfo.php creates its own table with CSS and all.

So you wrap its table inside your own table - making it all a bit funky. Table inside a table.

Actually it is one huge table inside one tiny table cell!

Can just add normal HTML with CSS on top - before phpinfo.php gets spit out.


<?php
/*
Phpinfo of some kind http://paste.opensuse.org/90148158
*/
?>
<!DOCTYPE html>
<html>
<head>
    <title>THIS IS THE TITLE</title>
    <meta charset="utf-8">
    <style>
        table {
            width: 980px !important; /* phpinfo.php has own CSS to override */
            margin: 0 auto;
        }
        img.container1 {
            display: block;
            padding: 10px;
            border: 10px solid cyan;
            margin: 10px auto;
            float: none;
        }
        .textstuff {
            text-align: center;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img class="container1" src="image_1.jpg" alt="stuck-out_tongue.png" height="240" width="320" >
            </td>
        </tr>
        <tr>
            <td class="textstuff">
                THIS IS TEXT 1
                <br>
                THIS IS TEXT 2
            </td>
        </tr>
        <tr>
            <td>
                <?php phpinfo(); ?>">
            </td>
        </tr>
    </table>
</body>
</html>
11

If I understand correctly, you are trying to produce 3 boxes across the page, one below the other, with the order being image, text , php info.

To center the content inside of a <div>, you need to provide a width and then use padding:

div { width:800px; padding:0 auto; }

.

To center the div box itself (or any other component) you need to specify the width and then use the margin styling

 div { width:650px; margin:0 auto; }

Either way, you need to specify the width. If you do not specify a width, then the

will only be as wide as the content within it.

This also works for content as well, so to center an within a

you need to fix the width of the
content, and then can either have the
center the content or the to make itself centered in its container:

Sample having the image center itself (the height and width tags don’t have to be in the CSS, it is fine to put with the actual image):


<style>
div 
{ 
   width:800px;
   margin:0 auto; /*if you want to center the div in the page */
}

img 
{
   height:480px;
   width:640px;
    margin:0 auto;
}
</style>

and the HTML portion would be :


<body>
<div>
  <img src="an_image.jpg" alt="hello world" />
</div>
</body>

One way to ensure that the

does not have content on either side of it, you can set a
to a width of 100%, and then place the
that you want more visible and all that, inside.

So if you want all 3 boxes to be the same width, you could set a larger

to the width you want, and set the inner
boxes to a width of 100% and that will force each
to be blow the previous one.


<div>   <-- this one is the width of the content of the page
    <div>   <-- this is the one of the boxes to hold the content
        <img>
    </div>
    <div>
        Text portion
    </div>
    <div>
        <?php phpinfo(); ?>
    </div>
    <div>
</div>

Since any CSS attributed to the tag itself overrides the CSS in the header. So I would set up a div for the content of the whole page setting the width and probably with clear borders, then set the 3 divs with content inside this content div.

In the below code you set the

tags for the 3 boxes (since they are the same), but override those settings for the encompassing tag. That one sets the width (width:800px; ) and the margin (margin:0 auto; ) and removes the border (border:none; ). Because of the width and margin, the
should be 800px wide and sit in the middle of the page with no visible border.

Then the

boxes are set so they are all 100% wide with a border and the content is centered within it. The width will maintain that the box is all the way across the larger div. If the containing (first)
width is changed (like to 1024px), the boxes will get wider but that is the only change.

I added the margin of 2px to the

tags so there is a separation bewteen the boxes, and their borders will be visible separate boxes. Because all divs will have this margin, it means there is 4px between the two boxes.


<html>
<head>
<style>
div {
   width:100%;
   border: 5px solid navy;
  padding:0 auto;
   margin:2px;
  }
img {
   margin:0 auto;
   }

</style>
</head>
<body>
<div style="width:800px; border:none;margin:0 auto;" >

  <div>
    <img src="an_image.jpg" alt="hello world" width="640px" height="480px" />
  </div>

  <div>
    Text portion goes here!
  </div>

  <div>
    <?php phpinfo(); ?>
  </div>

</div>
</body>
</html>

I know it sounds dumb, but while this works mostly with Firefox and Chrome(Chromium), if you are rendering these in Internet Explorer then who knows WHAT will happen! While IE is getting better, it is so far off Microsoft is scrapping IE for a completely new browser (Spartan?) that is supposed to be more standards compliant.

I hope what I have written here is understandable.

Firefox has a nice web development tool that allows you to see what CSS is active on a tag, as well as change it and immediately see how it looks (turn off CSS, add new tags or adjust the CSS currently on it). IT won’t save those changes but are helpful in getting immediate feedback on changes to figure things out.

12

IMHO you can center all in your page (exceptions in other style statements with

body { text-align:  center; }
13

In fact in any order. I am just looking how to make a web page.

Thank you for your response that I am studying.

14

[LEFT]Hi all.
My question was really a general question:

I want to be able to display anything anywhere (left, right, center; top, bottom, middle).

1 °) an image,
2 °) some text
3 °) the result of a PHP code.

I have not had luck by choosing the phpinfo function in my question. At least I learned that this function returns a table.

I will study all your recommendations and give you news as soon as possible.

I very thank you so much for taking the time to answer me.

[/LEFT]

15

Hello
Have change width to 1024 for comfort.
Image is on the right.
Text is not between image and php function (known as a table as you said ).
http://paste.opensuse.org/33151026

Now adding new text before picture, show the new text at the wright place but the text under the picture ( as previous picture ) is still at the wrong place.
Picture is on the right.
http://paste.opensuse.org/56261721

Removing the php code, text go to right place.
http://paste.opensuse.org/16230109

So the problem seems to come from the php response.

16

http://www.codecademy.com/tracks/web beat phpinfo page :slight_smile:

http://learn.shayhowe.com/html-css/

http://www.css-101.org/

http://htmldog.com/

and there are 1000s other sites.

Start with basics and use a good code editor with syntax highlighting, check of code plus some easy preview.

There are few oldies for Linux I think, Bluefish? http://bluefish.openoffice.nl/index.html but can also use Brackets https://www.youtube.com/watch?v=11qKvgM-pFw&list=PL_VA_vL3FHcZxaB36NcOtQIWqz7bXKWLo Is avail for openSUSE https://software.opensuse.org/package/brackets?search_term=brackets Is a bit naked but can be an advantage. Has loads of extensions for almost everything. Code editor is important enough to sit through those videos and practice. Will save you time.

Forgot: you need to install this https://software.opensuse.org/package/libgcrypt11 to make Brackets work. Has to do with Chrome/Chromium integration. A bit more to say about Brackets vs. Linux but you can post if something bugs you about it.

17

I think I can only repeat wha I tried to tell you earlier, but in a bit more direct way.

I asked you which tutorial on writing HTML you are following. Not that I am realy interested, but to bring to your attention that just start writing HTML without knowing any background is not a good idea.

I also gave you a starting point of correct HTML that has an image and some text. Just to begin with. It does not contain any <div>, but you seem to want those for some reason unknown to me. Also it is not clear what HTML you are writing (just HTML is not enough). All this brings me to the conclusion (I may be wrong, but you probably are able enough to ignore my advices completely, no hard feelings) that you started with the idea that writing some HTML must be fun (it is), and that diving in it somewhere should do the trick (it doesn’t).

Same for PHP. That is a programming language and it supposes that you know about neat HTML and of course about programming languages. The usage of that one PHP routine that generates a complete page is not a good start because, as others also explained, it will just flood your trial HTML page with statements and you will not be able to watch the results of tiny changes in your HTML.

While people here are willing to help you with details in creating correct HTML, it is IMHO impossible to give you a HTML course here through the posts in the forums.

18

I have found that a great resource I use, sometimes just for “what is the text for …?” questions, is w3Schools.com.

You actually have 3 technologies you are fooling around with here and each one needs to be looked at specifically:

HTML = the basics of layout and tags and the structure
CSS = the styling (borders of divs, placement of picture, etc.)
PHP = so far it is the phpinfo(), but is able to do much more

There’s no “one” way of doing the coding in reality. Some people push for <div> while others use <table>, some prefer putting the style on the element itself or in naming each element and specifying the style by the id while others prefer putting all of the style in the header.

I’m not sure why the phpinfo() is messing up the other text information, I haven’t looked into the results all that much. Maybe start the PHP portion with something like


<?php 
print 'Hello World'; 
// or you can use "echo" to do the same thing (display the text)
echo 'Hello world!';
?>

If you see the text, then it means PHP is working which is usually what running phpinfo() is for (unless you are looking through the results to see what is running/installed).

Also, try different browsers because they do sometimes show things differently. I usually develop for Firefox and Chrome, then check on IE to see what needs tweaking. It is because pages display things differently. Just don’t go crazy, once you have it the way you like in one browser it is a case of making the other browsers display it the same, which becomes a more focused search.

Just keep trying/plugging! There are a lot of good books, sites and probably classes that can help too.

19

Thread is closed.

Thank you for helping.

BTW I know how to print “hello world”