Question

我在固定导航方面遇到了一些麻烦。我试着放width: 100%;，但由于我有边距，它会溢出它们。然后我尝试了width: auto;，它只适合我网站的一半。那么这笔交易是什么？

＆＃13;

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin: 20px;
  border: solid rgb(200, 101, 103);
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}

#header {
  height: 50px;
  box-sizing: border-box;
  padding: -5px;
  width: auto;
}

#navigacija {
  width: auto;
  padding: 0px;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
}

#navigacija a {
  box-sizing: border-box;
}

img {
  float: right;
}

.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  padding: 15px;
}

＆＃13;

<!DOCYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML i CSS</title>

  <link rel="stylesheet" href="Home.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
</head>

<body>
  <div id="header">
    <div id="navigacija">
      <a href="Home.html">
        <div class="navitem home"><b>HOME</b></div>
      </a>
      <a href="#">
        <div class="navitem gallery"><b>GALLERY</b></div>
      </a>
      <a href="#">
        <div class="navitem contact"><b>CONTACT</b></div>
        <a href="#">
          <div class="navitem info"><b>INFO</b></div>
        </a>
    </div>
  </div>

  <h1><b>HTML i CSS</b></h1>

  <h2>HTML</h2>
  <p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" style="width:200px; height:200px;"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica.
    Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru
    i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard
    Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari
    za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva,
    napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom
    HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

  <h2>CSS</h2>
  <p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" style="width:200px; height:200px;">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise
    izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture
    i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje.
    Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet,
    dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u
    oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno
    iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>

</body>

<div>
  <div class="footer">
    <div id="p1"><b>Uradio: Marko Ribic Ia<b></div>
</div>
</html>

＆＃13;

Answer 1

两种方式：

使用calc()

您需要在100%计算中删除父级的边距，所以使用width: calc(100% - 50px);

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin: 20px;
  border: solid rgb(200, 101, 103);
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}

#header {
  width: auto;
}

#navigacija {
  width: calc(100% - 50px);
  padding: 0;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
  top: 35px;
  right:25px;
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
}

#navigacija a {
  box-sizing: border-box;
}

img {
  float: right;
  width: 200px;
  height: 200px;
}

.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  padding: 15px;
}

<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div id="header">
  <div id="navigacija">
    <a href="Home.html">
      <div class="navitem home"><b>HOME</b></div>
    </a>
    <a href="#">
      <div class="navitem gallery"><b>GALLERY</b></div>
    </a>
    <a href="#">
      <div class="navitem contact"><b>CONTACT</b></div>
    </a>
    <a href="#">
      <div class="navitem info"><b>INFO</b></div>
    </a>
  </div>
 </div> 
  <h1><strong>HTML i CSS</strong></h1>

  <h2>HTML</h2>
  <p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica.
    Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru
    i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard
    Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari
    za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva,
    napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom
    HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

  <h2>CSS</h2>
  <p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise
    izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture
    i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje.
    Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet,
    dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u
    oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno
    iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>


  <div>
    <div class="footer">
      <div id="p1"><strong>Uradio: Marko Ribic Ia</strong></div>
    </div>
  </div>

使用position

使用left/right调整开始和结束的位置

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin: 20px;
  border: solid rgb(200, 101, 103);
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}

#header {
  height: 50px;
  box-sizing: border-box;
  width: auto;
}

#navigacija {
  width: calc(100% - 45px);
  padding: 0px;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
  top: 35px
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
}

#navigacija a {
  box-sizing: border-box;
}

img {
  float: right;
  width: 200px;
  height: 200px
}

.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  padding: 15px;
}

<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div id="header">
  <div id="navigacija">
    <a href="Home.html">
      <div class="navitem home"><b>HOME</b></div>
    </a>
    <a href="#">
      <div class="navitem gallery"><b>GALLERY</b></div>
    </a>
    <a href="#">
      <div class="navitem contact"><b>CONTACT</b></div>
    </a>
    <a href="#">
      <div class="navitem info"><b>INFO</b></div>
    </a>
  </div>
</div>
<h1><strong>HTML i CSS</strong></h1>

<h2>HTML</h2>
<p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica. Pomocu
  njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru i slicno.
  Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard Generalized
  Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari za oznacavanje
  i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje
  teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom HTML 4.01 standardu.
  Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

<h2>CSS</h2>
<p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise
  izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i
  sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje. Razliciti
  brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet, dve metode
  su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u oktobru 1994,
  jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno iz skracenice CHSS
  jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>


<div>
  <div class="footer">
    <div id="p1"><strong>Uradio: Marko Ribic Ia</strong></div>
  </div>
</div>

注意：

你的代码中有很多错误，修复它们，你就会得到你想要的东西。

未关闭的标签
没有否定padding

等等。

Answer 2

这里修复...

    #navigacija {
      width: auto;

      /* HERE THE FIX*/
      left: 20px; 
      right: 20px; 

      padding: 0px;
      height: 50px;
      overflow: hidden;
      text-align: right;
      background-color: #089DE3;
      z-index: 9999;
      box-sizing: border-box;
      border-radius: 25px;
      position: fixed;
    }

