Вопрос Помогите маленько с html и css

Heon · 25.09.2010, 14:28 **Вверх**

Вообщем делал как тут

Название игры | Оценка посетителей | Дата выхода |

Как то не очень красиво отображается,маленько кривовато как исправить мой как у меня.

Хотелась бы что бы выглядело как на первом скрине.

Вот мой код css

Код:

*/ Блок в категориях 3 с измененым цветом

/* Задание стилей всего блока */
#body {
     width:900px; /* Установка ширины блока в 900 пикселей */
}

/* Задание стилей левого столбца */
#left2 {
     float:left; /* Установка обтекания */
     width:250px; /* Установка ширины столбца */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

/* Задание стилей правого столбца */
#right2 {
     float:right; /* Установка обтекания */
     width:100px; /* Установка ширины столбца */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

/* Задание стилей среднего столбца */
#center2 {
     margin-left:105px; /* Установка отступа */
     margin-right:105px; /* Установка отступа */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

Надеюсь поможите.

Serberg · 25.09.2010, 19:24 **Вверх**

Heon, как ты думаешь что можно сделать из двух скриншотов и куска CSS ?

Нам же невидно что ты к чему прицепил + где классы текста ?

Heon · 25.09.2010, 20:29 **Вверх**

Сори

Вот как тут пытаюсь сделать. http://stopgame.ru/dates

Вот классы

<div class="hsep"> </div>

<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="left1">[full-link]{title}[/full-link]</div>
<div id="right1">[xfvalue_reviews_data]</div>
<div id="center1">{rating}</div>
</div>
</div>

Ну а стиль выше.

Serberg · 25.09.2010, 23:50 **Вверх**

Heon, что то я вообще не вкурю как ты это собрал. Таблица то где ? Сверху пример явно табличного типа. В столбцах сделано выравнивание и отступы.

Heon · 26.09.2010, 09:15 **Вверх**

Блин опять не то кинул( запарился вчера,щас нормально скину все.

Это шаблон короткой новости

Код:

<div class="hsep">&nbsp;</div>


<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="body">
  <div id="left1">[full-link]{title}[/full-link]</div>
        <div id="right1">[xfvalue_reviews_data]</div>
        <div id="center1">{rating}</div>
    </div>
    </div>

Это то где отображается дата выхода оценка и т.д

Код:

<link rel="stylesheet" href="style.css" type="text/css" />
    <div id="body">
        <div id="left2"><span style="color: #ffffff;">Название</span></div>
        <div id="right2"><span style="color: #ffffff;">Дата выхода</span></div>
        <div id="center2"><span style="color: #ffffff;">Оценка посетителей</span></div>
    </div>

Это css

Код:

*/ Блок в категориях 3 с измененым цветом

/* Задание стилей всего блока */
#body {
     width:900px; /* Установка ширины блока в 900 пикселей */
}

/* Задание стилей левого столбца */
#left2 {
     float:left; /* Установка обтекания */
     width:250px; /* Установка ширины столбца */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

/* Задание стилей правого столбца */
#right2 {
     float:right; /* Установка обтекания */
     width:100px; /* Установка ширины столбца */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

/* Задание стилей среднего столбца */
#center2 {
     margin-left:105px; /* Установка отступа */
     margin-right:105px; /* Установка отступа */
     background:#1a425e; /* Установка фонового цвета */
     height: 25px; /* Установка высоты столбца */
}

Пробывал даже у них все взять все равно отступов нету почему то.

Slavok47 · 26.09.2010, 16:00 **Вверх**

Про какие отступы речь?

Stalker · 26.09.2010, 16:41 **Вверх**

Heon, тебе легче всё это в таблицу поставить, чем сейчас начинать вёрстку учить. Отступ откуда: от края листа? от другого блока?

Сообщение от Heon

Это то где отображается дата выхода оценка и т.д

Код:

<link rel="stylesheet" href="style.css" type="text/css" />
<div id="body">
<div id="left2"><span style="color: #ffffff;">Название</span></div>
<div id="right2"><span style="color: #ffffff;">Дата выхода</span></div>
<div id="center2"><span style="color: #ffffff;">Оценка посетителей</span></div>
</div>

ЭТО одна строчка. верхняя. а дальше? и внутри чего оно всё сидит?

Heon · 26.09.2010, 16:56 **Вверх**

