Вам необходимо понять, как работает аутентификация. Если вы используете Azure Active Directory для аутентификации, то любое приложение, которое требуется для аутентификации, должно быть зарегистрировано в AAD (Azure Active Directory). В вашем случае и фронт, и бэкэнд должны быть зарегистрированы в AAD, а ваш бэкэнд должен иметь доверие к приложению веб-интерфейса и к тому, что вы настраиваете в Azure. https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad
Ваш веб-интерфейс должен контролировать поток и после аутентификации вы получаете перенаправление во внешний интерфейс, и он должен получать токен от AAD, и вам придется использовать этот токен в заголовке авторизации для доступа к API бэкенда. Для этого типа потока вы можете использовать AADL (библиотека AAD https://github.com/AzureAD/azure-activedirectory-library-for-js ), которая может позаботиться об этом и, как правило, лучший выбор, который этот вид потока аутентификации.
Еще один момент: зачем вам нужно использовать службу приложений Azure для Angular / HTML, когда это статический интерфейс? Вы можете посмотреть на хостинг-сайт Azure Static, который сэкономит вам кучу средств. https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
Дополнительные ресурсы https: // docs. microsoft.com/en-us/azure/active-directory/develop/quickstart-v1-angularjs-spa
(источник: sontag.ca)
Я сначала сделал это осуществление немногим более, чем 2 года назад, когда я сначала изучал HTML и CSS. Мое первое решение было похоже на тот, который Вы видите здесь, кроме без анонимных контейнерных ОТДЕЛЕНИЙ Затем я получил эту идею для веб-страницы, которая сделала рядом сравнение CSS к Таблице, чтобы доказать, что CSS был лучше. Таким образом, я работал на странице Challenge, опубликовал ее и затем отправил этот вопрос.
Sam Hasler отправил ответ в течение минут, кажется, который был действительно близок. Я видел, что он был на правильном пути для лучшего решения, чем, что я имел. Все его отделения были в порядке, и мои не были. Jacco добавил комментарий, спрашивающий, почему я использовал две вложенных таблицы, когда можно было бы сделать. Он был прав также, конечно.
Таким образом, у меня было два Homer Simpson "Doh!" моменты сразу же. Я считал другие вопросы и ответы на таблицах по сравнению с CSS. Кто-то упомянул это таблицы, центрируемые вертикально. Мой ответ не центрировался вертикально также, но я думал, что это могло бы быть возможно. Самое главное, в конце концов, должно сделать все, что таблица может сделать и лучше. Я поставил себя в безвыходное положение к настоящему времени, будучи похож на дурака, таким образом, я должен был найти ответ.
В конечном счете (смущен для высказывания, какой длины это было) я предложил решение ниже. Я затем смог выполнить свое исходное понятие бок о бок веб-страница сравнения.
Вот объяснение того, как все это работает и почему необходимо использовать CSS
Ответ Charlie...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer {
width:175px; height:175px;
text-align:center;
font: italic 100%/200% 'Comic Sans MS', cursive;
border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV
{ display: table-cell; vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width: 35px }
#c2>DIV, #c3>DIV { height: 140px }
#c1>DIV, #c9>DIV { width: 140px }
#c5>DIV, #c6>DIV { height: 70px }
#c4>DIV, #c8>DIV { width: 70px }
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }
#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }
/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% }
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }
</style>
</head>
<body>
<div id="outer">
<div id="c1"><div> 1 </div></div>
<div id="c3"><div>3<br/>3<br/>3</div></div>
<div id="inner">
<div id="c4"><div> 4 </div></div>
<div id="c5"><div> 5<br/>5 </div></div>
<div id="c6"><div> 6 </div></div>
<div id="c7"><div> 7 </div></div>
<div id="c8"><div> 8 </div></div>
</div>
<div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
<div id="c9"><div> 9 9 9</div></div>
</div>
</body>
</html>
Обновление: Заключительное редактирование. Коммутируемый к СТРОГОМУ DTD, удаленный курсив для соответствия изображению в вопросе, и вернулся назад к полноцветным названиям идентификаторов для показа намерения согласно комментарию операции в секунду к вопросу и отсортировал основной столбец идентификационных названий в css в порядок, они появляются в HTML.
я также выбрал не к снова использованному внешнее отделение как белые 7 квадратов (это не имело своего собственного отделения в предыдущие редактирования ), поскольку это не будет практично, если Вы хотели использовать расположение и чувствовали немного как обман (хотя от краткости/пиксель идеальная точка зрения мне понравилось нахальство его).
Представление здесь: http://jsbin.com/efidi
Редактирование здесь: http://jsbin.com/efidi/edit
Проверяет как XHTML, строгий
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div { text-align: center; width:175px; height:175px; line-height: 35px;}
div div { float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue , #green {float:right;}
#orange, #silver {background-color:silver; width:140px;}
#navy , #maroon {background-color:maroon; height:140px; line-height:140px;}
#navy {background-color:navy ;}
#green , #red {background-color:red ; width: 70px;}
#yellow, #blue {background-color:blue ; height: 70px; line-height: 70px;}
#yellow {background-color:yellow;}
#white {background-color:white ;}
#green {background-color:green ;}
#orange {background-color:orange;}
</style>
</head>
<body>
<div>
<div id="silver">1</div>
<div id="maroon">2</div>
<div id="navy" >3</div>
<div id="red" >4</div>
<div id="blue" >5</div>
<div id="yellow">6</div>
<div id="white" >7</div>
<div id="green" >8</div>
<div id="orange">9</div>
</div>
</body></html>
В стороне: Я, возможно, поместил бы немного больше пробела в то, если я мог, но это в пределе, прежде чем блоки кода здесь на ТАК начнут получать полосы прокрутки, и я решил иметь все это, появляются на экране.
Примечание: Я одолжил эти line-height
, фиксируют от Tyson (кто был первым для получения правильно представляющего ответа).
Вот три решения.
разметка:
<div id="outer">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
<div id="a6">6</div>
<div id="a7">7</div>
<div id="a8">8</div>
<div id="a9">9</div>
</div>
основная таблица стилей (размеры и цвет):
#outer {
width: 20em;
height: 20em;
}
#a1 {
background-color: #C0C0C0;
width: 80%;
height: 20%;
}
#a2 {
background-color: #800000;
width: 20%;
height: 80%;
}
#a3 {
background-color: #000080;
width: 20%;
height: 80%;
}
#a4 {
background-color: #FF0000;
width: 40%;
height: 20%;
}
#a5 {
background-color: #0000FF;
width: 20%;
height: 40%;
}
#a6 {
background-color: #FFFF00;
width: 20%;
height: 40%;
}
#a7 {
background-color: #FFFFFF;
width: 20%;
height: 20%;
}
#a8 {
background-color: #008000;
width: 40%;
height: 20%;
}
#a9 {
background-color: #FFA500;
height: 20%;
width: 80%;
}
И теперь расположение:
Используя float
:
#a1 {
float: left;
}
#a2 {
float: right;
}
#a3 {
float: left;
}
#a4 {
float: left;
}
#a5 {
float: right;
}
#a6 {
float: left;
}
#a7 {
float: left;
}
#a8 {
float: right;
}
#a9 {
float: right;
}
Используя position
:
#outer {
position: relative;
}
#outer div {
position: absolute;
}
#a1 {
top: 0;
left: 0;
}
#a2 {
top: 0;
right: 0;
}
#a3 {
top: 20%;
left: 0;
}
#a4 {
top: 20%;
left: 20%;
}
#a5 {
top: 20%;
right: 20%;
}
#a6 {
top: 40%;
left: 20%;
}
#a7 {
top: 40%;
left: 40%;
}
#a8 {
bottom: 20%;
right: 20%;
}
#a9 {
bottom: 0;
right: 0;
}
Используя margin
:
#a1 {
}
#a2 {
margin: -20% -80% 0 80%;
}
#a3 {
margin: -60% 0 0 0;
}
#a4 {
margin: -80% -20% 0 20%;
}
#a5 {
margin: -20% -60% 0 60%;
}
#a6 {
margin: -20% -20% 0 20%;
}
#a7 {
margin: -40% -40% 0 40%;
}
#a8 {
margin: 0 -40% 0 40%;
}
#a9 {
margin: 0 -20% 0 20%;
}
Здесь Вы идете - меньше строк, чем какое-либо неправильное употребление тегов таблицы может обеспечить:
<img
src="http://sontag.ca/TheChallenge/tiles.gif"
alt="nine assorted coloured rectangles"
/>
: P
Это соответствует Вашему примеру таблицы точно, включая вертикально и горизонтально центрируемый текст (который никто больше не сделал до сих пор).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Boxy Boxes in a Box</title>
<style type="text/css" media="screen">
#container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }
.box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}
#box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
#box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
#box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
#box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
#box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
#box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
#box_7 {top: 70px; left: 70px; background-color: white;}
#box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
#box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
</style>
</head>
<body>
<div id="container">
<div id="box_1" class="box">1</div>
<div id="box_2" class="box">2</div>
<div id="box_3" class="box">3</div>
<div id="box_4" class="box">4</div>
<div id="box_5" class="box">5</div>
<div id="box_6" class="box">6</div>
<div id="box_7" class="box">7</div>
<div id="box_8" class="box">8</div>
<div id="box_9" class="box">9</div>
</div>
</body>
</html>
Пока ширины и высоты являются постоянными, можно всегда использовать абсолютное расположение для получения того же эффекта. Это должно быть достаточно очевидно, так, чтобы я не выводил его (поздно здесь, и я ленив: P)
Я проявил немного отличающийся подход, чем "идентификатор все" решения, которые я видел до сих пор. Это прибывает меньше чем в 100 символов больше, чем основанное на таблице решение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
.spiral { width:175px; height:175px }
.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
top:35px;
left:35px;
width:105px;
height:105px
}
.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="t l w" style="background-color:silver">1</div>
<div class="t r h" style="background-color:maroon">2</div>
<div class="b l h" style="background-color:navy">3</div>
<div class="c">
<div class="t l w" style="background-color:red">4</div>
<div class="t r h" style="background-color:blue">5</div>
<div class="b l h" style="background-color:yellow">6</div>
<div class="c">7</div>
<div class="b r w" style="background-color:green">8</div>
</div>
<div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>
Редактирование: На основе Ваших модификаций я отправляю немного более подробное, но надо надеяться более ясное решение, которое добавляет черную границу, устанавливает некоторый текст на белый и не абсолютно располагает "сад".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
div.spiral {
position:relative;
width:175px;
height:175px;
border: 1px solid #000
}
.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
top:35px;
left:35px;
width:105px;
height:105px
}
.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="top left wide" style="background-color:silver">1</div>
<div class="top right tall" style="background-color:maroon">2</div>
<div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
<div class="center">
<div class="top left wide" style="background-color:red">4</div>
<div class="top right tall" style="background-color:blue">5</div>
<div class="bottom left tall" style="background-color:yellow">6</div>
<div class="center">7</div>
<div class="bottom right wide" style="background-color:green">8</div>
</div>
<div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>
Никто здесь еще не дал решение для таблицы, и проблема - все о сравнении разметок CSS к основанным на таблице разметкам в управляемом (и в большой степени смещенный) сценарий.
, Таким образом, вот решение для Сервировки Ted's и его вызов...
"С моим основанным на таблице решением, очень легко добавить новых жителей к садовым участкам очень простыми дополнениями к разметке HTML только! Все жители автоматически центрируются и располагаются с интервалами в приятном стиле. Например":
(источник: sontag.ca)
(источник: sontag.ca)
"Насколько я могу сказать, никакие основанные на CSS решения здесь не могут разместить новых жителей без обширных реконструкций к правилам CSS".
"Лучше приносят большому количеству денежных мальчиков, я действительно проголодался и чувствую себя хотящим пить теперь".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#master TD { text-align: center }
#master {
border: 1px solid black;
font: italic 100%/200% 'Comic Sans MS', cursive;
}
#silver { background-color:silver }
#maroon { background-color: maroon; color:white }
#navy { background-color:navy; color:white }
#red { background-color: red }
#blue { background-color:blue; color:white }
#yellow { background-color: yellow }
#green { background-color:green; color:white }
#orange { background-color:orange }
#white { background-color:white }
#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }
</style>
</head>
<body style="background-color:#ffb600">
<table id="master" border="0" cellpadding="0" cellspacing="0"
summary="layoutByTable"><tr>
<td id="silver" colspan="2" > 1 </td>
<td id="maroon" rowspan="2" > 2 </td>
</tr><tr>
<td id="navy" rowspan="2" > 3 </td>
<td>
<table border="0" cellpadding="0" cellspacing="0"
summary="inner"><tr>
<td id="red" colspan="2" > 4 </td>
<td id="blue" rowspan="2" > 5 </td>
</tr><tr>
<td id="yellow" rowspan="2" > 6 </td>
<td id="white"> 7 </td>
</tr><tr>
<td id="green" colspan="2" > 8 </td>
</tr>
</table>
</td>
</tr><tr>
<td id="orange" colspan="2"> 9 </td>
</tr>
</table>
</body>
</html>
Единственное решение для таблицы.
Теперь не вниз-голосуют за меня.
я знаю, что это не ответ на исходный вопрос.
я отправил этот ответ, потому что OP запросил это в комментарии к исходному вопросу.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="en" />
<title>The Challenge</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" summary="">
<tr>
<td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
<td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
<td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td>
</tr><tr>
<td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
<td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
<td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
</tr><tr>
<td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
<td width="35" height="35" align="center"><i>7</i></td>
</tr><tr>
<td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
</tr><tr>
<td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
</tr>
</table>
</body>
</html>
Это - допустимый Переходный XHTML 1.0, и я включал символ доктора Suess:)
Путем разделения Dr. Suess character
, <?xml
объявление, meta-tags
и эти summary
атрибут Вы могли сократить его к 929 символам и все еще быть допустимым Переходным XHTML 1.0.
Редактирование
Согласно просьбе, XHTML 1.0, Строгий
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
BODY {background: orange}
#garden {border: 1px solid black; color: black}
#garden TD {
font: italic 100% 'Comic Sans MS', cursive;
height: 35px;
padding: 0;
text-align: center;
width: 35px
}
#c1 {background: silver}
#c2 {background: maroon; color: white}
#c3 {background: navy; color: white}
#c4 {background: red}
#c5 {background: blue; color: white}
#c6 {background: yellow}
#c7 {background: white}
#c8 {background: green; color: white}
#c9 {background: orange}
</style>
</head>
<body>
<table id="garden" cellspacing="0">
<tr>
<td id="c1" colspan="4">1</td>
<td id="c2" rowspan="4">2</td>
</tr><tr>
<td id="c3" rowspan="4">3</td>
<td id="c4" colspan="2">4</td>
<td id="c5" rowspan="2">5</td>
</tr><tr>
<td id="c6" rowspan="2">6</td>
<td id="c7">7</td>
</tr><tr>
<td id="c8" colspan="2">8</td>
</tr><tr>
<td id="c9" colspan="4">9</td>
</tr>
</table>
</body>
</html>
970 непробельных символов, оранжевый фон, Гринч доктора Suess удален.
Краткость разметки....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
.garden {
position: relative;
width: 175px;
height: 175px;
font-family: 'Comic Sans MS', cursive;
border: 1px solid;
color: #000;
}
.garden div {
position: absolute;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
.garden div:first-child {
width: 140px;
background: silver;
}
.garden div:first-child + div {
right: 0;
height: 140px;
line-height: 140px;
color: #fff;
background: maroon;
}
.garden div:first-child + div + div {
top: 35px;
height: 140px;
line-height: 140px;
color: #fff;
background: navy;
}
.garden div:first-child + div + div + div {
top: 35px;
left: 35px;
width: 70px;
background: red;
}
.garden div:first-child + div + div + div + div {
top: 35px;
right: 35px;
height: 70px;
line-height: 70px;
background: blue;
}
.garden div:first-child + div + div + div + div + div {
top: 70px;
left: 35px;
height: 70px;
line-height: 70px;
background: yellow;
}
.garden div:first-child + div + div + div + div + div + div {
top: 70px;
left: 70px;
background: white;
}
.garden div:first-child + div + div + div + div + div + div + div {
top: 105px;
left: 70px;
width: 70px;
background: green;
}
.garden div:first-child + div + div + div + div + div + div + div + div{
bottom: 0;
right: 0;
width: 140px;
background: orange;
}
</style>
</head>
<body>
<div class="garden">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
I think we've proved that there's more than one way to do this. The table
tag and CSS are both viable options.
Rather than add another way to complete the challenge I'd just like to say that, whether it's easier or harder, simpler or more complex: tables in HTML should be used for displaying tabular data.
Вот пример, который не использует абсолютное позиционирование, не использует таблицу-ячейку и действительна в IE6-8, FF и т. Д.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}
div {float:left}
#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}
#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}
#c6, #c7 {margin-top:-35px}
#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}
</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>