Как использовать css для стилизации разметки xhtml, созданной только из div как таблица

См. Исходный код этого http://jsbin.com/iveso Я не могу ничего изменить в коде xhtml.

И мне нужен кросс-браузерный вывод точно так же. http://easycaptures.com/fs/uploaded/445/5025516010.jpg

Как мы можем дать тот же вид с меньшими затратами и оптимизировать CSS

Это CSS

#ConferencesContainer {
overflow:hidden;
}
#ConferencesContainer img {
float:left;
padding:0 10px 10px 0;
}
#ConferencesContainer #ConferencesItemsContainer img {
float:none;
padding:0;
}
#ConferencesHeaderContainer {
font-size:1.1em;
font-weight:bold;
margin:10px 0;
overflow:hidden;
}
#ConferencesTitleHeaderContainer {
float:left;
width:40%;
}
#ConferencesPDFHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesExternalLinkHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesHtmlHeaderContainer {
float:left;
text-align:center;
width:20%;
}
.Conferencesnorth-america-2009ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesaustralia-and-asia-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesinvestor-conference-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
#ConferencesContainer .ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
}
#ConferencesContainer .ConferencesPdfContainer {
float:left;
left:40%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesExtLinkContainer {
float:left;
left:60%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesHtmlContainer {
float:left;
left:80%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesAcrobatWarningContainer {
float:left;
padding-top:20px;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesasiaTitleContainer {
font-weight:bold;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesaustraliaTitleContainer {
font-weight:bold;}

Редактировать:

Я нашел ссылки, которые полезны для меня

  1. http://snook.ca/archives/html_and_css/getting_your_di

  2. http://www.dev-archive.net/articles/table-in-css.html

Источник

2 ответа

Решение

"Дайте человеку рыбу, и вы накормите его на один день, научите его ловить рыбу, и вы накормите его на всю жизнь"

Хорошо, мы идем. Если начать с установки Firefox, чтобы я мог использовать расширение Firebug.

Таким образом, вы, очевидно, не имеете никакого контроля над разметкой, которая состоит только из divs, Все идет нормально.

Я изменил фрагмент вашего CSS, удалив #ConferencesContainer как Firebug, очевидно, показывает, что нет div с идентификатором ConferencesContainer в вашей разметке в любом случае... Что объясняет, почему #ConferencesContainer .ConferencesTitleContainer { и так ничего не выбирай.

Затем я удалил абсолютное позиционирование, потому что, насколько я помню, это то, что не очень хорошо с IE. Кстати, имея float: left бесполезно, если вы затем используете position: absolute

Чтобы учесть тот факт, что иногда нет ссылки на скачивание PDF (следовательно, нет div в разметке), я сделал пункт повестки дня, и ссылки в формате PDF плавают влево. И я сделал DIV биографии и веб-трансляции float направо и обманул поля, чтобы переключить деления обратно в их предполагаемую позицию. Обман полей был необходим, так как div веб-трансляции стоит первым в разметке (по отношению к div биографии).

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

В любом случае, я полагаю, что у вас сейчас достаточно экспериментов, удачи.

.ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
background: red;
}
.ConferencesPdfContainer {
float:left;
text-align:center;
width:20%;
background: yellow;
}
.ConferencesExtLinkContainer {
float:right;
margin-left: -20%;
margin-right: 20%;
text-align:center;
width:20%;
background: lime;
}
.ConferencesHtmlContainer {
float: right;
margin-left: 20%;
margin-right: -20%;
text-align:center;
width:20%;
background: pink;
}

http://gregory.pakosz.fr/stackru/homework.png

Смотрите это в действии.

И, возможно, вы захотите прочитать Top 10 CSS Table Designs или 10 CSS Table примеров для красивой стилизации.

PS: цвета кодера здесь, чтобы помочь визуализировать div.

Источник

Я думаю, вам нужно немного поиграть. Кроме того, вам определенно нужны некоторые изображения и много терпения с кодом xhtml и особенно с большими именами идентификаторов и классов.

Вот что может помочь вам начать:

.ConferencesTitleContainer, .ConferencesPdfContainer, .ConferencesExtLinkContainer, .ConferencesHtmlContainer, .ConferencesTitleHeaderContainer, .ConferencesPDFHeaderContainer, .ConferencesExternalLinkHeaderContainer, .ConferencesHtmlHeaderContainer {
float:left;
width:24%;
border-bottom:1px solid;
}
#ConferencesasiaTitleContainer, #ConferencesaustraliaTitleContainer {
width:96%;
font-weight:bold;
}
Источник
Другие вопросы по тегам