Форум программистов [Powered by Invision Power Board]

Код



<?include 'global.php';?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    <script type="text/javascript" src="JavaScript/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JavaScript/work.js"></script> 
    </head>
    <body>       
     <table id="1" class="match">
      <tr class="teams">
       <td class="team1"><div class="team_content">Команда 1</br>
       <img src="image/team.jpg" alt=""><span class="procent">(26%)</span></div></td>
       <td class="vs">VS</td>
       <td class="team2"><div class="team_content">Команда 1</br>
       <span class="procent">(26%)</span><img src="image/team.jpg" alt=""></div></td>
      </tr>
     </table>
    </body>
</html>

Код


*{
    margin: 0;
    padding: 0;
}

body, html {
margin:0px;
padding:0px;
height:100%; /* Высота 100% для экрана */ 
background-color: #000;
color:#DAA520;
font-family: Arial;
font-size: 21px;
}

.match {
width:100%;
height:100px;
border: 1px solid #4f4f4f;
}

.match .team1{
width:44%;
border: 1px solid #4f4f4f;
}

.match .team1 .team_content{
width:100%;
position:relative;
left:45%;
}

.match .team1 .team_content img{
margin:auto 10px;
}

.match .team1 .team_content .procent{
position:relative;
bottom:15px;
}


.match .team2{
width:44%;
border: 1px solid #4f4f4f;
}

.match .team2 .team_content{
width:100%;
position:relative;
left:45%;
}

.match .team2 .team_content img{
margin:auto 10px;
}

.match .team2 .team_content .procent{
position:relative;
bottom:15px;
}

.match .team .vs{
position:relative;
border: 1px solid #4f4f4f;
margin:50%;
}

Код


<article id="item1" class="match">
    <div>
        <figure>
            <figcaption>Команда 1</figcaption>
            <img src="../images/icon_1.png"/>
        </figure>
    </div>
    <div>(26%)</div>
    <div>VS</div>
    <div>(74%)</div>
    <div>
        <figure>
            <figcaption>Команда 2</figcaption>
            <img src="../images/icon_3.png"/>
        </figure>
    </div>
</article>

Код


        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #DAA520;
            font-family: Arial;
            font-size: 21px;
        }

        article.match {
            border: 1px dotted #ccc;
            display: table;
            padding: 20px;
            margin: 20px auto;
        }

        article.match > div{
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            position: relative;
        }

        article.match > div:nth-child(2){
            font-size: 0.7em;
        }
        article.match > div:nth-child(3){
            margin: 0 50px;
            font-size: 1.5em;
        }
        article.match > div:nth-child(4){
            font-size: 0.7em;
        }

        article.match img{
            border: 2px solid #DAA520;
            margin: 5px;
            padding: 10px;
        }

        article.match figure{
            margin: 10px;
        }

Цитата(MrDmitry @ 24.10.2014, 13:23

)

Извините за не скромный вопрос, а как можно сделать такое же но без использования таблиц?

Цитата(Gold Dragon @ 24.10.2014, 13:52)

пишу на HTML5, если не нужно то просто замени всё на div или добавь стили smile

Может код не очень оптимизирован, но есть куда стремиться

Код


<article id="item1" class="match">
    <div>
        <figure>
            <figcaption>Команда 1</figcaption>
            <img src="../images/icon_1.png"/>
        </figure>
    </div>
    <div>(26%)</div>
    <div>VS</div>
    <div>(74%)</div>
    <div>
        <figure>
            <figcaption>Команда 2</figcaption>
            <img src="../images/icon_3.png"/>
        </figure>
    </div>
</article>

Код


        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #DAA520;
            font-family: Arial;
            font-size: 21px;
        }

        article.match {
            border: 1px dotted #ccc;
            display: table;
            padding: 20px;
            margin: 20px auto;
        }

        article.match > div{
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            position: relative;
        }

        article.match > div:nth-child(2){
            font-size: 0.7em;
        }
        article.match > div:nth-child(3){
            margin: 0 50px;
            font-size: 1.5em;
        }
        article.match > div:nth-child(4){
            font-size: 0.7em;
        }

        article.match img{
            border: 2px solid #DAA520;
            margin: 5px;
            padding: 10px;
        }

        article.match figure{
            margin: 10px;
        }

Цитата(MrDmitry @ 24.10.2014, 13:23

)

Извините за не скромный вопрос, а как можно сделать такое же но без использования таблиц?

только хотел сказать чтобы таблицы заканчивал использовать smile

Результат посмотреть можно тут http://codepen.io/anon/pen/CmKyd

Цитата(MrDmitry @ 24.10.2014, 17:20

)

Наверное стоит выучит html5 ))