Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z menu
Forum PHP.pl > Forum > Przedszkole
avi
11.11.2010, 12:07:47
HTML:

Cytat
<!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">
<html>
<head>
<title>Rejsy po mazurach - autor</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="favicon.png"/>
</head>
<body>

<div id="site">
<div id="logo">
</div>
<div id="srodek">
<marquee behavior="alternate" scrollamount="2"><a href="http://pya.org.pl/pzz/"><img src="images/D.jpg" border="0/></a>
<a href="http://www.zeglarskaprzygoda.pl/"><img src="images/logozp.jpg" border="0/></a>
<a href="http://www.wodniacy.pl/"><img src="images/mona.jpg" border="0/></a>
<a href="http://www.zeglarstwomorskie.ugu.pl/"><img src="images/produkty_weglan_sodu.jpg" border="0"/></a></marquee>
<div id="menu" align="center">
MENU GŁÓWNE
</div>
<ul id="navigation">
<li><a href="index.php">Strona Główna</a></li>
<li><a href="index.php">O Mnie</a></li>

<li><a href="index.php">Rejsy</a></li>
<li><a href="index.php">Kontakt</a></li>
</ul><br />
<div id="menu" align="center">
MENU GŁÓWNE
</div>
<ul id="navigation">
<li><a href="index.php">Strona Główna</a></li>
<li><a href="index.php">O Mnie</a></li>
<li><a href="index.php">Rejsy</a></li>
<li><a href="index.php">Kontakt</a></li>

</ul>
<div id="news" align="center">
Strona Główna
<div id="tresc">
Nazywam się .... blablabla<br />
tratata siulululu hahaha moze dziala tak jak powinno chociaz razz!!!!!!!!! blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
sratatatattatatatatatataat
</div>
</div>
</div>

<div id="stopka" align="center">
&copy 2010-2011 by autor, Wszelkie Prawa Zastrzeżone<br><div style="font: 10px Arial;"> Layout & Code by autor</div>

</div>
</div>
</body>
</html>


CSS:

Cytat
body, html {
background-image: url(images/bg.gif);
background-repeat: repeat;
padding: 0;
margin: 0;
font: 14px Arial;
color: black;
}
#site {
width: 1024px;
margin: 0 auto;
}
#logo {
background-image: url(images/logo.png);
width: 1024px;
height: 300px;
}
#srodek {
background-color: white;
float: center;
width: 1024px;
height: 700px;
margin-top: -21px;
}
#stopka {
background-image: url(images/stopka.png);
background-repeat: no-repeat;
padding-top: 15px;
width: 1024px;
height: 50px;
}
#news {
background-image: url(images/news.png);
background-repeat: no-repeat;
padding-top: 10px;
font: 20px Arial;
color: white;
width: 590px;
height: 50px;
float: left;
margin-top: 50px;
margin-left: 20px;
}
#tresc {
float: center;
padding-top: 15px;
font: 14px Arial;
color: black;
}
#menu {
background-image: url(images/menu.png);
background-repeat: no-repeat;
width: 250px;
height: 40px;
float: right;
margin-right: 10px;
margin-top: 48px;
padding-top: 10px;
color: white;
font: 15px Arial bold;
font-weight: bold;

}
#navigation {
float: right;
padding-top: 25px;
margin-right: -130px;
text-decoration: none;
list-style-type: none;
color: black;
font-weight: normal;
padding-top: 80px;
}
#navigation a {
color: black;
font: 14px Arial;
text-decoration: none;
}
#navigation a:hover {
color: #993366;
font: 15px Arial;
text-decoration: none;
font-weight: bolder;
}