body {
		  background-color: #DCDCDC;
	 	  box-sizing: border-box;
		margin: 20px;
		border: solid rgb(200, 101, 103);
		}
		
		
		h1 {
		  font-size: 120px;
		  text-align: center;
		  font-family: "Jockey One";
		  color: rgb(200, 101, 103);
		  box-sizing: border-box;
		}

		h2 {
			font-family: "Jockey One";
			font-size: 50px;
			color: rgb(200, 101, 103);
		}
		
		p {
			font-family: "Allerta Stencil";
			font-size: 25px;
		}
		
		#header {
		  height: 50px;
		  box-sizing: border-box;
		  padding: -5px;
		width: auto;
		}

		
		
		#navigacija {
      width: auto;
      
      /* HERE THE FIX*/
      left: 20px; 
      right: 20px; 
		  
		  padding: 0px;
		  height: 50px;
		  overflow: hidden;
		  text-align: right;
		  background-color: #089DE3;
		  z-index: 9999;
		  box-sizing: border-box;
		  border-radius: 25px;
		  position: fixed;
		}
		
		.navitem {
		  background: #089DE3;
		  color: white;
		  line-height: 50px;
		  font-size: 30px;
		  font-family: "Fjalla One";
		  display: inline-block;
		  padding-left: 50px;
		  padding-right: 50px;
		  padding-top: 0px;
		  padding-bottom: 0px;
		  box-sizing: border-box;
		}
		
		#navigacija a {
		box-sizing: border-box;		
		}
		
		img {
			float:right;
		
		}
		
		
		.home:hover {
		  background: #00C5CD;
		box-sizing: border-box;
		}
		
		.gallery:hover {
		  background: #00C5CD;
		box-sizing: border-box;
		}
		
		.contact:hover {
		box-sizing: border-box;
		  background: #00C5CD;
		}
		.info:hover {
			
		box-sizing: border-box;
		background: #00C5CD;
		}

		.footer {
		background-color: #089DE3;
		height: 100px;
		border-top: 2px solid rgb(200, 101, 103);
		}
	
		#p1 {
		color: white;
		font-size: 50px;
		font-family: "Fjalla One";	
		text-align: center;
		padding: 15px;
		}

<!DOCYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML i CSS</title>
    
<link rel="stylesheet" href="Home.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

	



  </head>

  <body>
    <div id="header">
      <div id="navigacija">
        <a href="Home.html">
          <div class="navitem home"><b>HOME</b></div>
        </a>
        <a href="#">
          <div class="navitem gallery"><b>GALLERY</b></div>
        </a>
        <a href="#">
          <div class="navitem contact"><b>CONTACT</b></div>
		<a href="#">
		  <div class="navitem info"><b>INFO</b></div>
        </a>
      </div>
    </div>

    <h1><b>HTML i CSS</b></h1>
	
	<h2>HTML</h2>
	<p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" style="width:200px; height:200px;"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica. Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta.

Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

	<h2>CSS</h2>
	<p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" style="width:200px; height:200px;">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise izgled elemenata veb-stranice.

Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina.

Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje. Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici.

Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet, dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>
	
</body>

<div>
<div class="footer">
	<div id="p1"><b>Uradio: Marko Ribic Ia<b></div>
</div>
</html>

Answer 3

首先请检查您的HTML代码，它不符合标准。打开和关闭括号不在正确的位置。

我认为简单的解决方案是在navigacija项目上设置左右参数。

＆＃13;

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin: 20px;
  border: solid rgb(200, 101, 103);
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}

#header {
  height: 50px;
  box-sizing: border-box;
  padding: -5px;
  width: auto;
}

#navigacija {
  width: auto;
  right: 23px;
  left: 23px;
  padding: 0px;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
}

#navigacija a {
  box-sizing: border-box;
}

img {
  float: right;
}

.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  padding: 15px;
}

＆＃13;

<div id="header">
  <div id="navigacija">
    <a href="Home.html">
      <div class="navitem home"><b>HOME</b></div>
    </a>
    <a href="#">
      <div class="navitem gallery"><b>GALLERY</b></div>
    </a>
    <a href="#">
      <div class="navitem contact"><b>CONTACT</b></div>
    </a>
    <a href="#">
      <div class="navitem info"><b>INFO</b></div>
    </a>
  </div>
</div>
<div>
  <h1><b>HTML i CSS</b></h1>

  <h2>HTML</h2>
  <p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" style="width:200px; height:200px;"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica.
    Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru
    i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard
    Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari
    za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva,
    napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom
    HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

  <h2>CSS</h2>
  <p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" style="width:200px; height:200px;">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise
    izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture
    i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje.
    Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet,
    dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u
    oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno
    iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>

</div>



<div class="footer">
  <div id="p1"><b>Uradio: Marko Ribic Ia</b></div>
</div>

＆＃13;

Answer 4

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin: 20px;
  border: solid rgb(200, 101, 103);
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}

#header {
  height: 50px;
  box-sizing: border-box;
  padding: -5px;
  width: auto;
}

#navigacija {
  width: auto;
  padding: 0px;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
  top: 10px;
  left: 0;
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
}

#navigacija a {
  box-sizing: border-box;
}

img {
  float: right;
}

.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  padding: 15px;
}

<div id="header">
  <div id="navigacija">
    <a href="Home.html">
      <div class="navitem home"><b>HOME</b></div>
    </a>
    <a href="#">
      <div class="navitem gallery"><b>GALLERY</b></div>
    </a>
    <a href="#">
      <div class="navitem contact"><b>CONTACT</b></div>
      <a href="#">
        <div class="navitem info"><b>INFO</b></div>
      </a>
  </div>
</div>

<h1><b>HTML i CSS</b></h1>

<h2>HTML</h2>
<p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" style="width:200px; height:200px;"> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica. Pomocu
  njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru i slicno.
  Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard Generalized
  Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari za oznacavanje
  i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje
  teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom HTML 4.01 standardu.
  Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>

<h2>CSS</h2>
<p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" style="width:200px; height:200px;">CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise
  izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i
  sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje. Razliciti
  brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet, dve metode
  su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u oktobru 1994,
  jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno iz skracenice CHSS
  jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>


<div>
  <div class="footer">
    <div id="p1"><b>Uradio: Marko Ribic Ia<b></div>
</div>

固定导航不会自动宽度

4 个答案:

注意：