Создание таблицы с помощью CSS

C

casinolot

Гуру форума
Регистрация
21 Окт 2010
Сообщения
547
Реакции
87
Добрый день, кто подскажет по созданию на CSS.
Приложил файл, есть пару проблем по которым я не знаю как решить.
1. Почему некорректно отображается моя таблица в IE?
2. Как мне сделать чтобы рисунки были почти сразу после заголовка ,а не приходилось их вниз сдвигать?
3. Может быть есть готовые рабочие версии ?
 

Вложения

  • First.rar
    284,5 KB · Просмотры: 5
В конкретно вашем случае таблица должна быть именно таблицей, либо тем, что я вам предложу в варианте кода.
По ошибкам сразу:
1. идентификатор (id="...") на странице должен быть уникальным. Т.е. если вам нужно задать одинаковые стили для нескольких элементов, нужно использовать либо атрибут class="...", либо задавать стили прямо для элемента.
2. Почитайте, что такое "DOCTYPE" и как его нужно применять (в вашем случае речь идет о html 4-й версии.)
3. meta charset, предпочтительно использовать "utf-8", можно и "windows-1251", но точно не "iso-8859-1", за подробностями тоже в гугл или яндекс.
4. "<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">" - правильно будет: "<link rel="stylesheet" type="text/css" href="css/style.css" />"
5. в заголовке страницы нужно использовать h1, а-не h2.
Теперь то, как бы я выполнил вашу задачу (на случай фиксированной ширины при необходимости блочной верстки) хотя там и с не фиксированной шириной будет работать. Стили вынес в хтмл:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, hr, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:none; margin:0; outline:none; padding:0; list-style:none; font-size:100% }
html { font-size:100.01% }
body { font:16px/1.5 Arial, Helvetica, sans-serif; }
h2, h1 { color: #FF6600; font-weight:100; text-align: center; }
#table { width:400px; overflow:hidden; border: 1px solid #BA1010; text-align: center; padding-bottom:8px; margin:0 auto }
.cont { width:185px; height:135px; float:left; border:1px solid #CCC; margin:8px 0 0 8px; text-align:center; }
.cont img { width:110px; height:83px; padding:2px; border:1px solid #333 }
.cont h2 { display: inline; }
</style>
</head>
<body>
<h1>Заголовок страницы</h1>
<div id="table">
  <div class="cont">[<h2>Luckyhaunter</h2>]<br /><img src="image/Luckyhaunter.gif" /></div>
  <div class="cont">[<h2>Money Game</h2>]<br /><img src="image/moneygame.jpg" /></div>
  <div class="cont">[<h2>Fruit Cocktail</h2>]<br /><img src="image/fruitcocktail.gif" /></div>
  <div class="cont">[<h2>Crazy Fruits</h2>]<br /><img src="image/logos.gif" /></div>
  <div class="cont">[<h2>Lucky Drink</h2>]<br /><img src="image/lucky_drink.jpg" /></div>
  <div class="cont">[<h2>Crazy Monkey</h2>]<br /><img src="image/crazymonkey.gif" /></div>
  <div class="cont">[<h2>Заголовок</h2>]<br /><img src="image/resident.jpg" /></div>
  <div class="cont">[<h2>Заголовок</h2>]</div>
</div>
</body>
</html>
 
mittus написал(а):
В конкретно вашем случае таблица должна быть именно таблицей, либо тем, что я вам предложу в варианте кода.
По ошибкам сразу:
1. идентификатор (id="...") на странице должен быть уникальным. Т.е. если вам нужно задать одинаковые стили для нескольких элементов, нужно использовать либо атрибут class="...", либо задавать стили прямо для элемента.
2. Почитайте, что такое "DOCTYPE" и как его нужно применять (в вашем случае речь идет о html 4-й версии.)
3. meta charset, предпочтительно использовать "utf-8", можно и "windows-1251", но точно не "iso-8859-1", за подробностями тоже в гугл или яндекс.
4. "<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">" - правильно будет: "<link rel="stylesheet" type="text/css" href="css/style.css" />"
5. в заголовке страницы нужно использовать h1, а-не h2.
Теперь то, как бы я выполнил вашу задачу (на случай фиксированной ширины при необходимости блочной верстки) хотя там и с не фиксированной шириной будет работать. Стили вынес в хтмл:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, hr, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:none; margin:0; outline:none; padding:0; list-style:none; font-size:100% }
html { font-size:100.01% }
body { font:16px/1.5 Arial, Helvetica, sans-serif; }
h2, h1 { color: #FF6600; font-weight:100; text-align: center; }
#table { width:400px; overflow:hidden; border: 1px solid #BA1010; text-align: center; padding-bottom:8px; margin:0 auto }
.cont { width:185px; height:135px; float:left; border:1px solid #CCC; margin:8px 0 0 8px; text-align:center; }
.cont img { width:110px; height:83px; padding:2px; border:1px solid #333 }
.cont h2 { display: inline; }
</style>
</head>
<body>
<h1>Заголовок страницы</h1>
<div id="table">
  <div class="cont">[<h2>Luckyhaunter</h2>]<br /><img src="image/Luckyhaunter.gif" /></div>
  <div class="cont">[<h2>Money Game</h2>]<br /><img src="image/moneygame.jpg" /></div>
  <div class="cont">[<h2>Fruit Cocktail</h2>]<br /><img src="image/fruitcocktail.gif" /></div>
  <div class="cont">[<h2>Crazy Fruits</h2>]<br /><img src="image/logos.gif" /></div>
  <div class="cont">[<h2>Lucky Drink</h2>]<br /><img src="image/lucky_drink.jpg" /></div>
  <div class="cont">[<h2>Crazy Monkey</h2>]<br /><img src="image/crazymonkey.gif" /></div>
  <div class="cont">[<h2>Заголовок</h2>]<br /><img src="image/resident.jpg" /></div>
  <div class="cont">[<h2>Заголовок</h2>]</div>
</div>
</body>
</html>
Нажмите для раскрытия...
Спасибо , все заработало ,только кодировку поменял на windows-1251
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху