1.Как сделать что бы список с фото располагался посередине div в котором он,

html css веб дизайн сайты вёрстка

2.категории что бы были выше,на ровне с первым фото.
3.При свертывании окна фото не вытесняли категории.
Если напряжно на всё отвечать то отвечайте только на одно.

Примечание:
вот html:
<!DOCTYPE xhtml>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Website
</title>
</head>

<body>

<div id="einz">Example text
</div>

<ul>

<li id="one" class="menu">
<p>ONE</p></li>
<li id="two" class="menu">TWO</li>
<li id="three" class="menu">three</li>
<li id="four" class="menu">FOUR</li>
</ul><br></br>

<div id="category2">Категории:
<ol>
<li class="category">Футболки</li>
<li class="category">Кошельки</li>
<li class="category">Футболки</li>
<li class="category">Футболки</li>
<li class="category">Футболки</li>
<li class="category">Футболки</li>
</ol></div>

<div id="content">

<!--Content list element№1-->
<ol class="list-element">
<li class="list-element"><img src="DSC00069.jpg" height="150" width="200" />

<ol>
<li>aa
</li>
</ol>

</li>
</ol>

<!--Content list element№2-->
<ol class="list-element">
<li class="list-element"><img src="DSC00069.jpg" height="150" width="200" />

<ol>

<li>aa
</li>
</ol>
</li>
</ol>

<!--Content list element№3-->
<ol class="list-element">
<li class="list-element"><img src="DSC00069.jpg" height="150" width="200" />

<ol>

<li>aa
</li>
</ol>
</li>
</ol>

<!--Content list element№4-->
<ol class="list-element">
<li class="list-element"><img src="DSC00069.jpg" height="150" width="200" />

<ol>

<li>aa
</li>
</ol>
</li>
</ol>

<!--Content list element№5-->
<ol class="list-element">
<li class="list-element"><img src="DSC00069.jpg" height="150" width="200" />

<ol>

<li>aa
</li>
</ol>
</li>
</ol>
</div>


</body>
</html>

вот css:
*{border:black dashed 1px;}

#einz{ height:336px;
width:955px;
background-color:#33CCFF;
border-radius:10px;
margin:auto;
position:relative;}

ul{ margin:-10px 0px 0px 600px;
list-style:none;
width:290}

.menu{ font-size:150%;
border-radius:5px;
height:50px;width:60px;float:left;}
a{display:block;}

#one{background-color:red;margin-right:9px}
#two{background-color:pink;margin-right:9px}
#three{background-color:brown;margin-right:9px}
#four{background-color:orange;margin-right:9px}

#one:hover{color:black;background-color:pink;}
#two:hover{color:brown;background-color:yellow;}
#three:hover{color:yellow;background-color:pink;}
#four:hover{color:yellow;background-color:pink;}

.category{font-size:16px;}
ol{list-style:none;padding-left: 0;margin-left:10px;}

#category2{height:200px;
width:100px;
background-color:#33CCFF;margin-left:15px;
border-radius:10px;display:inline-block;}

#content{display:inline-block;height:500px;width:800px;}

.list-element{display:inline-block;}

Примечание:
margin:auto не работает

Примечание:
ВТОРОЙ ВОПРОС РЕШИЛ!
Ответы:
подобные "портянки" кода размещайте по первой или второй ссылке.
глаза сломать можно, пока прочтёшь код!


10 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.