Strona w html - potrzebna pomoc
Witam. Robie stronę internetową jako projekt na informatykę. Kompletnie sie na tym nie znam, korzystam z tego kursu http://www.kurshtml.edu.pl/ i coś tam skleciłem, jednak mam problem z polskimi znakami. Stronę piszę w Notepad++, używam kodowania UTF8-(bez BOM) formułkę <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> mam wstawioną i jak piszę, to polskie znaki są, jednak jak uruchomię stronę w przeglądarce, to jest jak na screenie.
Dodatkowo chciałem zapytać, czy da się i jak ustawić , żeby wszystko wyświetlało się na środku okna przeglądarki, a nie na lewej stronie, a po boku były paski tła.
Jeszcze jedno pytanie. Użyłem skryptu z tego linka http://www.kurshtml.edu.pl/skrypty/losowy.html do zmiany obrazka. Skrypt zmienia obrazek co odświeżenie strony, dało by się coś do niego dopisać, żeby zmiana następowała automatycznie np. po 5 sekundach?
1) <meta http-equiv="Content-Language" content="pl" />
2)<center></center>
Dzięki za pomoc, ale polskich znaków dalej nie ma.
edit: Teraz działa. Wielkie dzięki. a co z tym skryptem? Macie jakieś pomysły? A może jakiś inny skrypt?
Jeszcze jedno pytanie. Jak wstawic tło w miejsca oznaczone X, ale tak, żeby nie wchodziło mi na środek strony? Próbowałem w pliku css wpisywać selektor ‹ background-image: url(ścieżka dostępu do obrazka) ›, jako selektora używałem html i body, jednak zawsze tło przechodziło przez pół strony w poziomie dla body w górnej cześci dla html w dolnej części.
Tło dajesz w css na body, a na diva, w którym znajduje się cała właściwa struktura strony ("wrapper") białe tło.
ps. zamiast <center> daj na tego samego wrappera margin: 0 auto.
Było robić tą stronę zajączku lub czymś podobnym było by Ci dużo łatwiej
Nie ogarniam tych wrraperów. wstawiłem go w plik css i nic, mam flage Monako. Mógłbyś mi dokładniej to wytłumaczyć?
edit: wiem, że w edytorzy było by łatwiej, ale takie polecenie.
edit2: teraz mam coś takiego. jak zamiast czerwonego wstawić obrazek, który był by na całej długości, a nie na pół strony i jak to szare tło pociągnąć na całą pozostałą powierzchnię?
Przy pytaniach wklejaj kod, duzo latwiej bedzie ci pomoc.
body ‹background: #f00;›
Przeczytaj to: http://webroad.pl/html5-css3/385-element-div-rozciagajacy-sie-na-cala-wysokosc-strony Bardzo prosto wytlumaczony kontener na pelny ekran.
Po drodze straciles polskie znaki, ale to kosmetyka, zostaw na koniec. Do diva, ktory zawiera tekst dodaj padding: 5px; czy cos takiego, bedziesz mial ladny margines i tekst nie bedzie przylepiony do lewego menu.
Przeczytał i wstawiłem te polecenia, jednak nic to nie dało.
Tu kod html:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Strona zawiera historię wyścigu, ciekawostki, opisy kierowców, toru i samochodów" />
<meta name="Keywords" content="le mans, 24h, wyścig, endurance, audi r18, peugeot 908," />
<title>Le Mans 24h - strona nieoficjalna</title>
</head>
<body>
<center>
<div id="wrapper">
<div id="top">
<div id="NAGLOWEK">
<script type="text/javascript">
// <![CDATA[
Array.prototype.random = function(limit)
‹
if (typeof limit == 'undefined' || limit < 0) limit = 1;
else if (!limit) limit = this.length;
for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++)
‹
do ‹ var index = Math.random(); › while (index == 1);
index = Math.floor(index * n);
target.push(source[index]);
source[index] = source[--n];
›
return target;
›
document.write(new Array(
// Tu wpisz kolejne elementy:
'<img src="le mans 1.jpg"/>',
'<img src="le mans 2.jpg"/>',
'<img src="le mans 3.jpg"/>',
'<img src="le mans 4.jpg"/>',
'<img src="le mans 5.jpg"/>',
'<img src="le mans 6.jpg"/>',
'<img src="le mans 7.jpg"/>'
).random().join(''));
// ]]>
</script>
</div>
<div id="MENU">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="Historia.html">Historia</a></li>
<li><a href="tor.html">Tor</a></li>
<li><a href="kierowcy.html">Kierowcy</a></li>
<li><a href="samochody.html">Samochody</a></li>
<li><a href="rekordy.html">Rekordy</a></li>
</ul>
</div>
<div id="TREŚĆ">
<p align="left">
Strona poświęcona jest 24h godzinnemu wyścigowi w Le Mans.
<br> Na stronie zanjduje się opis historii wyścigu, opis toru,
<BR>legendarnych samochodów, kierowców, a także rekordy związane z wyścigiem.
<BR> Zapraszam.
</div>
</div>
</div>
<center>
</body>
</html>
A tu CSS:
ul, ul li ‹
display: block;
list-style: none;
margin: 0;
padding: 0;
›
ul ‹
width: 200px;
›
ul a:link, ul a:visited ‹
display: block;
width: 186px;
text-decoration: none;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 5px;
border: 2px outset #ccc;
›
ul a:hover ‹
background-color: #800;
background-image: url("tlo2.gif");
›
html, body ‹
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
›
#wrapper ‹
background-color: #00FF00;
width: 780px;
margin: 0 auto;
height: 100%
›
#top ‹
width: 780px;
›
#NAGLOWEK ‹
background:
›
#MENU ‹
width: 150px;
float: left;
overflow: hidden;
background-color: #00FF00;
min-height: 100%;
›
#TRESC ‹
width: 630px;
float: left;
overflow: hidden;
background-color: #00FF00;
min-height: 100%;
›
body ‹ background-color: red ›
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
Zamień na
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
A co z rozciągnięciem tła pod menu i treścią strony? Dalej tego nie wiem.
Blad: #NAGLOWEK nie ma okreslonego backgrounda
Dopisane na koncu body dubluje sie, u gory juz to masz. Usun je, a do html, body wyzej dopisz height: 100%.
Naprawde potrzebujesz tego javascriptu?
Siepet ale po co?
<meta charset="utf-8"> wystarczy.
Nawet może zapisać jako:
<meta charset=utf-8>
Na samej górze przy deklaracji doctype usuń
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
i zmień na:
<!doctype html>
Natomiast ze znacznika html możesz również wyrzucić wszystko i zostawić samo <html>
Jak chcesz czerwone wypełnienie tła, dodaj w stylach CSS następującą regułę:
body ‹ background: red ›
Pamiętaj, że GOL zamienia klamry na inne znaki - uważaj w razie kopiowania, ponieważ kod Ci nie zadziała.
Poprawione CSS, ale nadal nie wiem, jak zmienić tło na obszarze zaznaczonym na screenie. Polecenie background-color nie działa na te div-y. Macie jakieś pomysły?
ul, ul li ‹
display: block;
list-style: none;
margin: 0;
padding: 0;
›
ul ‹
width: 200px;
›
ul a:link, ul a:visited ‹
display: block;
width: 186px;
text-decoration: none;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 5px;
border: 2px outset #ccc;
›
ul a:hover ‹
background-color: #800;
background-image: url("tlo2.gif");
›
html, body ‹
background-image: url("tła.jpg");
color: #000;
margin: 0;
padding: 0;
height: 100%;
margin: 0 auto;
›
#top ‹
width: 780px;
background: #FFFFFF;
height: 100%; margin: 0 auto;
›
#NAGLOWEK ‹
background: #FFFFFF
›
#MENU ‹
width: 150px;
float: left;
overflow: hidden;
background-color: #00FF00;
min-height: 100%
›
#TRESC ‹
width: 630px;
float: left;
overflow: hidden;
background-color: #00FF00;
min-height: 100%
›
Pozwolilem sobie zmodyfikowac troche kod. W zasadzie to masz tu sam schemat strony zbudowany z divow.
Oczywiscie mozesz zostac przy swoim, ja ci podaje taki prosty, zebys zobaczyl o co w tych divach chodzi.
------------------------
html:
<body>
<div id="wrapper">
<div id="top">
<br /><br />=====[BANNER]=====<br /><br />
</div>
<div id="menu">
menu1<br />menu2<br />menu3<br />menu4<br />menu5
</div>
<div id="tresc">
Strona poświęcona jest 24h godzinnemu wyścigowi w Le Mans.
<br /> Na stronie zanjduje się opis historii wyścigu, opis toru,
<br />legendarnych samochodów, kierowców, a także rekordy związane z wyścigiem.
<br /> Zapraszam.
</div>
<div id="stopka">
©2013 veyron96
</div>
</div>
</body>
------------------------
css:
body ‹;;background: pink;›;;
#wrapper ‹;;width:780px; margin:0 auto; background-color: red;›;;
#menu ‹;;float:left; width:150px; background-color: yellow;›;;
#tresc ‹;;float: left; width:630px; background-color: green; ›;;
#stopka ‹;;clear:both; background-color: cyan;›;;
------------------------
Nie mam pod reka zadnych obrazkow wiec uzylem kolorow. Na kolorach w sumie latwiej wytlumaczyc :)
Ogolnie wrapper utrzymuje wszystkie divy w miejscu i sluzy do emulowania wysokosci kolumn. Jak sie uzywa tabel to bardzo latwo miec dwie kolumny tej samej wysokosci, ale przy divach juz nie jest tak prosto. Dlatego uzywa sie wrappera, zeby wygladalo, ze kolumny sa rowne.
Body ma tlo pink - proste.
Wrapper ma tlo red - jak widzisz, wrapper to caly glowny box, wszystkie inne divy siedza w nim. Pod menu jest tez czerwony prostokat - to tez wrapper, po prostu div z menu jest krotszy niz ten z trescia, wiec wrapper wystaje. Gdyby tresci bylo mniej, to zolty by byl do samego dolu, a czerwony prostokat bylby po prawej. Zeby ukryc wrappera, trzeba mu dac tlo takie same jak tlo jednej z kolumn. Jesli chcesz zeby menu szlo na sam dol, to dajesz tlo zolte, jesli menu ma byc male to dajesz tlo zielone. Gornym czerwonym sie nie przejmuj, bo przykryjesz go bannerem.
Polecam ci usunac troche tekstu z zielonego, zeby zobaczyc jak to sie bedzie zachowywac gdy tresc bedzie mniejsza niz menu. Pobaw sie tez kolorami tla, zobacz co sie stanie jak wrapper bedzie mial zolte i zielone.
Menu ma tlo zolte - proste.
Tresc ma tlo zielone - proste. Jedyna roznica to nie trzeba uzywac <p align>, tekst jest domyslnie wyrownany do lewej.
Stopka ma tlo jasno niebieskie - u ciebie tego nie bylo, ale zwykle daje sie stopke. Jak nie chcesz to usun.
Aha, nie uzywaj <center></center>. Do wysrodkowania sluzy margin 0 auto w css.
Jak masz pytania to pisz. Jak juz zrozumiesz same divy, to pouzupelniaj je swoja trescia albo popraw swoj kod (u ciebie jest wrapper, ale nic z nim nie robisz).
Dzięki za odpowiedź. Jutro się tym zajmę i jak cos to będę pisał :)
Po usunięciu polecenia <center> wszystko jest ok. Ale mam kolejne pytania. Żeby to trochę lepiej wyglądało dodałem dwa divy jeden nazwałem pasek - to zaznaczone na biało i dodałem stopkę. W css przy jednym i drugim jest to samo:
‹ background-image: url("tlo.gif");
height: 50px; ›
pasek się wyświetla, a stopka nie. Nie wiem dlaczego. I jeszcze jedno. Jakiego polecenia bym musiał użyć, aby dodać takie paski (czerwony na screenie) między div-ami. Chciał bym mieć możliwość wybrania ich szerokości i koloru.
Podejrzewam, ze stopka jest pod paskiem. Divy maja to do siebie, ze jak nie powiesz im gdzie maja byc, to wszystkie beda w tym samym miejscu, jeden pod drugim. Zgaduje, ze oba divy maja w css clear:both;. To ma byc tylko w pierwszym divie (ten co jest wyzej), drugi ma juz tego nie miec. clear: both; jest po to, zeby div, ktory znajduje sie pod kolumnami ustawil sie pod wieksza z nich. Gdyby go nie bylo, to stopka moglaby wskoczyc w ten pusty czerwony kwadrat, ktory widac na obrazku w moim poprzednim poscie.
Jesli chodzi o paski, to zalezy co chcesz z nimi zrobic. Mozna albo dodac nastepne divy albo ustawic ramki w css. Mozesz sprobowac uzyc border-left i border-right. Przykladowo border-left:2px solid red; pokaze lewa ramke diva o grubosci 2px, linia ciagla, kolor czerwony. Pamietaj tylko, ze ramki maja swoja szerokosc, wiec bedziesz musial dopasowac szerokosc samych divow. Lacznie wszystko musi miec taka sama szerokosc jak wrapper wiec albo poszerzysz wrapper o szerokosc ramek, albo zmniejszysz tresc/menu.
Zamiast border-ów zrobiłem box-shadow efekt ciekawszy i uzyskałem to co chciałem. Nie wiem, dlaczego cień nie działa na pasku pod obrazkiem, ani na samym obrazku, chciałbym, żeby był między nimi. generalnie wygląda już nie najgorzej, teraz powoli zabieram się za treść. Muszę jeszcze zmienić to niebieskie tło, bo nie pasuje. Miałby ktoś coś ciekawego? Podobne do tego, ale w innym kolorze, żeby nie był to po prostu jakiś kolor.
edit: jak zrobić, żeby tekst nie był przyklejony do menu?
edit2: da się ustawić różne tła na podstronach? Chodzi mio o to tło na około div-ów.
Dodaj paddingdo diva z tekstem. Padding to taki wewnetrzny margines.
A co z tymi tłami?
Padding 5px dałem, to przestawiło mi div z treścią pod menu. Jak to wpisać, żeby było dobrze?
Jeśli dodałeś 5px dopełnienia w menu, to gdzieś te 5px musisz zabrać z diva z treścią.
Jeśli menu dostało padding z dwóch stron, to już trzeba zabrać 10px z szerokości diva z treścią. itd.
Jak zabieram z szerokości to div z treścią robi się dłuższy od div-a z menu. Jak je następnie wyrównać?
Tu już będzie problem, bo css pod tym względem jest nieco niedopracowany, ne idzie zrobić np. height: 100%-5px.
Możesz to rozwiązać jeszcze inaczej: menu i treść ładujesz w kolejnego diva o szerokości 100%. Temu divowi nadajesz tło takie jak powinno mieć menu. menu dostaje przeźroczyste tło, a treść bez zmian.
Na dobry początek dodaj na początku swojego arkusza CSS taką regułę:
* ‹ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; ›
Sprawi to, że każdy element na stronie będzie miał odmienny "box model", nie będę się nad tym wywodził, ale na pewno ułatwi Ci to pracę i zrozumienie tego jak "styluje" css.
Problem z paddingiem czy rozwiązaniami typu 100%-5px (dzięki Bogu to nie ma prawa działać w gołym css i bardzo dobrze) powinien zniknąć (choć trudno powiedzieć bez znajomości kodu a całego tematu nie chciało mi się wałkować).
Dzięki pisuar, teraz jest ok. Tekst nie przylega do menu a box-y są tak jak przedtem. Teraz treść i koniec.
Mam znowu problem. Div z menu nie nie rozciąga się na 100% do wysokości divaz tekstem.
Niżej kod HTML i plik CSS. Jak by ktoś mógł pomóc było by super, bo na jutro muszę mieć stronę gotową, a teraz wygląda jak na screenie. Wywaliłem tekst żby nie zajmowało aż tyle miejsca. I jeszcze jedno. Jak wstawiać wilmy z YouTube żby było dobrze?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="Strona zawiera historię wyścigu, ciekawostki, opisy kierowców, toru i samochodów" />
<meta name="Keywords" content="le mans, 24h, wyścig, endurance, audi r18, peugeot 908," />
<title>LM 24h - Porsche 917</title>
</head>
<body>
<div id="top">
<div id="PASEK2">
</div>
<div id="NAGLOWEK">
<script type="text/javascript">
// <![CDATA[
Array.prototype.random = function(limit)
‹
if (typeof limit == 'undefined' || limit < 0) limit = 1;
else if (!limit) limit = this.length;
for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++)
‹
do ‹ var index = Math.random(); › while (index == 1);
index = Math.floor(index * n);
target.push(source[index]);
source[index] = source[--n];
›
return target;
›
document.write(new Array(
// Tu wpisz kolejne elementy:
'<img src="le mans 1.jpg"/>',
'<img src="le mans 2.jpg"/>',
'<img src="le mans 3.jpg"/>',
'<img src="le mans 4.jpg"/>',
'<img src="le mans 5.jpg"/>',
'<img src="le mans 6.jpg"/>',
'<img src="le mans 7.jpg"/>'
).random().join(''));
// ]]>
</script>
</div>
<div id="PASEK">
</div>
<div id="MENU">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="Historia.html">O wyścigu</a></li>
<li><a href="tor.html">Tor</a></li>
<li><a href="kierowcy.html">Kierowcy</a></li>
<li><a href="samochody.html">Samochody</a></li>
<li><a href="rekordy.html">Rekordy</a></li>
</ul>
</div>
<div id="TRESC">
<h1>Porsche 917</h1>
<img src="917k.jpg" align="center"/>
</p>
<p align="center">
<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/0gvuUTiBtho?version=3&hl=pl_PL&rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/0gvuUTiBtho?version=3&hl=pl_PL&rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</p>
</div>
<div id="stopka">
</div>
</div>
</body>
</html>
ul, ul li ‹
display: block;
list-style: none;
margin: 0;
padding: 0;
›
ul ‹
width: 200px;
›
ul a:link, ul a:visited ‹
display: block;
width: 186px;
text-decoration: none;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 5px;
border: 2px outset #ccc;
›
ul a:hover ‹
background-color: #800;
background-image: url("tlo2.gif");
›
html, body ‹
background-image: url("p4.jpg");
height: 100%;
margin: 0 auto;
›
* ‹ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;›
#top ‹
width: 780px;
background: #FFFFFF;
height: 100%; margin: 0 auto;
box-shadow: 0 0 5px 5px
›
#PASEK ‹ background-image: url("tlo.gif");
height: 50px;
width: 780px;
box-shadow: 0 0 5px 5px
›
#PASEK2 ‹ background-image: url("tlo.gif");
height: 30px;
width: 780px;
›
#NAGLOWEK ‹
background: #FFFFFF;
width: 780px;
box-shadow: 0 0 5px 5px
›
#MENU ‹
width: 150px;
float: left;
overflow: hidden;
background: url("p6.png");
min-height: 100%;
box-shadow: 0 0 5px 5px;
›
#TRESC ‹
width: 630px;
display: inline-block;
overflow: hidden;
background-color: #FFF8E7;
min-height: 100%;
box-shadow: 0 0 5px 5px ;
padding: 10px
›
#stopka ‹
background-image: url("tlo3.gif");
height: 30px;
width: 780px;
clear:both;
box-shadow: 0 0 5px 5px
›
Błagam, wejdź na:
W pole HTML wklej swój kod.
Kliknij save.
Skopiuj link, który Ci się pokaże w pasku adresu (coś w rodzaju http://jsfiddle.net/r4325) i daj ten link tutaj. I wtedy będziemy walczyć :)
Pozdrawiam.
http://jsfiddle.net/GWdRw/
W kodzie może być trochę bałaganu, jestem tego świadomy, bo wszystko robię po omacku.
Pogrzebałem trochę, ale szybciej przepiszę Ci to od nowa na HTML5 i CSS3, poczekaj chwilkę :)
(to czego szukasz to equal columns / absolute columns, ale wymagałoby przebudowy struktury www, m.in. dodania kontenera treści/menu i wrappera, dlatego uznałem, że szybciej zrobię Ci to tak jak trzeba)
Dobra, nie ogarnąłem, po prostu mnie te spaghetti przerosło, wybacz :D
Najszybsze rozwiązanie w jQuery:
Dodajesz tę linijkę gdzieś w head:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
I jak już załadowało jQuery wrzucasz coś takiego niżej:
<script type="text/javascript">
$(document).ready(function()‹
$('#MENU').height(jQuery('#TRESC').outerHeight());
›);
</script>
Czyli po polsku - jak się wczyta dokument jQuery nadaje height (wysokość) elementowi o ID "MENU" biorąc ją z elementu o ID "TREŚĆ" (outerHeight zamiast height, bo outer uwzględnia także paddingi).
Jeśli praca będzie sprawdzana na kompie bez dostępu do netu, to ściągnij sobie jQuery np. stąd http://code.jquery.com/jquery-1.9.0.min.js , zapisz obok innych plików i zmień src na jquery-1.9.0.min.js.
Tutaj masz update i pokazane jak to działa:
Wstawiłem formułkę w head i zmieniłem src na jquery-1.9.0.min.js . To co dałeś w linku http://code.jquery.com/jquery-1.9.0.min.js skopiowałem i zapisałem pod nazwą jquery-1.9.0.min.js . Plik ten jest w folderze, w którym cała reszta związana ze stroną.
<script type="text/javascript">
$(document).ready(function()‹
$('#MENU').height(jQuery('#TRESC').outerHeight());
›);
</script>
to wstawiłem w body i nadal jest tak samo. Jak wpisałem <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> to się strona nawet nie wczytała, ale mi internet zrywa, więc to może przez to. Masz jakieś rady czy mam sobie odpuścić?
Skrypt nie zadziałał, ale za stronę i tak dostałem 6 i pytanie, czy nie chciałbym pracować przy stronie szkoły. Wielkie dzięki dla was za ogromną pomoc :)
Sorki, nie zauwazylem, ze ten temat jeszcze zyje. Teraz to juz nie ma sensu grzebac przy kodzie. Jak sie czujesz na silach to ulepszaj ta szkolna strone :)
GRYOnline.pl:
tvgry.pl:
