VPF::Помогите с простой версткой - Форум программистов

MrDmitry

Дата 23.10.2014, 18:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Хочу сказать сразу я не верстальщик. Нужно сделать довольно простую на мой взгляд верстку как на рисунке. пытался сделать при помощи таблиц.

Код



<?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%;
}

Но все в кривь и в кось.

Это сообщение отредактировал(а) MrDmitry - 23.10.2014, 18:51

BaNru

Дата 24.10.2014, 00:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 20.9.2014

Репутация: 1
Всего: 1

Добавь ещё ячеек и будет тебе счастье
http://jsfiddle.net/nfo5b5ya/

MrDmitry

Дата 24.10.2014, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

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

Gold Dragon

Дата 24.10.2014, 13:52 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

пишу на 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, 16:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Цитата(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

спасибо то что нужно. Наверное стоит выучит html5 ))

PS интересные картинки вставил smile

Gold Dragon

Дата 24.10.2014, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

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

)

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

Да что его учить то? smile

Достаточно просто понять какие теги где применять... есть конечно много интересного и ОЧЕНЬ облегчающие дить... Если кратко и саму суть, то можно глянуть тут http://htmlbook.ru/html
а вообще конечно лучше почитать спецификацию ;)

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »