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

Тема в разделе "Веб-дизайн", создана пользователем casinolot, 1 апр 2011.

Модераторы: zek24
  1. casinolot

    casinolot

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

    Вложения:

    • First.rar
      Размер файла:
      284,5 КБ
      Просмотров:
      5
  2. marvinz

    marvinz

    Регистр.:
    7 апр 2009
    Сообщения:
    163
    Симпатии:
    75
    1/

    поставить charset=windows-1251 и заново сохрани файл

    удалить border="0"

    2/
    напиши вот так:
    <h2>[&nbsp;Luckyhaunter&nbsp;]</h2><br><img src="image/Luckyhaunter.gif" alt="Видео слот LUCKY HAUNTER" width="110" height="83" border="0" title="Видео слот LUCKY HAUNTER"></div>
    и

    DIV#Left IMG
    {
    text-align: center;
    }

    3/

    рабочие версии чего?
     
    casinolot нравится это.
  3. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    В конкретно вашем случае таблица должна быть именно таблицей, либо тем, что я вам предложу в варианте кода.
    По ошибкам сразу:
    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>
    
     
    casinolot нравится это.
  4. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    547
    Симпатии:
    84
    Спасибо , все заработало ,только кодировку поменял на windows-1251