CODEWITHSUNDEEP
htmlcss
I love coding
I love coding

Reputation: 1191

Layout with a background % for HTML page

I'm trying to create an HTML page which should display the arrangement of a Soccer team with a field as a background. The names of the player will be displayed with MySQL query under PHP. The problem isn't the retrive of this data, but the layout of the page; I'm facing some problems for display it with different screen dimension, and also in some type of internal display (you can see it in the code). So the idea is to display the player of the some role with different padding, taking in account the number of players per role. Here is the HTML code:

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="../css/formazione.css" />
    </head>

    <body>
        <div id="intro">
            <h1>Benvenuto nella pagina web !</h1>
        </div>
        <div id="formazione">
            <div id="title">
                <h2>Juventus vs Milan</h2>
            </div>
            <div class="campo">
                <div class="portiereC">
                    <ul class="modulo-1">
                        <li>
                            BUFFON
                        </li>
                    </ul>
                </div>
                <div class="difensoriC">
                    <ul class="modulo-5">
                        <li>
                            CHIELLINI
                        </li>
                        <li>
                            BONUCCI
                        </li>
                        <li>
                            DE CEGLIE
                        </li>
                        <li>
                            DE SCIGLIO
                        </li>
                        <li>
                            BARZAGLI
                        </li>
                    </ul>
                </div>
                <div class="centrocampistiC">
                    <ul class="modulo-3">
                        <li>
                            MARCHISIO
                        </li>
                        <li>
                            POGBA
                        </li>
                        <li>
                            PIRLO
                        </li>

                    </ul>
                </div>
                <div class="attaccantiC">
                    <ul class="modulo-2">
                        <li>
                            TEVEZ
                        </li>
                        <li>
                            MORATA
                        </li>
                    </ul>
                </div>
                <div class="portiereF">
                    <ul class="portiereF modulo-1">
                        <li>
                            BUFFON
                        </li>
                    </ul>
                </div>
                <div class="difensoriF">
                    <ul class="modulo-5">
                        <li>
                            CHIELLINI
                        </li>
                        <li>
                            BONUCCI
                        </li>
                        <li>
                            DE CEGLIE
                        </li>
                        <li>
                            DE SCIGLIO
                        </li>
                        <li>
                            BARZAGLI
                        </li>
                    </ul>
                </div>
                <div class="centrocampistiF">
                    <ul class="modulo-3">
                        <li>
                            MARCHISIO
                        </li>
                        <li>
                            POGBA
                        </li>
                        <li>
                            PIRLO
                        </li>

                    </ul>
                </div>
                <div class="attaccantiF">
                    <ul class="modulo-2">
                        <li>
                            TEVEZ
                        </li>
                        <li>
                            MORATA
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </body>
</html>

And here is the CSS:

    body {
    background-color: #F3CACE;
    padding-left: 25%;
}

#intro{
    text-align: left;
}


#title{
    color: green;
}

.campo{
    position: absolute;
    font-family: gazzetta;
    width: 540px;
    height: 375px;
    background-image: url("./campetto.jpg");
    color: orange;
    font-size: 0.79em;

}

li{
    list-style-type: none; 
    text-align: center;
}


.portiereC{
    top: 4%;
    position: absolute;
}

.difensoriC {
    left: 8%;
    top: 4%;
    position: absolute;
}


.centrocampistiC{
    left: 20%;
    top:  4%;
    position: absolute;

}

.attaccantiC{
    position: absolute;
    top: 4%;
    left: 32%;
}

.portiereF{
    right: 8%;
    top: 4%;
    position: absolute;
}

.difensoriF {
    right: 15%;
    top: 4%;
    position: absolute;
}


.centrocampistiF{
    right: 28%;
    top:  4%;
    position: absolute;

}

.attaccantiF{
    position: absolute;
    top: 4%;
    right: 38%;
}

.modulo-5 li{
    padding-top: 80%;
}

.modulo-5 li:first-child{
    padding-top: 0px;
}



.modulo-4 li{
    padding-top: 100%;
}

.modulo-4 li:first-child{
    padding-top: 20%;
}



.modulo-3 li{
    padding-top: 130%;
}

.modulo-3 li:first-child{
    padding-top: 50%;
}

.modulo-2 li{
    padding-top: 150%;
}

.modulo-2 li:first-child{
    padding-top: 200%;
}

.modulo-1 li{
    padding-top: 320%;
}



@media (max-width: 980px) {
    body{
        padding-left: 0px;
    }

    .campo{
    width: 980px;
    height: 680px;
    position: absolute;
    font-family: gazzetta;
    background-image: url("./campetto.jpg");
    background-repeat: no-repeat;
    color: orange;
    font-size: 0.8em;
    }
}



@font-face {
    font-family: gazzetta;
    src: url("../font/TitlingGothicFBCond-Bold.woff");
}

enter image description here

Upvotes: 2

Views: 405

Answers (1)

Roger
Roger

Reputation: 3256

You can do a couple things.

  1. Learn about HTML5 Canvas this has you using javascript in order to create the field and where all the players are. You can populate the field using JQuery AJAX and calling a javascript object Generated by PHP. The benefits here is that you can use Javascript for animations and other things.
  2. Learn about SVG. This uses HTML elements and CSS to create a your field. The benefit here is that you don't have to worry about learning how to use javascript.

All in all, i would suggest learning Javascript Canvas. It is more flexible in what it can do.

EDIT 9/18/2015 Here is an example. This is edited with jquery, but you can just print out the text where the soccer player would be.

$('circle').animate({
  cx: 100
}, 1000, function() {
  $('text').text('new stuff')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>


  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    <text x="0" y="15" fill="red">I love SVG!</text>
    Sorry, your browser does not support inline SVG.
  </svg>

</body>

</html>

Upvotes: 1

Related Questions