+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Problem z menu (HTML+CSS) (/thread-problem-z-menu-html-css)
Problem z menu (HTML+CSS) - jay88 - 19-04-2011
Witam, stawiam pierwsze kroki w tej dziedzinie i na początek w ramach ćwiczeń chciałem stworzy stronę firmy mojego taty, przygotowałem szablon w Photoshopie, pociąłem go i zacząłem tworzyć html i szablon css.
HTML:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Biuro Rachunkowe ANNPIT</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<div id="annpit">
<h1>Jesteśmy do Twojej dyspozycji od 1992 roku</h1>
<div id="menu">
<li id="tab_01"><a href="strona_glowna.html"><img src="images/tab_01.gif"></a>
<li id="tab_02"><a href="o_nas.html"><img src="images/tab_02.gif"></a>
<li id="tab_03"><a href="oferta.html"><img src="images/tab_03.gif"></a>
<li id="tab_04"><a href="certyfikaty.html"><img src="images/tab_04.gif"></a>
<li id="tab_05"><a href="galeria.html"><img src="images/tab_05.gif"></a>
<li id="tab_06"><a href="kontakt.html"><img src="images/tab_06.gif"></a>
</div>
<div id="zegarek">
<h2><script language="Javascript">
DayName = new Array(7)
DayName[0] = "Niedziela "
DayName[1] = "Poniedziałek "
DayName[2] = "Wtorek "
DayName[3] = "Środa "
DayName[4] = "Czwartek "
DayName[5] = "Piątek "
DayName[6] = "Sobota "
MonthName = new Array(12)
MonthName[0] = "stycznia "
MonthName[1] = "lutego "
MonthName[2] = "marca "
MonthName[3] = "kwietnia "
MonthName[4] = "maja "
MonthName[5] = "czerwca "
MonthName[6] = "lipca "
MonthName[7] = "sierpnia "
MonthName[8] = "września "
MonthName[9] = "pa1dziernika "
MonthName[10] = "listopada "
MonthName[11] = "grudnia "
function getDateStr(){
var Today = new Date()
var WeekDay = Today.getDay()
var Month = Today.getMonth()
var Day = Today.getDate()
var Year = Today.getFullYear()
if(Year <= 99)
Year += 1900
return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + " " + Year
}
</SCRIPT>
<SCRIPT>document.write(getDateStr())</SCRIPT></h2>
</div>
<div id="header"></div>
<div id="content">
<div id="main_column"></div>
<div id="side_panel"></div>
<div id="date_box">
<div id="date_content">
<h3>Kalendarz Podatnika</h3>
</div>
<span id="date_footer"></span>
</div>
<div class="list_box"></div>
<div class="other"></div>
<div id="footer">
<div id="design">
<h4>Design by Piotr Tomaszewski <h4>
<li id="tab_07"><a href="strona_glowna.html"><img src="images/tab_07.gif"></a>
<li id="tab_08"><a href="o_nas.html"><img src="images/tab_08.gif"></a>
<li id="tab_09"><a href="oferta.html"><img src="images/tab_09.gif"></a>
<li id="tab_10"><a href="certyfikaty.html"><img src="images/tab_10.gif"></a>
<li id="tab_11"><a href="galeria.html"><img src="images/tab_11.gif"></a>
<li id="tab_12"><a href="kontakt.html"><img src="images/tab_12.gif"></a>
</div>
</body>
</html>CSS:
Kod:
* {
padding: 0;
margin: 0;
}
body {
background: #ffffff no-repeat;
background-position: top center;
margin: 0px 0;
}
#annpit {
background: url('images/bg.gif') no-repeat;
background-position: top center;
margin: 0px 0;
}
#container {
width: 1024px;
margin: 0 auto;
}
#menu {
width: 1024px;
height: 31px;
background: url('images/menu.gif') no-repeat;
position:relative;
top: 145px;
}
#menu li {
float: left;
height: 31px;
text-align: center;
list-style-type: none;
}
#menu a:hover {
text-decoration: underline;
background: #000000
}
#tab_01 {
width: 134px;
position:relative;
left: 239px;
}
#tab_02 {
width: 79px;
position:relative;
left: 243px;
}
#tab_03 {
width: 79px;
position:relative;
left: 246px;
}
#tab_04 {
width: 107px;
position:relative;
left: 250px;
}
#tab_05 {
width: 78px;
position:relative;
left: 253px;
}
#tab_06 {
width: 84px;
position:relative;
left: 256px;
}
#header {
width: 1024px;
height: 160px;
background: url('images/header.gif') center bottom no-repeat;
position: relative;
}
#content {
background: url('images/content.gif') center 0 repeat-y;
height: 100%;
width: 1024px;
}
#main_column {
height: 66px;
width: 766px;
background: url('images/main_column.gif') no-repeat;
position: relative;
left: 237px;
}
#side_panel {
width: 217px;
padding: 106px 0 0 9px;
background: url('images/side_panel.gif') repeat-y;
position: relative;
left: 20px;
}
#footer {
width: 1024px;
margin: 0 auto;
height: 66px;
background: url('images/footer.gif') center 0 no-repeat;
list-style-type: none;
}
#footer li {
float: right;
height: 17px;
text-align: center;
padding-top: 19px;
}
#footer a:hover {
text-decoration: underline;
background: #dd6a22
}
#tab_07 {
width: 75px;
position:relative;
left: 516px;
}
#tab_08 {
width: 42px;
position:relative;
left: 641px;
top: 1px;
}
#tab_09 {
width: 41px;
position:relative;
left: 727px;
top: 1px;
}
#tab_10 {
width: 62px;
position:relative;
left: 675px;
top: -35px;
}
#tab_11 {
width: 49px;
position:relative;
left: 789px;
top: -35px;
}
#tab_12 {
width: 51px;
position:relative;
left: 890px;
top: -35px;
}
#date_box {
width: 188px;
height: 50px;
background: url('images/date_box.gif') top no-repeat;
position: relative;
top: -196px;
left: 33px;
}
#date_content {
background: url('images/date_content.gif') 0 0 repeat-y;
height: 100%;
width: 188px;
position: relative;
top: 40px;
}
#date_footer {
display: block;
width: 188px;
height: 40px;
background: url('images/date_footer.gif') no-repeat;
position: relative;
top: 40px;
}
.other {
width: 184px;
overflow: hidden;
margin: 0 1px;
}
#design {
width: 217px;
margin-top: 45px;
position: relative;
left: 20px;
top: 10px;
}
#zegarek {
width: 309px;
height: 31px;
position: relative;
left: 40px;
top: 121px;
}
h1 {
font-size: 19px;
font-family: 'Arial Black';
text-align: left;
color: #ffffff;
position: relative;
left: 70px;
top: 120px;
}
h2 {
font-size: 13px;
font-family: Calibri;
color: #ffffff;
}
h3 {
font-size: 18px;
font-family: Andalus;
color: #000000;
text-align: center;
text-decoration: underline ;
}
h4{
font-size: 10px;
font-family: Calibri;
color: #ffffff;
text-align: center;
}
body a {
text-decoration: none;
}w rezultacie otrzymuję coś takiego :
![[Obrazek: wwwfx.jpg]](http://img846.imageshack.us/img846/5152/wwwfx.jpg)
Z tym że górne menu w którym przyciski są zrobione z obrazów nie działa, tzn jesli opuszę je gdzieś nisko to smiga wszystko,ale jak sa na jakimś obrazku to nie działają. I tu moja prośba o sprawdzenie kodów bo niestety sam nie potrafię wyłapać błędów których może być sporo.
Z gory dziękuję
RE: Problem z menu (HTML+CSS) - Pedro84 - 19-04-2011
Dobra, o tym musisz poczytać
1. Podstawy na kurshtml.boo.pl albo na browsehappy
2. Jak się buduje elementy w HTML (listy, etc.)
3. Dlaczego należy zamykać tag, jak się już go otworzy.
Ogólnie, to przerób któryś z powyższych kursów, przeczytaj parę razy i wtedy spróbuj go zakodować poprawnie.
RE: Problem z menu (HTML+CSS) - jay88 - 20-04-2011
Ok już ogarnąłem ten.... nieład .
Ale mam jeden mały problem, po lewej stronie jest ta "kartka z notesu" która ma się dopasowywać rozmiarem do treści, owszem dopasowuje się ale tylko ta kartka ale reszta zostaje bez zmian.
HTML:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Biuro Rachunkowe ANNPIT</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<div id="annpit">
<h1>Jesteśmy do Twojej dyspozycji od 1992 roku</h1>
</div>
<div id="menu_baner">
<div id="menu">
<li id="tab_01"><a href="strona_glowna.html"><img src="images/tab_01.gif"></a></li>
<li id="tab_02"><a href="o_nas.html"><img src="images/tab_02.gif"></a></li>
<li id="tab_03"><a href="oferta.html"><img src="images/tab_03.gif"></a></li>
<li id="tab_04"><a href="certyfikaty.html"><img src="images/tab_04.gif"></a></li>
<li id="tab_05"><a href="galeria.html"><img src="images/tab_05.gif"></a></li>
<li id="tab_06"><a href="kontakt.html"><img src="images/tab_06.gif"></a></li>
</div>
<div id="zegarek">
<h2><script language="Javascript">
DayName = new Array(7)
DayName[0] = "Niedziela "
DayName[1] = "Poniedziałek "
DayName[2] = "Wtorek "
DayName[3] = "Środa "
DayName[4] = "Czwartek "
DayName[5] = "Piątek "
DayName[6] = "Sobota "
MonthName = new Array(12)
MonthName[0] = "stycznia "
MonthName[1] = "lutego "
MonthName[2] = "marca "
MonthName[3] = "kwietnia "
MonthName[4] = "maja "
MonthName[5] = "czerwca "
MonthName[6] = "lipca "
MonthName[7] = "sierpnia "
MonthName[8] = "września "
MonthName[9] = "pa1dziernika "
MonthName[10] = "listopada "
MonthName[11] = "grudnia "
function getDateStr(){
var Today = new Date()
var WeekDay = Today.getDay()
var Month = Today.getMonth()
var Day = Today.getDate()
var Year = Today.getFullYear()
if(Year <= 99)
Year += 1900
return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + " " + Year
}
</SCRIPT>
<SCRIPT>document.write(getDateStr())</SCRIPT></h2>
</div>
</div>
<div id="header"></div>
<div id="content">
<div id="main_column">
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris faucibus enim posuere pede. Phasellus semper varius
massa. <a href="#">Nunc consectetuer</a> diam. Integer leo eros,
varius ut, dapibus sit amet, hendrerit a, odio. Donec
tincidunt tincidunt lectus. Curabitur lectus eget nisl.
Aliquam erat volutpat...</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris faucibus enim posuere pede. Phasellus semper varius
massa. <a href="#">Nunc consectetuer</a> diam. Integer leo eros,
varius ut, dapibus sit amet, hendrerit a, odio. Donec
tincidunt tincidunt lectus. Curabitur lectus eget nisl.
Aliquam erat volutpat...</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris faucibus enim posuere pede. Phasellus semper varius
massa. <a href="#">Nunc consectetuer</a> diam. Integer leo eros,
varius ut, dapibus sit amet, hendrerit a, odio. Donec
tincidunt tincidunt lectus. Curabitur lectus eget nisl.
Aliquam erat volutpat...</p>
</div>
</div>
<div id="side_panel"></div>
<div id="date_box">
<div id="date_content">
<h3>Kalendarz Podatnika</h3>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris faucibus enim posuere pede. Phasellus semper varius
massa. <a href="#">Nunc consectetuer</a> diam. Integer leo eros,
varius ut, dapibus sit amet, hendrerit a, odio. Donec
tincidunt tincidunt lectus. Curabitur lectus eget nisl.
Aliquam erat volutpat...</p>
</div>
</div>
<span id="date_footer"></span>
</div>
<div id="other">
</div>
</div>
<div id="footer">
<div id="design">
<h4>Design by Piotr Tomaszewski <h4>
</div>
<div id="small_menu">
<li id="tab_07"><a href="strona_glowna.html"><img src="images/tab_07.gif"></a></li>
<li id="tab_08"><a href="o_nas.html"><img src="images/tab_08.gif"></a></li>
<li id="tab_09"><a href="oferta.html"><img src="images/tab_09.gif"></a></li>
<li id="tab_10"><a href="certyfikaty.html"><img src="images/tab_10.gif"></a></li>
<li id="tab_11"><a href="galeria.html"><img src="images/tab_11.gif"></a></li>
<li id="tab_12"><a href="kontakt.html"><img src="images/tab_12.gif"></a></li>
</div>
</div>
</div>
</body>
</html>CSS:
Kod:
* {
padding: 0;
margin: 0;
}
body {
background: #ffffff no-repeat;
background-position: top center;
margin: 0px 0;
}
#annpit {
background: url('images/bg.gif') no-repeat;
background-position: top center;
height: 166px;
}
#container {
width: 1024px;
margin: 0 auto;
}
#menu_baner {
width: 1024px;
height: 31px;
background: url('images/menu.gif') no-repeat;
position:relative;
top: 4px;
}
#menu {
list-style-type: none;
}
#menu li {
float: left;
height: 31px;
}
#menu a:hover {
text-decoration: underline;
background: #000000
}
#tab_01 {
width: 133px;
position:relative;
left: 239px;
}
#tab_02 {
width: 78px;
position:relative;
left: 244px;
}
#tab_03 {
width: 78px;
position:relative;
left: 248px;
}
#tab_04 {
width: 106px;
position:relative;
left: 252px;
}
#tab_05 {
width: 77px;
position:relative;
left: 256px;
}
#tab_06 {
width: 83px;
position:relative;
left: 261px;
}
#header {
width: 1024px;
height: 28px;
background: url('images/header.gif') center bottom no-repeat;
position: relative;
top: 20px;
}
#content {
background: url('images/content.gif') 0 0 repeat-y;
min-height: 100%;
}
#main_column {
min-height: 66px;
width: 766px;
background: url('images/main_column.gif') no-repeat;
position: relative;
left: 237px;
top: 20px;
}
#side_panel {
width: 217px;
padding: 106px 0 0 9px;
background: url('images/side_panel.gif') repeat-y;
position: relative;
left: 20px;
}
#footer {
width: 1024px;
margin: 0 auto;
height: 76px;
background: url('images/footer.gif') 0 0 no-repeat;
}
#design {
width: 217px;
margin-top: 0px;
position: relative;
left: 20px;
top: 10px;
}
#small_menu {
list-style-type: none;
}
#small_menu li {
float: right;
height: 17px;
padding-top: 30px;
}
#small_menu a:hover {
text-decoration: underline;
background: #dd6a22
}
#tab_07 {
width: 75px;
position:relative;
left: -269px;
top: -1px
}
#tab_08 {
width: 42px;
position:relative;
left: -147px;
top: 0px;
}
#tab_09 {
width: 41px;
position:relative;
left: -62px;
top: 0px;
}
#tab_10 {
width: 62px;
position:relative;
left: 44px;
top: 0px;
}
#tab_11 {
width: 49px;
position:relative;
left: 158px;
top: 0px;
}
#tab_12 {
width: 51px;
position:relative;
left:260px;
top: 0px;
}
#date_box {
width: 188px;
height: 50px;
background: url('images/date_box.gif') top no-repeat;
position: relative;
top: -175px;
left: 33px;
}
#date_content {
background: url('images/date_content.gif') 0 0 repeat-y;
min-height: 100%;
width: 188px;
position: relative;
top: 40px;
}
#date_footer {
display: block;
width: 188px;
height: 40px;
background: url('images/date_footer.gif') no-repeat;
position: relative;
top: 40px;
}
#other {
width: 184px;
overflow: hidden;
margin: 0 5px;
position: relative;
top: -40px;
}
#zegarek {
width: 309px;
height: 31px;
position: relative;
left: 40px;
top: -23px;
}
h1 {
font-size: 19px;
font-family: 'Arial Black';
text-align: left;
color: #ffffff;
position: relative;
left: 70px;
top: 120px;
}
h2 {
font-size: 13px;
font-family: Calibri;
color: #ffffff;
}
h3 {
font-size: 18px;
font-family: Andalus;
color: #000000;
text-align: center;
text-decoration: underline ;
}
h4{
font-size: 10px;
font-family: Calibri;
color: #ffffff;
text-align: center;
}
body a {
text-decoration: none;
}![[Obrazek: www1y.jpg]](http://img862.imageshack.us/img862/3689/www1y.jpg)
Drugi problem mam z pseudoklasą hover. Górne menu miało się zmieniać po najechaniu myszki normalnie na każdym linku miał być obrazek nr 1 a po najechaniu miał sie pokazać inny. Po zastosowaniu hover owszem obrazki się zmieniały ale przestały działać linki
Kod:
#menu {
list-style-type: none;
}
#menu li {
float: left;
height: 31px;
}
#tab_01 {
width: 133px;
position:relative;
left: 240px;
background: url('images/tab_01.gif') ;
}
#tab_01:hover {
background: url('images/tab_01a.gif') ;
}
#tab_02 {
width: 78px;
position:relative;
left: 244px;
background: url('images/tab_02.gif') ;
}
#tab_02:hover {
background: url('images/tab_02a.gif') ;
}