• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

listy i divy w "responsywnym" footer

Hosting forpsi easy 1 pln
+1 głos
268 wizyt
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

+1 głos
odpowiedź 10 czerwca 2021 przez VBService Ekspert (246,010 p.)
wybrane 11 czerwca 2021 przez bazyl8796
 
Najlepsza

Może użyj grid-a.  wink

<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:  &#8275;  ]   smiley

+3 głosów
odpowiedź 8 czerwca 2021 przez pablop76 VIP (122,640 p.)

Źle korzystasz z flexboxa. 

footer ul[class="social"]
{
    justify-content:right;
}

Ten element nie jest ustawiony jako elastyczny(flex).

Twoje założenie jest proste. trzy elementy ustawione jako justify-content. Więc włóż "2 listy nawigacyjne" w jeden pojemnik aby uzyskać trzy elementy w wrapperfooter i tyle. Zrezygnuj również z float na rzecz flexbox.

+1 głos
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 winkyes

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 wink

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

Podobne pytania

0 głosów
1 odpowiedź 208 wizyt
pytanie zadane 31 stycznia 2018 w HTML i CSS przez Oskar4002 Początkujący (470 p.)
0 głosów
1 odpowiedź 140 wizyt
pytanie zadane 16 maja 2017 w HTML i CSS przez Patryk Kożuchowski Początkujący (460 p.)
0 głosów
1 odpowiedź 163 wizyt

92,092 zapytań

140,751 odpowiedzi

317,718 komentarzy

61,409 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 0p. - adrian17
  2. 0p. - wizarddos
  3. 0p. - Dewidos
  4. 0p. - Marcin Jasiński
  5. 0p. - Mateusz Sobala
  6. 0p. - Mateusz
  7. 0p. - NOONE
  8. 0p. - Adam Śpiewak
  9. 0p. - WhiskeyTaster
  10. 0p. - Rafał Budzis
  11. 0p. - Krzysztof Zawadka
  12. 0p. - tokox
  13. 0p. - TheLukaszNs
  14. 0p. - mjavor
  15. 0p. - Jakub Stępień
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat aż -50% (jeszcze tylko dziś 30.11 z okazji Black Week, a potem będzie to 30%) na bilety w wersji "Standard"! Więcej informacji na temat akademii znajdziecie tutaj. Dziękujemy Sekurakowi za tak fajną zniżkę dla Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 15% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...