pasek nawigacji na stronie www

pytanie zadane 1 maja 2021 w HTML i CSS przez bkmac Nowicjusz (140 p.)

Cześć, występuje u mnie problem, mianowicie taki że przy tworzeniu paska

<nav>

                <a class="menu" href="#">Oferta</a>

                <a class="menu" href="#" >O nas</a>

                <a class="menu" href="#" >Kontakt</a>

            </nav>

wyskakuje mi wolne pole obok pola kontakt a jesli chcę dodać jeszcze jedną opcję, to pokazuje mi się pod paskiem nawigacji.

A i jeszcze jedno. Jak przestawiać obrazki oraz je zmniejszać? pozdr.

Pokaż 18 poprzednich komentarzy

komentarz 3 maja 2021 przez bkmac Nowicjusz (140 p.)

@SzkolnyAdmin, obrazki nachodzą na siebie po ustawieniu rozmiaru 150x100px co zrobic

komentarz 3 maja 2021 przez SzkolnyAdmin Szeryf (86,400 p.)

Jak mogą nachodzić, jak masz szerokość bloku 1000 pikseli?

komentarz 3 maja 2021 przez bkmac Nowicjusz (140 p.)

No po prostu jest jakby 1 pod drugim i po zmniejszeniu zaczynają nachodzić

komentarz 3 maja 2021 przez SzkolnyAdmin Szeryf (86,400 p.)

Daj CAŁY kod i wrzuć jakiegoś screena.

komentarz 3 maja 2021 przez bkmac Nowicjusz (140 p.)

* {
    margin: 0;
    padding: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
}
body {background-color: grey;}

#wrapper {
    max-width: 1000px;
    margin: 0 auto 0 auto;
    background-color: grey;
}
header img {
    max-width: 100%;
    display: block;
}
nav {
    background-color: black;

}

nav.a {}

a.menu {
    display: inline-block;
    width: 25%;
    padding: 45px 60px 45px 60px;
    color: white;
    text-decoration: none;
    text-align: center;
}
a.menu:hover {
    background-color: grey;

}
h1 {
    text-align: center;
}
p {
    width: 150px;
    height: 100px;
}

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Passerwis</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin-ext">
        <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" >
        <link rel=stylesheet href="style.css">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <img />
            </header>

            <nav>
                <a class="menu" href="#">Oferta</a>
                <a class="menu" href="#" >O nas</a>
                <a class="menu" href="#" >Kontakt</a>
            </nav>

            <section>
                <article>
                    <h1>Passerwis</h1>
                    <p></p>
                    <p><img id="big" class="center" src="eseb logo.jpg" alt="eseb logo - header" /> Tu napis</p>
                    <p><img id="big" class="center" src="kemppi logo.jpg" alt="kemppi logo.jpg - header" /> </p>
                    <p><img id="big" class="center" src="lincoln logo.jpg" alt="lincoln logo.jpg - header" /> </p>
                    <p><img id="big" class="center" src="bester logo.jpg" alt="bester logo.jpg - header"
                </article>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2459.584339558667!2d15.488347851718606!3d51.94153487960923!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470613e4a2233603%3A0xfac2d1385c066691!2sPAS%20SERWIS!5e0!3m2!1spl!2spl!4v1619808202997!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </section>
            <footer></footer>
        </div>
        
    </body>

</html>

to wszystko. dodam ze to moja pierwsza stycznosc z programowaniem

2 odpowiedzi

odpowiedź 3 maja 2021 przez SzkolnyAdmin Szeryf (86,400 p.)

Najpierw błędy w pliku HTML:

linia 9 - stylesheet w cudzysłowy

linia 30 - domknij znacznik img oraz akapit

Obrazki są w akapitach, nic dziwnego, że układają się jeden pod drugim/

komentarz 3 maja 2021 przez bkmac Nowicjusz (140 p.)

Ok jutro to zrobie

komentarz 4 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

linia 9 - stylesheet w cudzysłowy

Dlaczego to jest błąd?

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

