listy i divy w "responsywnym" footer

pytanie zadane 8 czerwca 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

Cześć,

mam taki problem, mianowicie zrobiłem diva (wrapperfooter), który zajmuje 80% szerokości (przez width:80%) oraz jest wycentrowany w poziomie jako pojemnik na elementy "footerowe". Zrobiłem 2 listy nawigacyjne od lewej, po środku chce dać coś w rodzaju cytatu, a z prawej strony ikonki do social mediów. Nie wiem jednak jak zrobić, by ikonki do social mediów zawsze były "przyklejone" do prawego 'boku" wrapperfooter, a cytat był zawsze wycentrowany między listami nawigacyjnymi po lewej, a ikonkami po prawej. Niestety zarówno justify-content:right/end/center jak i text-align:right mi nie działają.
Proszę o pomoc, bo kompletnie nie wiem, co robię źle :(.

Pozdrawiam!

<html>
  <body>
    <footer>
      <div class="wrapperfooter">
      <ul class="aboutus">
        <li><a href="#">test01</a></li>
        <li><a href="#">test02</a></li>
        <li><a href="#">test03</a></li>
        <li><a href="#">test04</a></li>
      </ul>
      <ul class="help">
        <li><a href="#">test11</a></li>
        <li><a href="#">test12</a></li>
        <li><a href="#">test13</a></li>
        <li><a href="#">test14</a></li>
      </ul>
      <div class="motto">
        <h1>"lorem ipsum dolor sit amet"</h1>
        <p>~podpis</p>
      </div>
      <ul class="social">
        <li><a href="#"><img src="img/tw.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/yt.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/gh.png" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/fb.jpg" width="32px" height="32px"></a></li>
      </ul>
    </div>
    </footer>
  </body>

footer
{
    height:120px;
    border-top:2px solid #cecece;
    bottom:0;
    position:absolute;
    width:100%;
    padding: 10px 0;
    line-height: 100%;
}
footer ul
{
    list-style-type: none;
    float:left;
    margin-right: 35px;
}
footer ul li a
{
    text-decoration: none;
    color:rgb(51, 51, 51);
    font-size:11px;
    text-transform: uppercase;
}
footer ul li a:hover
{
    color:#047cd1;
    text-decoration: underline;
    font-size:11px;
    text-transform: uppercase;
}
footer ul[class="social"]
{
    justify-content:right;
}
footer ul[class="social"] li
{
    float:left;
    padding:0px 4px 0px 4px;
    
}
footer ul[class="social"] li a
{
    opacity: 0.93;
}
footer ul[class="social"] img
{
  border:1px dashed black;
}
footer ul[class="social"] li a:hover
{
    opacity:1;
}
.wrapperfooter
{
    margin-left: auto;
    margin-right: auto;
    width:80%;
}
.motto
{
    float:left;
}
.motto h1
{
    font-size:18px;
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
}

3 odpowiedzi

odpowiedź 10 czerwca 2021 przez VBService Ekspert (252,740 p.)
wybrane 11 czerwca 2021 przez bazyl8796

Najlepsza

Może użyj grid-a.

<footer>
  <div class="footer-container">

    <div class="footer-left">
      <ul class="about-us">
        <li><a href="#">test01</a></li>
        <li><a href="#">test02</a></li>
        <li><a href="#">test03</a></li>
        <li><a href="#">test04</a></li>
      </ul>
      <ul class="help">
        <li><a href="#">test11</a></li>
        <li><a href="#">test12</a></li>
        <li><a href="#">test13</a></li>
        <li><a href="#">test14</a></li>
      </ul>
    </div>

    <div class="footer-middle">
      <div class="motto">
        <h1>"lorem ipsum dolor sit amet"</h1>
        <p>&#8275;podpis</p>
      </div>
    </div>

    <div class="footer-right">
      <ul class="social">
        <li><a href="#"><img src="img/tw.jpg"></a></li>
        <li><a href="#"><img src="img/yt.jpg"></a></li>
        <li><a href="#"><img src="img/gh.png"></a></li>
        <li><a href="#"><img src="img/fb.jpg"></a></li>
      </ul>
    </div>

  </div>
</footer>

footer {
  height: 120px;
  border-top: 2px solid #cecece;
  position: absolute;
  bottom: 0;  
  width: 100%;
  padding: 10px 0;
  line-height: 100%;
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "footer-left footer-middle footer-right";
}
.footer-left   { grid-area: footer-left; }
.footer-middle { grid-area: footer-middle; }
.footer-right  { grid-area: footer-right; }

/* ----------------------------------------- */
footer .about-us, .help {
  list-style-type: none;
  display: inline-block;
  margin-right: 35px;
}
footer .about-us li a, .help li a {
  text-decoration: none;
  color: rgb(51, 51, 51);
  font-size: 11px;
  text-transform: uppercase;
}
footer .about-us li a:hover, 
       .help li a:hover {
  color: #047cd1;
  text-decoration: underline;
}

/* ----------------------------------------- */
footer .motto {
  display: grid;
  align-items: center;
  justify-content: center;
}
footer .motto h1
{
  font-size: 18px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: left;
}

/* ----------------------------------------- */
footer .social li {
  display: inline-block;
  padding:0px 4px 0px 4px;     
}
footer .social li a {
  opacity: 0.93;
}
footer .social img {
  width: 32px;
  height: 32px;
  border: 1px dashed black;
}
footer .social li a:hover {
  opacity: 1;
}

[ SWUNG DASH - ⁓ html code: ⁓ ]

odpowiedź 8 czerwca 2021 przez pablop76 VIP (123,120 p.)

odpowiedź 8 czerwca 2021 przez niezalogowany

<html>
  <body>
    <footer>
      <div class="wrapperfooter">
      <ul class="aboutus">
        <li><a href="#">test01</a></li>
        <li><a href="#">test02</a></li>
        <li><a href="#">test03</a></li>
        <li><a href="#">test04</a></li>
      </ul>
      <ul class="help">
        <li><a href="#">test11</a></li>
        <li><a href="#">test12</a></li>
        <li><a href="#">test13</a></li>
        <li><a href="#">test14</a></li>
      </ul>
      <div class="motto">
        <h1>"lorem ipsum dolor sit amet"</h1>
        <p>~podpis</p>
      </div>
      <ul class="social">
        <li><a href="#"><img src="img/tw.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/yt.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/gh.png" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/fb.jpg" width="32px" height="32px"></a></li>
      </ul>
    </div>
    </footer>
  </body>

footer
{
    height:120px;
    border-top:2px solid #cecece;
    bottom:0;
    position:absolute;
    width:100%;
    padding: 10px 0;
    line-height: 100%;
}
footer ul
{
    list-style-type: none;
    float:left;
    margin-right: 35px;
}
footer ul li a
{
    text-decoration: none;
    color:rgb(51, 51, 51);
    font-size:11px;
    text-transform: uppercase;
}
footer ul li a:hover
{
    color:#047cd1;
    text-decoration: underline;
    font-size:11px;
    text-transform: uppercase;
}
footer ul[class="social"]
{
    justify-content:right;
}
footer ul[class="social"] li
{
    float:left;
    padding:0px 4px 0px 4px;
     
}
footer ul[class="social"] li a
{
    opacity: 0.93;
}
footer ul[class="social"] img
{
  border:1px dashed black;
}
footer ul[class="social"] li a:hover
{
    opacity:1;
}
.wrapperfooter
{
    margin-left: auto;
    margin-right: auto;
    width:80%;
}
.motto
{
    float:left;
}
.motto h1
{
    font-size:18px;
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
}

.wrapperfooter {
  display: flex;
  align-items: center;
  justify-content: center;
}

Zapomniałeś o .wrapperfooter

Pozdrawiam Serdecznie

komentarz 8 czerwca 2021 przez niezalogowany
edycja 8 czerwca 2021

zamiast

justify-content: center;

masz różne możliwości o których możesz poczytać.. myślę że w tym przypadku space-evenly wygląda przyzwoicie

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content