Jak zrobić żeby to było koło siebie.

pytanie zadane 5 listopada 2017 w HTML i CSS przez RAD Obywatel (1,810 p.)
zamknięte 6 listopada 2017 przez RAD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Programing4you-software house </title>
         <meta name="description" content="+++++++++++m">
         <link rel="stylesheet" href="style.css">
         <link rel="stylesheet" href="css/fontello.css">
         <link href="https://fonts.googleapis.com/css?family=Dosis|Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<center>  <div class="ractangle">

     <div id="logo">Programing4You-Software Room </div>

        <div id="poster">
            <img src="poster.img" />

            <i class="icon-apple"><br>iOS</br></i>
            <i class="icon-code"></i>
          </div>
          <div id="nav">
              <ol>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">ABAUT ME</a></li>
              </ol>
        </div>
  </div> </center>
<center>  <div class="squere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur imperdiet finibus commodo. In at lorem vel
  felis varius malesuada. Nulla semper sagittis convallis. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus
   <p>non metus tincidunt nunc vulputate laoreet.
  Sed sollicitudin dui ac pretium dictum. Suspendisse et suscipit ipsum. Mauris pretium
  aliquam orci, luctus gravida mauris
  finibus vitae. Aliquam pretium nibh eget pulvinar efficitur. Donec eget neque volutpat ligula laoreet
  ultrices sed quis dolor. Phasellus tristique eros non ex volutpat pulvinar. In faucibus dapibus purus
  id facilisis. Cras mollis enim quis feugiat volutpat. Vivamus venenatis tellus</p>
  ellus, sit amet rutrum quam auctor in. Vivamus condimentum, felis sit amet porttitor
  auctor, mi augue efficitur erat, at blandit erat magna
  emper lorem. Ut ut libero euismod, rhoncus lacus eget, lobortis lectus.</p>
</div> </center>
  <div class="footer">
<div class="ST2">
 <a href="https://pl-pl.facebook.com/"><i class="icon-facebook"></i></a>
  <a href="https://twitter.com/"><i class="icon-twitter"></i></a>
   <a href="https://github.com/"><i class="icon-github-circled"></i></a>
   <a href="mailto:devtimepl@gmail.com"<i class="icon-mail-alt"></i></a>
  <a href="https://slack.com/"><i class="icon-slack"></i></a>
 </div>
  </div>
</div>

</body>

</html>

body
{
  background-color: #303030;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
}

#container
{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.ractangle
{
  width: 960px;
  margin: 20px;
}

.squere
{
  width: 960px;
}

.footer
{
  width: 960px;
}

#logo
{
  width: 780px;
  height: 40px;
  font-size: 37px;
  margin-bottom:33px;
  font-family: 'Dosis', sans-serif;
}

#poster
{
  width: 780px;
  height: 499px;
}

#nav
{
  width: 780px;
  padding: 10px 0;
  background-color: #202020;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ST2
{
  float: left;
  width: 470px;
}

ol
{
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 18px;
  height: 29px;
  line-height: 200%;
  display: inline-block;
}

ol a
{
  color: #ffffff;
  text-decoration: none;
  display: block;
}

ol > li
{
  float: left;
  width: 150px;
  height: 40px;
  border-right: 1px dashed #1E90FF;
  border-left: 1px dashed #1E90FF;
}

a
{
  color: #ffffff;
}

Jak zrobić ikony pod zdjęciem były koło siebie.

Pozdrawiam

komentarz zamknięcia: ........

komentarz 5 listopada 2017 przez shotokan Nałogowiec (39,660 p.)

Masz tak, że ikony w stopce masz zawarte w divie, któremu dajesz własność float:left. Jeśli chcesz, aby te ikony były obok siebie to im musisz bezpośrednio dać tą własność, albo skorzystać z nowych technologii czyli np. flexboxa.
A tak przy okazji to, moim zdaniem, albo używasz float:left, albo display:inline-block, a nie tego i tego.

komentarz 6 listopada 2017 przez RAD Obywatel (1,810 p.)
edycja 6 listopada 2017 przez RAD

Nie chce korzystać z nowych technologii.

1 odpowiedź

odpowiedź 6 listopada 2017 przez Zelek Użytkownik (960 p.)

Podeślij zdjęcie o co ci dokładnie chodzi, będzie prościej :)

komentarz 6 listopada 2017 przez RAD Obywatel (1,810 p.)

Nie możesz skopiować sobie tekstu, wkleić go do notatnika, zapisać i otworzyć w przeglądarce.

Proste bo dla mnie proste.

I to powinno być prędzej w komentarzach a nie jako odpowiedź.