• 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

+2 głosów
71 wizyt
pytanie zadane 8 czerwca w HTML i CSS przez bazyl8796 Użytkownik (760 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 przez .::VBService::. VIP (104,540 p.)
wybrane 6 dni temu 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 przez pablop76 VIP (113,660 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 przez MarioG8 Nałogowiec (46,660 p.)
<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 przez MarioG8 Nałogowiec (46,660 p.)
edycja 8 czerwca przez MarioG8

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ź 84 wizyt
pytanie zadane 31 stycznia 2018 w HTML i CSS przez Oskar4002 Początkujący (470 p.)
0 głosów
1 odpowiedź 77 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ź 97 wizyt
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

83,603 zapytań

132,253 odpowiedzi

291,741 komentarzy

55,204 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...