Ну вот где Название игры | Оценка посетителей | Дата выхода

Вот этих отступов нету.

Heon · 27.09.2010, 02:13 **Вверх**

Что нету кто нормально с html и css дружит?

tanka1380 · 27.09.2010, 02:34 **Вверх**

Сообщение от Heon

Что нету кто нормально с html и css дружит?

сделай отступы прозрачными гифами. статейка в помощь.

Heon · 27.09.2010, 08:31 **Вверх**

Что то не получается по этой статье,поищу нечто похожее.

Serberg · 27.09.2010, 09:12 **Вверх**

Сообщение от Heon

Что то не получается по этой статье,поищу нечто похожее.

А если тупо пробелы наставить, для того чтобы отступы были. Так пробовал ? Я имею ввиду символ  

Stalker · 27.09.2010, 11:11 **Вверх**

Heon, ещё раз. Почему ты таблицу не хочешь сделать? Ведь тебе просто данные нужно вывести. Для этого и существуют таблицы. Я просто не вижу смысла делать блоки.
В любом случае вечером сегодня поковыряюсь.

Heon · 27.09.2010, 11:59 **Вверх**

Как он в табличном виде будет выглядить?

Serberg,если использовать   то он просто сместит текст а мне надо вот как тут красным выделел

Наверно надо было сразу с этого начинать..

Serberg · 27.09.2010, 14:13 **Вверх**

Heon, так это таблица, а не блоки. Есть такое понятие как бордер, это я так понимаю и есть он. Как ты блоками их хочешь сделать - я ХЗ.

Amber · 27.09.2010, 14:19 **Вверх**

ТАБЛИЦУ легче сделать как и сказали.
я вообще нуб и то поняла)))
так что ли

<table width="100%" border="1">
<tbody align="center">
<tr>
<td>название игры </td>
<td> оценка пользователей</td>
<td>дата выхода </td>
</tr>
</tbody>
</table>

Heon · 27.09.2010, 15:16 **Вверх**

Сообщение от Amber

ТАБЛИЦУ легче сделать как и сказали.
я вообще нуб и то поняла)))
так что ли

<table width="100%" border="1">
<tbody align="center">
<tr>
<td>название игры </td>
<td> оценка пользователей</td>
<td>дата выхода </td>
</tr>
</tbody>
</table>

Так у меня тоже сделано таблицей только со стилем еще

Код:

<table width="100%" cellspacing="1" cellpadding="3">
<tbody><tr>

<td align="left" class="list_game_head">Название игры</td>
<td width="110" align="center" class="list_game_head">Оценка </td>
<td width="110" align="center" class="list_game_head">Дата выхода</td>
</tr>
</tbody></table>

Только понять не могу почему этих белых пробелов не видать,и получаетсья как слитно.

Amber · 27.09.2010, 16:10 **Вверх**

Сообщение от Heon

Так у меня тоже сделано таблицей только со стилем еще

Код:

<table width="100%" cellspacing="1" cellpadding="3">
<tbody><tr>

<td align="left" class="list_game_head">Название игры</td>
<td width="110" align="center" class="list_game_head">Оценка </td>
<td width="110" align="center" class="list_game_head">Дата выхода</td>
</tr>
</tbody></table>

Только понять не могу почему этих белых пробелов не видать,и получаетсья как слитно.

может просто таблу сделать проще.
в ячейку- <td> нафиг вписывать align="center
легче сделать как я дала- в начале таблы прописать-<tbody align="center">

далее размеры у вас просто "100" а 100 чего ? пикселей , процентов? над прописать так-100px, ежели пиксели

+ зачем это class="list_game_head"
+ это left неправильно,если вам нужна табла слева, то это прописывается в начале таблы,а не в ячейке

короч, так пробуйте, если вам табла нужна просто по ширине всего сайта-

<table width="100%" cellspacing="1" cellpadding="3">

<tbody><tr>
<tr><td><p align="center" class="table">Название игры </p></td><td><p align="center" class="table">Оценка</p></td><td><p align="center" class="table">дата выхода</p></td>
</tr>
</tbody></table>

Heon · 27.09.2010, 16:14 **Вверх**

Ладно сделал по совету Amber но я так уже делал и не сомог решить такую проблему

Какой можно стиль написать чтобы выравнять их по

название игры | оценка пользователей | дата выхода

