Плавающий левый css - PullRequest
       7

Плавающий левый css

0 голосов
/ 03 января 2019

Я новичок там.Я изучаю веб-дизайн, в частности, CSS.Теперь у меня есть вопрос, мне нужно поставить в том же месте, чтобы div, один содержит меню и другое изображение с таким текстом.

Мне нужно разместить боковую информацию позади бокового меню

#sidemenu {
  float: left;
  width: 300px;
}

#sidemenu ul {
  line-height: 50px;
}

#sidemenu ul li {
  border-bottom: solid 1px black;
}

.side-info {
  width: 650px;
  padding-left: 50px;
}

.side-info img {
  margin-left: 5px;
}
<div id="sidemenu">
  <ul>
    <li><a href="#">Brand Creation</a></li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Web Design &amp; development</a></li>
    <li><a href="#">Packing Design</a></li>
  </ul>
</div>
<div class="side-info"> <img src="images/template5_12.jpg" alt="computer">
  <p class="com">Web Site &amp; Apps</p>
  <h2>Meddison Architecture</h2>
  <p class="par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices quam at orci aliquet, sollicitudin iaculis felis vehicula. Proin id nisl nec nisl feugiat egestas at eu odio</p>
  <p class="linkto">View Project</p>
</div>

1 Ответ

0 голосов
/ 03 января 2019

ul, li {margin:0;}

#wrapper {width:1000px;}

#sidemenu {
  float: left;
  width: 300px;
}

#sidemenu ul li{
   padding-top: 10px; 
  padding-bottom:10px;
}

#sidemenu ul li {
  border-bottom: solid 1px black;
}

.side-info {
  width: 650px;
  padding-left: 50px;
  float:right;
}

.side-info img {
  margin-left: 5px;
}
<div id="wrapper">
<div id="sidemenu">
  <ul>
    <li><a href="#">Brand Creation</a></li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Web Design &amp; development</a></li>
    <li><a href="#">Packing Design</a></li>
  </ul>
</div>
<div class="side-info"> <img src="https://via.placeholder.com/140x100" alt="computer">
  <p class="com">Web Site &amp; Apps</p>
  <h2>Meddison Architecture</h2>
  <p class="par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices quam at orci aliquet, sollicitudin iaculis felis vehicula. Proin id nisl nec nisl feugiat egestas at eu odio</p>
  <p class="linkto">View Project</p>
</div>
  </div>

Дэни, я бы порекомендовал вам начать с Bootstrap , одной из самых популярных интерфейсных сред.Он имеет все необходимые CSS для ваших требований, и это легко, хотя.Исходя из моего понимания вашего вопроса, вы можете достичь с нулевым пользовательским CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...