@SzkolnyAdmin, ok a co jeszcze poprawić?

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

wiesz co jeszcze poprawić?

odpowiedź 4 maja 2021 przez VBService Ekspert (254,260 p.)
edycja 4 maja 2021 przez VBService

Propozycja. Ja bym zrezygnował z tag-u <p> (tag-ów) na rzecz jednego np.: <div> jako "kontenera" dla obrazków.

Dodatkowo użyłem: Figure i Figcaption

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passerwis</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin-ext">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" >
    <link rel=stylesheet href="style.css">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <img />
      </header>

      <nav>
        <a class="menu" href="#">Oferta</a>
        <a class="menu" href="#">O nas</a>
        <a class="menu" href="#">Kontakt</a>
      </nav>

      <section>
        <article>
          <h1>Passerwis</h1>
          <div class="images-container">
            <figure>
              <img id="big-1" src="eseb logo.jpg" alt="eseb logo - header" />
              <figcaption>Tu napis</figcaption>
            </figure>
            <figure>
              <img id="big-2" src="kemppi logo.jpg" alt="kemppi logo.jpg - header" />
              <figcaption>Tu napis</figcaption>
            </figure>
            <figure>
              <img id="big-3" src="lincoln logo.jpg" alt="lincoln logo.jpg - header" />
              <figcaption>Tu napis</figcaption>
            </figure>
            <figure>
              <img id="big-4" src="bester logo.jpg" alt="bester logo.jpg - header" />
              <figcaption>Tu napis</figcaption>
            </figure>           
          </div>
        </article>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2459.584339558667!2d15.488347851718606!3d51.94153487960923!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470613e4a2233603%3A0xfac2d1385c066691!2sPAS%20SERWIS!5e0!3m2!1spl!2spl!4v1619808202997!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </section>
      <footer></footer>
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
      'Helvetica Neue', sans-serif;
    box-sizing: border-box;
}
body {
  background-color: grey;
} 
#wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background-color: grey;
}
header img {
    max-width: 100%;
    display: block;
}
nav {
    background-color: black; 
} 
a.menu {
    display: inline-block;
    width: 25%;
    padding: 45px 60px;
    color: white;
    text-decoration: none;
    text-align: center;
}
a.menu:hover {
    background-color: grey; 
}
h1 {
    text-align: center;
}
 
 
.images-container {
  text-align: center;
  margin: 1em 0;
}
.images-container figure {
    display: inline-block;
}
.images-container figcaption {
    padding: 0.5em 0;
    font-family: Arial;
    font-weight: bold;
    color: white;
    background-color: rgba(0,0,0,0.2);
    margin: 0 1em;
}
.images-container img {
    max-width: 150px;
    max-height: 100px;
    margin: 1em;
}

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

ok juz zrobilem jak teraz to ustawic poziomo?

komentarz 4 maja 2021 przez VBService Ekspert (254,260 p.)

Co ustawić poziomo? Przejrzałeś uważnie kod html i css, który Tobie podałem, powyżej?

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

no te zdjęcia

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

@VBService, tak przejrzalem

komentarz 4 maja 2021 przez VBService Ekspert (254,260 p.)

Możesz sprawdzić podany kod:

chyba są poziomo?

1	komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.) aaaaaaaaa nie zobaczylem kodu w css, zaraz poprawie

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

a jak iframe ustawic?

ps juz dziala

komentarz 4 maja 2021 przez bkmac Nowicjusz (140 p.)

ii jak usunąć te kwadraciki?

komentarz 4 maja 2021 przez VBService Ekspert (254,260 p.)

ii jak usunąć te kwadraciki?

to w html są

<figcaption>Tu napis</figcaption>

a w css

.images-container figcaption {
    padding: 0.5em 0;
    font-family: Arial;
    font-weight: bold;
    color: white;
    background-color: rgba(0,0,0,0.2);
    margin: 0 1em;
}

możesz je usunąć z html-a i ten wpis z css-a (jak wyżej)