CODEWITHSUNDEEP
html
Het
Het

Reputation: 203

Images not properly aligned in html

The last images and the text is not properly aligned. Here's the code:

<html>

<head>
    <title>PODAR Ahmedabad!</title>
</head>


<body bgcolor="BFFFC2">
    <div id="main">

        <hr size="7">

        <div id="header">

        <div align="left">
        <img src="podar.jpg" width="25%" height="20%">
        </div>

        <h1 align="center"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>

        <div align="right">
        <img src="school.jpg" width="25%" height="20%">
        </div>

        </div>

        <hr size="7">

    </div>
</body>

enter image description here

dimension of the first image is 300*105 and second image is 244*244

Upvotes: 2

Views: 129

Answers (3)

Haydar C.
Haydar C.

Reputation: 805

Not: Do not use font tags.. And must embeded fonts in site; visit : https://www.google.com/fonts

example : adding in head tags for Shadows Into Light font : https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>

<html>

<head>
    <title>PODAR Ahmedabad!</title>
    <style>
        #main {
            display: block;
            width: auto;
        }
        .fontPapyrus{
            font-family:"Papyrus";
        }
        .fontSize36{
            font-size:48px;
        }
        .fontBold{
            font-weight: bold;
        }
        .colorGreen{
            color:#34C510;
        }
        .fontSketchFlowPrint{
            font-familiy:"SketchFlow Print";
        }
        .inlineBlock{
            display:inline-block;
        }
        .verticalAlignMiddle{
            vertical-align: middle;
        }
    </style>
</head>


<body bgcolor="BFFFC2">
<div id="main">

    <hr size="7">

    <div id="header">

        <div class="inlineBlock verticalAlignMiddle">
            <img src="podar.jpg" width="25%" height="20%" valign="top">
        </div>

        <h1 align="center" class="inlineBlock verticalAlignMiddle">
            <span class="fontSize36 fontPapyrus">Welcome to
                    <span class="fontBold colorGreen fontSketchFlowPrint">PODAR</span>
            </span>
            <span class="fontPapyrus">ahmedabad!</span>
        </h1>

        <div align="right" class="inlineBlock verticalAlignMiddle">
            <img src="school.jpg" width="25%" height="20%" valign="top">
        </div>

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

Upvotes: 1

P. Frank
P. Frank

Reputation: 5745

Use css inline

<div style="display:inline">
    <img src="podar.jpg" width="25%" height="20%">
</div>

<h1 style="display:inline"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>

<div style="display:inline">
    <img src="school.jpg" width="25%" height="20%">
</div>

Upvotes: 2

Derk
Derk

Reputation: 42

It is because there isn't enough space, so either add space to the element that contains the 3 things or make those smaller. With space I'm talking about Width.

Upvotes: 0

Related Questions