Problem jest taki, że menu robi się obok siebie a ma robić się pionowo... wygląda tak: kliknij
Jestem już bezsilny pomóżcie..
cniak
11.11.2010, 12:35:06
Usunąłem pare marginesów zeby wygodniej mi sie to robilo. Pododajesz sobie. Sprawdzalem tylko na firefoxie
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <html>
  6. <head>
  7. <title>Rejsy po mazurach - autor</title>
  8. <link href="style.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div id="site">
  13. <div id="logo">
  14. </div>
  15. <div id="srodek">
  16. <div id ="float_menu">
  17. <div id="menu">
  18. MENU GŁÓWNE
  19.  
  20. <ul id="navigation">
  21. <li><a href="index.php">Strona Główna</a></li>
  22. <li><a href="index.php">O Mnie</a></li>
  23. <li><a href="index.php">Rejsy</a></li>
  24. <li><a href="index.php">Kontakt</a></li>
  25. </ul>
  26. </div><br />
  27. <div id="menu" align="center">
  28.  
  29. MENU GŁÓWNE
  30. <ul id="navigation">
  31. <li><a href="index.php">Strona Główna</a></li>
  32. <li><a href="index.php">O Mnie</a></li>
  33. <li><a href="index.php">Rejsy</a></li>
  34. <li><a href="index.php">Kontakt</a></li>
  35. </ul>
  36. <div class="clear"></div>
  37. </div>
  38. </div>
  39. <div id="news" align="center">
  40. Strona Główna
  41. <div id="tresc">
  42. Nazywam się .... blablabla<br />
  43. tratata siulululu hahaha moze dziala tak jak powinno chociaz razz!!!!!!!!! blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
  44. blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
  45. blablablabalbblblablablbblablablabalbblblablablbblablablabalbblblablablb
  46. sratatatattatatatatatataat
  47. <div class="clear"></div>
  48. </div>
  49. </div>
  50. </div>
  51.  
  52. <div id="stopka" align="center">
  53. &copy 2010-2011 by autor, Wszelkie Prawa Zastrzeżone<br><div style="font: 10px Arial;"> Layout & Code by autor</div>
  54. </div>
  55. </div>
  56. </body>
  57. </html>
[HTML] pobierz, plaintext

css
[HTML] pobierz, plaintext 
  1. body, html {
  2. background-image: url(images/bg.gif);
  3. background-repeat: repeat;
  4. padding: 0;
  5. margin: 0;
  6. font: 14px Arial;
  7. color: black;
  8. }
  9. #site {
  10. width: 1024px;
  11. margin: 0 auto;
  12. }
  13. #logo {
  14. background-image: url(images/logo.png);
  15. width: 1024px;
  16. height: 300px;
  17. }
  18. #srodek {
  19. background-color: white;
  20. float: center;
  21. width: 1024px;
  22. height: 700px;
  23.  
  24. }
  25. #stopka {
  26. background-image: url(images/stopka.png);
  27. background-repeat: no-repeat;
  28. width: 1024px;
  29. height: 50px;
  30. }
  31. #news {
  32. background-image: url(images/news.png);
  33. background-repeat: no-repeat;
  34. font: 20px Arial;
  35. color: white;
  36. width: 590px;
  37. height: 50px;
  38. float: left;
  39.  
  40. }
  41. #tresc {
  42. float: left;
  43. padding-top: 15px;
  44. font: 14px Arial;
  45. color: black;
  46. }
  47. #float_menu {
  48. 	float: right;
  49. }
  50. #menu {
  51. background-image: url(images/menu.png);
  52. background-repeat: no-repeat;
  53. background-color: blue;
  54. width: 250px;
  55. color: white;
  56. font: 15px Arial bold;
  57. font-weight: bold;
  58.  
  59. }
  60. #navigation {
  61. text-decoration: none;
  62. list-style-type: none;
  63. color: black;
  64. font-weight: normal;
  65. background: white;
  66. }
  67. #navigation a {
  68. color: black;
  69. font: 14px Arial;
  70. text-decoration: none;
  71. }
  72. #navigation a:hover {
  73. color: #993366;
  74. font: 15px Arial;
  75. text-decoration: none;
  76. font-weight: bolder;
  77. }
  78. .clear {clear: both; content: ".";}
[HTML] pobierz, plaintext
avi
11.11.2010, 12:47:03
Nie za bardzo to działa. Cała stronka się rozjeżdża.
cniak
11.11.2010, 12:51:45
Cytat(avi @ 11.11.2010, 12:47:03 ) *
Nie za bardzo to działa. Cała stronka się rozjeżdża.

U mnie działało, usunąłem marginesy itd, wiec pozamieniaj wszystko.
avi
11.11.2010, 13:04:02
Dodałem do swojej twoje modyfikacje i w ogóle nie chce mi to działać... mam już dość.

#dziala:
usunąłem wszystkie floaty z manu i dodałem jedną pozycję w osobnym divie, gdzie ma się znajdować.. ;D
cniak
11.11.2010, 13:44:30
Cytat(avi @ 11.11.2010, 13:04:02 ) *
Dodałem do swojej twoje modyfikacje i w ogóle nie chce mi to działać... mam już dość.

#dziala:
usunąłem wszystkie floaty z manu i dodałem jedną pozycję w osobnym divie, gdzie ma się znajdować.. ;D

bo wlasnie takie cos ja zrobilem winksmiley.jpg
avi
11.11.2010, 13:58:11
Twoje mi nie działało nie wiedzieć czemu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.