Placement of photo in the page

Asked By 150 points N/A Posted on -
qa-featured

I would like to put some photos on my page, say in the middle top to bottom and center them. I was able to do it. It looks good.

I have a photo and I put it at the center of the page by placing it at the top of the page. I did it this way: <div align="center"> name of photo<div>
 
It works. Now, I want my links to go to the left of the page by starting at the top. They say I can use Div also. How?
 
 
SHARE
Answered By 200 points N/A #104168

Placement of photo in the page

qa-featured

Why don’t  you use a table tag <TABLE> to layout your page other than using division tags <DIV>?

You have to create a two column table. Left column for links and other column for images. You can keep your links in a another table also.

 www.abc.com

www.abc1.com

www.abc2.com

                                                                                 <image>                                  

 

So the code would be like this:

<html>

<body>

                        <table width="100%">

                                    <tr>

                                                <td width="25%">

                                                            <a href="">link 1</a></br>

                                                            <a href="">link 2</a></br>

                                                            <a href="">link 3</a></br>

                                                            <a href="">link 4</a></br>

                                                            <a href="">link 5</a></br>

                                                            <a href="">link 6</a></br>

                                                </td>

                                                <td align="center">

                                                            <img src="button.jpg"></img>                                                

                                                </td>

                                    </tr>

                        </table>

            </body>

</html>

If you really want a division <DIV>,  to do then you have to use a style attribute.

style="float: left"

You can get a clear idea about float style attribute from the https://www.w3schools.com/Css/css_float.asp

The float property defines whether or not an element should float.

Fact:  Position: Absolute elements ignore the float property

left        :   Element floats left

right     :   Element floats right

none    :   The element not float

                  Displayed where it occurs in the text. (This is default)

inherit :   Value that specified of the float property which should be inherited from the parent item.

So the code would go like this:

<html>

<body>

                        <div style="float: left">

                                    <a href="">link 1</a></br>

                                    <a href="">link 2</a></br>

                                    <a href="">link 3</a></br>

                                    <a href="">link 4</a></br>

                                    <a href="">link 5</a></br>

                                    <a href="">link 6</a></br>

                        </div> 

                        <div align="center" >

                                    <img src="button.jpg"></img>

                        </div>

            </body>

</html>

I prefer to use a table to layout a page. It is easy and controllable.

When you use a division tag <DIV>,  you have to have a better idea about the style attribute.  All these layouting part are done by the style tag when you use a division tag.

style="position : "

style="margin : " ………etc.

Style Property Groups for layouting.

    * Background and Dimension

    * Border and outline

    * Font and Text

    * Generated content

    * Margin and Padding   

    * Positioning

    * Print

    * Table and List  

You must be familiar with these property groups so that you will not get into a trouble like this again.

I recommend  to use the w3school site for your reference when you face a problem with HTML stuff.  It helps me a lot.

But there are both pros and cons when comparing the use of division tags and table tags. You can choose either way which you prefer.  Last several years, people have been moved towards the division based structure from the table based structure. So the decision is yours.

You can get a suitable decision after looking at this article. This will help you get a better decision.

https://coding.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/

I found this more valuable. I think you will find it too.

Most experts move into the division based layout structure. As a novice, I would like to use a table layout mechanism. Try both of them and find out what's your choice.

About Harry
Questions
1
Answers
55
Best Answers
34

HP Touchsmart 300z series touch complications

Previous

Please give me suggestion. Related to purchase

Next

Related Questions