кто подскажет?..

Amber · 27.09.2010, 16:21 **Вверх**

Сообщение от Heon

Ладно сделал по совету Amber но я так уже делал и не сомог решить такую проблему

Какой можно стиль написать чтобы выравнять их по

название игры | оценка пользователей | дата выхода

кто подскажет?..

ты сделал таблу только на верхнюю строчку))))
а так то нужно все вставлять в таблицу, пример-

<table cellspacing="3" cellpadding="3" width="100%" align="center" valign="top">
<tr>
<td><p align="center" class="table">Название игры </p></td>
<td><p align="center" class="table">Оценка</p></td>
<td><p align="center" class="table">дата выхода</p></td>
</tr>
<tr>
<td><p align="center" class="table">ИГРА ТАКАЯ-ТО</p></td>
<td><p align="center" class="table">ОЦЕНКА ТАКАЯ-ТО</p></td>
<td><p align="center" class="table"> ДАТА ТАКАЯ-ТО</p></td></TR>
<TR>
И ПО НОВОЙ-ВСЕ СТРОЧКИ-ЯЧЕЙКИ ВСТАВЛяЕМ
</tbody></table>

tanka1380 · 27.09.2010, 16:22 **Вверх**

тебе что, нужны видекурсы по HTML и CSS?
Если да, то 2 пути:
1. Расшарить хаб.
2. Выложить у себя на трекере без оформления, просто хэш.

Amber · 27.09.2010, 16:26 **Вверх**

http://svoisait.ru/table/
КАК делать таблу)

Heon · 27.09.2010, 16:28 **Вверх**

tanka1380,не мешало бы..

Amber,На верхнею строчку я и стиль прописал,Дело в том что это я делаю для DLE То есть Первая табла на главной странице,а то что ниже сам код шаблона вывода короткой новости,по этому я и говорю что надо как то выравнивать то то что ниже под верхнии таблы....Вообщем придеца Сайты перерывать html и css..

Как таблы делать я знаю.

tanka1380 · 27.09.2010, 16:51 **Вверх**

Heon, читай адрес в личке. Но придется рагаться, хотя это быстро.

Stalker · 27.09.2010, 17:32 **Вверх**

Вот тебе табличное решение.
Проверенно на IE8, FF, Opera.

Html table:

Код:

<table width="500">
        <tr>
            <td class="title1">Название игры
            </td>
            <td class="title2">Оценка
            </td>
            <td class="title3">Дата выхода
            </td>
        </tr>
        <tr class="firstRow">
            <td class="left">11111111111111
            </td>
            <td class="center">111111
            </td>
            <td class="right">11111111111111
            </td>
        </tr>
        <tr class="secondRow">
            <td class="left">22222222222222
            </td>
            <td class="center">222222
            </td>
            <td class="right">33333333333333
            </td>
        </tr>
        <tr class="firstRow">
            <td class="left">11111111111111
            </td>
            <td class="center">111111
            </td>
            <td class="right">11111111111111
            </td>
        </tr>
    </table>

CSS code:

Код:

.title1, .title2, .title3
{
	font-family: 'Times New Roman' , Times, serif;
	font-size: 14px;
	background-color: #0099FF;
	color: White;
}
.title1
{
	width: 250px;
	text-align: left;
}
.title2
{
	width: 100px;
	text-align: center;
}
.title3
{
	width: 150px;
	text-align: center;
}
.firstRow
{
	height: 40px;
	font-family: 'Times New Roman' , Times, serif;
	font-size: 12px;
	background-color: #FFFFFF;
}
.secondRow
{
	height: 40px;
	font-family: 'Times New Roman' , Times, serif;
	font-size: 14px;
	background-color: #CCCCCC;
}
.left
{
	text-align: left;
}
.right
{
	text-align: center;
}
.center
{
	text-align: center;
}

Играйся сколько хочешь с размерами ячейки (до 500 px всего или меняешь вверху) и шрифтом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Помогите по HTML	Denis8388	CSS и HTML	4	10.06.2011 12:16
Проблема с HTML	vbinfo	vBulletin 3.х	3	02.05.2011 09:53
HTML код	Fanat1k	vBulletin 4.x	1	01.03.2011 18:54
помогите с валидацией html кода	apelisin	CSS и HTML	19	13.11.2010 18:27