Pasek nawigacyjny

6 Grudnia 2014

Hej, chciałbym zrobić na swojej stronie pasek nawigacyjny w osobnym kolorze i do tego by był na stałe na samej górze. Niestety w żaden sposób mi to nie wychodzi. Mógłbym prosić o pomoc? mały obrazek o co mi dokładnie chodzi: http://i.imgur.com/3IzJq5T.pngtam gdzie pomazałem czarnym chciałbym by był pasek nawigacyjny, a niżej strona ma mieć inne tło i odosobniona od góry.

7 Grudnia 2014

<style> body {margin: 0;padding: 0;} #header {background: #000;width: 100%;}#content {background: yellow;width: 100%;} #header, #content {padding: 20px;} </style> <body>  <div id="header">TREŚĆ NAGŁÓWKA ODOSOBNIONEGO</div><div id="content">DOWOLNA TREŚĆ STRONY</div> </body>

Taki kod na szybko - background: #000 odpowiada za tło wspomnianej przez Ciebie nawigacji, natomiast background: yellow za tło treści strony. Pisane na szybko, nawet nie sprawdziłem, czy działa, ale powinno. Naturalnie tagi <style> wstawiasz w sekcję <head> strony, ale najlepiej by było jakbyś dowiązał zewnętrzny arkusz styli.

7 Grudnia 2014

<style> body {margin: 0;padding: 0;} #header {background: #000;width: 100%;}#content {background: yellow;width: 100%;} #header, #content {padding: 20px;} </style> <body>  <div id="header">TREŚĆ NAGŁÓWKA ODOSOBNIONEGO</div><div id="content">DOWOLNA TREŚĆ STRONY</div> </body>
Taki kod na szybko - background: #000 odpowiada za tło wspomnianej przez Ciebie nawigacji, natomiast background: yellow za tło treści strony. Pisane na szybko, nawet nie sprawdziłem, czy działa, ale powinno. Naturalnie tagi <style> wstawiasz w sekcję <head> strony, ale najlepiej by było jakbyś dowiązał zewnętrzny arkusz styli.

Niestety nie działa. Gdy sobie podświetlę ten fragment, gdzie miał być pasek to coś tam niby widać, ale niestety nie działa.

http://prntscr.com/5e7vll

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content="HTML,CSS,XML,JavaScript">    <title>l</title>    <link rel="stylesheet" href="styl.css" /></head><body>	<div id=header">	TREŚĆ NAGŁÓWKA ODOSOBNIONEGO	</div>	<div id="content">	  <h1>Strona w budowie</h1>	  <center><progress value="0.1">Strona w budowie [0%]</progress>  <progress value="0" max="100">Strona w budowie [0%]</progress></center>	</div>    <div id="reklama">  <script type="text/javascript">  ( function() {    if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };    var unit = {"calltype":"async[2]","publisher":"Magnetix","width":728,"height":90,"sid":"Chitika Default","color_site_link":"ffb700"};    var placement_id = window.CHITIKA.units.length;    window.CHITIKA.units.push(unit);    document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');}());</script><script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script></div></body></html>

body{    background-color: #8c8c8c;}h1 {    color: orange;    text-align: center;}menu {	#menu a{color:#ff8a00;font-size:.8rem;text-align:center;padding:0 6px 4px 6px;min-width:50px;text-shadow:-1px 1px #000}	#menu a:hover{background-color:#252525;border-radius:5px}	#menu a img{margin:auto;display:block}}#header {background-color: #000000;width: 100%;}

Mój index i styl

7 Grudnia 2014

Niestety nie działa. Gdy sobie podświetlę ten fragment, gdzie miał być pasek to coś tam niby widać, ale niestety nie działa.

http://prntscr.com/5e7vll

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content="HTML,CSS,XML,JavaScript">    <title>l</title>    <link rel="stylesheet" href="styl.css" /></head><body>	<div id=header">	TREŚĆ NAGŁÓWKA ODOSOBNIONEGO	</div>	<div id="content">	  <h1>Strona w budowie</h1>	  <center><progress value="0.1">Strona w budowie [0%]</progress>  <progress value="0" max="100">Strona w budowie [0%]</progress></center>	</div>    <div id="reklama">  <script type="text/javascript">  ( function() {    if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };    var unit = {"calltype":"async[2]","publisher":"Magnetix","width":728,"height":90,"sid":"Chitika Default","color_site_link":"ffb700"};    var placement_id = window.CHITIKA.units.length;    window.CHITIKA.units.push(unit);    document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');}());</script><script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script></div></body></html>

body{    background-color: #8c8c8c;}h1 {    color: orange;    text-align: center;}menu {	#menu a{color:#ff8a00;font-size:.8rem;text-align:center;padding:0 6px 4px 6px;min-width:50px;text-shadow:-1px 1px #000}	#menu a:hover{background-color:#252525;border-radius:5px}	#menu a img{margin:auto;display:block}}#header {background-color: #000000;width: 100%;}

Mój index i styl

Wkleiłeś stary kod, którego nie sprawdziłem - wklej od nowa ten poniżej.

<style> body {margin: 0;padding: 0;} #header {background: #000;width: 100%;}#content {background: yellow;width: 100%;} #header, #content {padding: 20px;} </style> <body>  <div id="header">TREŚĆ NAGŁÓWKA ODOSOBNIONEGO</div><div id="content">DOWOLNA TREŚĆ STRONY</div> </body>

Tak na marginesie, zawsze na początku patrz co wklejasz (albo korzystaj z notepad++, który wykrywa takie błędy). Div header nie ma prawa być poprawnie wyświetlany, bo zjadłeś cudzysłów.

<div id=header">

zamień na:

<div id="header">

7 Grudnia 2014

Wkleiłeś stary kod, którego nie sprawdziłem - wklej od nowa ten poniżej.
<style> body {margin: 0;padding: 0;} #header {background: #000;width: 100%;}#content {background: yellow;width: 100%;} #header, #content {padding: 20px;} </style> <body>  <div id="header">TREŚĆ NAGŁÓWKA ODOSOBNIONEGO</div><div id="content">DOWOLNA TREŚĆ STRONY</div> </body>
Tak na marginesie, zawsze na początku patrz co wklejasz (albo korzystaj z notepad++, który wykrywa takie błędy). Div header nie jma prawa być poprawnie wyświetlany, bo zjadłeś cudzysłów.
<div id=header">
zamień na:
<div id="header">

Francja elegancja, dzięki wielkie