Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]pytanie przy robieniu menu(grafika obok grafiki)jak?
Forum PHP.pl > Forum > Przedszkole
gigzorr
otóż mam takie pytanie , nigdy nie wiedziałem jak zrobić poziome menu z grafikami , np

mam pocięte grafiki juz , i jest np. strona główna,gry,programy,forum,kontakt

i jak to osadzić stosujać div obok siebie?
dajmy na to , że obrazki są ponumerowane od 1 do 5 .

#menu {background-image:url(1.jpg);
background-image:url(2.jpg) i tak dalej do 5?wątpie ^^
}


nigdy nie rozumiałem oco chodzi robiąc takie menu.jakaś pomoc?smile.gif

oraz , jak przypisac link do obrazka? a także czy te obrazki sie ustawia w cssie?czy w indexie?nie rozumiem , może jakis przykład?

dziękuje za wszelkie odpowiedzi
Armstrong
http://www.kurshtml.boo.pl/css/poziome_menu,menu.html Odwiedzałeś?


  1. <a href="####" title="###"><img src="####" alt="##" /></a>
gigzorr
właśnie to odwiedziłem
:
  1. ul, ul li {
  2. display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. ul {
  9. position: absolute;
  10. }
  11.  
  12. ul li {
  13. float: left;
  14. border-width: 0 1px 1px 1px;
  15. border-style: solid;
  16. border-color: transparent #25b #25b #9ce;
  17. }
  18.  
  19. ul a:link, ul a:visited {
  20. text-decoration: none;
  21. display: block;
  22. width: 95px;
  23. text-align: center;
  24. padding: 5px 0;
  25. font-weight: bold;
  26. background-color: #27c;
  27. color: #def;
  28. border-top: 10px solid #25b;
  29. }
  30.  
  31. ul a:hover {
  32. background-color: #28e;
  33. color: #fff;
  34. border-top: 20px solid #26d;
  35. }

html:
  1. <ul>
  2. <li><a href="czcionki.html">Czcionki</a></li>
  3. <li><a href="tekst.html">Tekst</a></li>
  4. <li><a href="tlo.html">Tło</a></li>
  5. <li><a href="marginesy.html">Marginesy</a></li>
  6. <li><a href="obramowanie.html">Obramowanie</a></li>
  7. </ul>

chciałem sprawdzić jak to menu wygląda, powinny byc obok siebie te obrazki , ale są miedzy nimi cholerne odstępy które nie wiem jak usunać.to wygląda jakoś tak :

krzysztof_kf
eee ja mam dobrze może jakiś selektro masz dopisany ?
gigzorr
tutaj cały kod css
  1. * {margin:0;
  2. padding:0;
  3. margin-left:60px
  4. }
  5.  
  6.  
  7. body {background:#999;}
  8.  
  9. #top {background-image:url(images/logo.jpg);
  10. height:122px;
  11. width:1024px
  12.  
  13. }
  14.  
  15.  
  16. #center {
  17. background-image:url(images/center.jpg);
  18. height:540px;
  19. font-family:Verdana,Times New Roman;
  20. font-size:20px;
  21. width:830px;
  22. margin-top:40px;
  23. text-align:center;
  24. margin-left:255px
  25.  
  26.  
  27.  
  28. }
  29.  
  30. #stopka {
  31. background-image:url(images/stopka.jpg);
  32. height:44px;
  33. width:1024px
  34. }
  35.  
  36. .mila {color:#03C;
  37. font-family:Times New Roman,Arial,Verdana,Georgia;
  38. }
  39.  
  40. .podpis {color:#FF0;
  41. text-align:right
  42. }
  43.  
  44. #left {
  45. background:#0C0;
  46. width:200px;
  47. height:544px;
  48. position:absolute;
  49. top:160px;
  50. float:left;
  51.  
  52. }
  53.  
  54.  
  55. .menu {color:#FC0;
  56. font-family:Verdana,Times New Roman;
  57. }
  58.  
  59.  
  60. ul, ul li {
  61. display: block;
  62. list-style: none;
  63. margin: 0;
  64. padding: 0;
  65. }
  66.  
  67. ul {
  68. position: absolute;
  69. }
  70.  
  71. ul li {
  72. float: left;
  73. border-width: 0 1px 1px 1px;
  74. border-style: solid;
  75. border-color: transparent #25b #25b #9ce;
  76. }
  77.  
  78. ul a:link, ul a:visited {
  79. text-decoration: none;
  80. display: block;
  81. width: 95px;
  82. text-align: center;
  83. padding: 5px 0;
  84. font-weight: bold;
  85. background-color: #27c;
  86. color: #def;
  87. border-top: 10px solid #25b;
  88. }
  89.  
  90. ul a:hover {
  91. background-color: #28e;
  92. color: #fff;
  93. border-top: 20px solid #26d;
  94. }
krzysztof_kf
w opcji wyrzuć margin-left: 60px; to ci właśnie koliduję margines po między elementami o 60 px

Kod
{
   margin:0;
    padding:0;
    margin-left:60px
    }
gigzorr
Teraz jest super , dzięki , jeszcze jedno pytanie , jak mogę wyśrodkować strone , że tak powiem?

i jeszcze jedno , dlaczego , na samym początku co się zaczyna menu , jest


krzysztof_kf
za pomocą
Kod
margin: 0 auto;


eee i jeszcze jedno , dlaczego , na samym początku co się zaczyna menu , jest ?
gigzorr
Cytat(krzysztof_kf @ 21.02.2010, 21:02:50 ) *
za pomocą
Kod
margin: 0 auto;



wyśrodkowało tylko logo , a dodałem do * żeby zadziałało na całą strone?
jeszcze takie pytanko:
ul, ul li {


poco dwa razy ul ? i dlaczego nie ma przecinka po tym drugim?


dzieki za wszelkie podpowiedzi/odpowiedzi w temacie smile.gif
krzysztof_kf
dodaj do

Kod
margin: 0 auto;


najlepiej jakis selektor typu #top

Kod
#top {
margin: 0 auto;


a ul, ul li musi być po przećinku ze względu to jest oddzielenie selektora za pomocą tej metody tworzy się standardowo menu strony
gigzorr
Cytat(krzysztof_kf @ 21.02.2010, 21:08:46 ) *
dodaj do

Kod
margin: 0 auto;


najlepiej jakis selektor typu #top

Kod
#top {
margin: 0 auto;


a ul, ul li musi być po przećinku ze względu to jest oddzielenie selektora za pomocą tej metody tworzy się standardowo menu strony



dodałem ale dalej to samo , a z #center usunełem marginese od lewej i sie przesuneło ale reszta ? dalej w tym samym miejscu co była , a przecież tam nie ma marginesów
krzysztof_kf
pokaż kod
gigzorr
dodawać do #topa też próbowałem
  1. * {
  2. padding:0;
  3. margin: 0 auto;
  4.  
  5. }
  6.  
  7.  
  8. body {background:#999;}
  9.  
  10. #top {background-image:url(images/logo.jpg);
  11. height:122px;
  12. width:1024px;
  13.  
  14.  
  15. }
  16.  
  17.  
  18. #center {
  19. background-image:url(images/center.jpg);
  20. height:540px;
  21. font-family:Verdana,Times New Roman;
  22. font-size:20px;
  23. width:825px;
  24. margin-top:40px;
  25. text-align:center;
  26. margin-left:200px
  27.  
  28.  
  29.  
  30. }
  31.  
  32. #stopka {
  33. background-image:url(images/stopka.jpg);
  34. height:44px;
  35. width:1024px
  36. }
  37.  
  38. .mila {color:#03C;
  39. font-family:Times New Roman,Arial,Verdana,Georgia;
  40. }
  41.  
  42. .podpis {color:#FF0;
  43. text-align:right
  44. }
  45.  
  46. #left {
  47. background:#0C0;
  48. width:200px;
  49. height:544px;
  50. position:absolute;
  51. top:160px;
  52. float:left;
  53.  
  54. }
  55.  
  56.  
  57. .menu {color:#FC0;
  58. font-family:Verdana,Times New Roman;
  59. }
  60.  
  61.  
  62. ul, ul li {
  63. display: block;
  64. list-style: none;
  65. margin: 0;
  66. padding: 0;
  67.  
  68. }
  69.  
  70. ul {
  71. position: absolute;
  72. }
  73.  
  74. ul li {
  75. float: left;
  76. border-width: 0 1px 1px 1px;
  77. border-style: solid;
  78. border-color: transparent #25b #25b #9ce;
  79. }
  80.  
  81. ul a:link, ul a:visited {
  82. text-decoration: none;
  83. display: block;
  84. width: 203px;
  85. text-align: center;
  86. padding: 5px 0;
  87. font-weight: bold;
  88. background-color: #27c;
  89. color: #def;
  90. border-top: 10px solid #25b;
  91. }
  92.  
  93. ul a:hover {
  94. background-color: #28e;
  95. color: #fff;
  96. border-top: 20px solid #26d;
  97. }


  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Moja strona portfolio</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8.  
  9. <div id="top"></div>
  10.  
  11. <ul>
  12. <li><a href="czcionki.html">Czcionki</a></li>
  13. <li><a href="tekst.html">Tekst</a></li>
  14. <li><a href="tlo.html">Tło</a></li>
  15. <li><a href="marginesy.html">Marginesy</a></li>
  16. <li><a href="obramowanie.html">Obramowanie</a></li>
  17. </ul>
  18. <div id="left">
  19. <h3 class="menu">Menu:</h3>
  20. <br />
  21. <a href="index.htm">Strona głowna</a><br /><br />
  22. <a href="index.html">Html</a><br /><br />
  23. <a href="index.html">Css</a><bR /><br />
  24. <a href="idnex.html">Kontakt</a>
  25. </div>
  26.  
  27. <div id="center">
  28. <h1 align="center" class="mila">tytul</h1>
  29. test newsa...
  30. Naturalnie po japońskim ataku na Pearl Harbor organizacja się rozwiązała i prawie wszyscy przystąpili do walki, jak przystało na patriotów.
  31.  
  32. Obecnie głosy izolacjonistów różnego odcienia nasilają się. Najgłośniejszy z nich to Pat Buchanan, który odwołuje się do tradycyjnych argumentów. Ameryka jest republiką, a nie imperium. Dlaczego więc prowadzi imperialną politykę zagraniczną?
  33.  
  34. Dlaczego amerykańscy żołnierze giną w konfliktach na obcej ziemi, choćby w Iraku i Afganistanie? To nie ma nic wspólnego z obroną USA. Zamknijmy się u siebie, uszczelnijmy granice i będzie cicho, dobrze i bezpiecznie. Może powinniśmy rozwiązać NATO?
  35.  
  36. Jest to tendencja do pewnego stopnia popularna, jak ostrzegają neokonserwatyści Robert Kagan i William Kristol. Siły izolacjonizmowi dodaje brak klarownej wizji w amerykańskiej polityce zagranicznej.
  37.  
  38. Naturalnie wycofanie się Ameryki ze spraw światowych oznaczałoby zamianę układu jednobiegunowego na wielobiegunowy. Cyniczny makiawelista Henry Kissinger uważa, że wyłoniłby się układ oparty na regionalnych hegemonach (Chiny, Rosja, Indie, Unia Europejska i USA). Ale nawet Kissinger przyznaje, że harmonijna współpraca w takim układzie byłaby trudna, bowiem najsilniejsi gracze nie są kompatybilni cywilizacyjnie. Co będzie, gdy Pax Americana się rozsypie? Albo gdy Amerykanie zrezygnują z palmy pierwszeństwa?
  39. <h4 class="podpis">podpis</h4>
  40. </div>
  41. <div id="stopka"></div>
  42. </body>
  43. </html>

Wszelakie treści są przykładowe tylko.
krzysztof_kf
moment

Kod
<h3 class="menu">Menu:</h3>


nie ma czegoś takiego ? nie masz zawartości dla tego

spróbuję ci tu zrobić porządek
gigzorr
Cytat(krzysztof_kf @ 21.02.2010, 21:37:11 ) *
moment

Kod
<h3 class="menu">Menu:</h3>


nie ma czegoś takiego ? nie masz zawartości dla tego

spróbuję ci tu zrobić porządek


to było od pierwszego menu ,ale zapomniałem usunać smile.gif a jednak nie , to jest od menu z lewej , a w cssie jest przypisany kolor i czcionka do tego
krzysztof_kf
zaraz ci to zrobię trochę bajzer ;/ dalej chyba dasz radę ?

plik css

Kod
body {background:#999;}

#top {
        width: 1024px;
        margin: 0 auto 0 auto;
        }
        
#header {
         width: 1024px;
         height: 122px;
         background-image:url(images/logo.jpg);

}

#column {
         width: 1024px;
         height: 100%;
         }
        
#column-left {
         width: 250px;
         float: left;
         background: #00ff00;
        
}

#column-right {
         width: 774px;
         float: left;
         background: #ffffff;
}

#footer {
         width: 1024px;
         height: 30px;
         background: #3399ff;
         }
        
#footer p {
         text-align: right;
         font-size: 0.8em;
         font-family: verdana;
}

.menu {
         width: 1024px;
         }


        ul, ul li {
     display: block;
     list-style: none;
     margin: 0;
     padding: 0;

}

ul {
     position: absolute;
}

ul li {
     float: left;
     border-width: 0 1px 1px 1px;
     border-style: solid;
     border-color: transparent #25b #25b #9ce;
}

ul a:link, ul a:visited {
     text-decoration: none;
     display: block;
     width: 203px;
     text-align: center;
     padding: 5px 0;
     font-weight: bold;
     background-color: #27c;
     color: #def;
     border-top: 10px solid #25b;
}

ul a:hover {
     background-color: #28e;
     color: #fff;
     border-top: 20px solid #26d;
}
</style>


Kod
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moja strona portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="top">
<div id="header">
</div>


<div class="menu">
<ul>
<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>
</ul>
         </div>


<div id="column">
<div id="column-left">
<br />
<a href="index.htm">Strona głowna</a><br /><br />
<a href="index.html">Html</a><br /><br />
<a href="index.html">Css</a><bR /><br />
<a href="idnex.html">Kontakt</a>
</div>

<div id="column-right">
test newsa...
Naturalnie po japońskim ataku na Pearl Harbor organizacja się rozwiązała i prawie wszyscy przystąpili do walki, jak przystało na patriotów.

Obecnie głosy izolacjonistów różnego odcienia nasilają się. Najgłośniejszy z nich to Pat Buchanan, który odwołuje się do tradycyjnych argumentów. Ameryka jest republiką, a nie imperium. Dlaczego więc prowadzi imperialną politykę zagraniczną?

Dlaczego amerykańscy żołnierze giną w konfliktach na obcej ziemi, choćby w Iraku i Afganistanie? To nie ma nic wspólnego z obroną USA. Zamknijmy się u siebie, uszczelnijmy granice i będzie cicho, dobrze i bezpiecznie. Może powinniśmy rozwiązać NATO?

Jest to tendencja do pewnego stopnia popularna, jak ostrzegają neokonserwatyści Robert Kagan i William Kristol. Siły izolacjonizmowi dodaje brak klarownej wizji w amerykańskiej polityce zagranicznej.

Naturalnie wycofanie się Ameryki ze spraw światowych oznaczałoby zamianę układu jednobiegunowego na wielobiegunowy. Cyniczny makiawelista Henry Kissinger uważa, że wyłoniłby się układ oparty na regionalnych hegemonach (Chiny, Rosja, Indie, Unia Europejska i USA). Ale nawet Kissinger przyznaje, że harmonijna współpraca w takim układzie byłaby trudna, bowiem najsilniejsi gracze nie są kompatybilni cywilizacyjnie. Co będzie, gdy Pax Americana się rozsypie? Albo gdy Amerykanie zrezygnują z palmy pierwszeństwa?
</div>
<div id="footer">
<p>Podpis</p>
</div>
</body>
</html>


pytaj się jak by co
gigzorr
Cytat(krzysztof_kf @ 21.02.2010, 21:54:17 ) *
zaraz ci to zrobię trochę bajzer ;/ dalej chyba dasz radę ?

plik css

Kod
body {background:#999;}

#top {
        width: 1024px;
        margin: 0 auto 0 auto;
        }
        
#header {
         width: 1024px;
         height: 122px;
         background-image:url(images/logo.jpg);

}

#column {
         width: 1024px;
         height: 100%;
         }
        
#column-left {
         width: 250px;
         float: left;
         background: #00ff00;
        
}

#column-right {
         width: 774px;
         float: left;
         background: #ffffff;
}

#footer {
         width: 1024px;
         height: 30px;
         background: #3399ff;
         }
        
#footer p {
         text-align: right;
         font-size: 0.8em;
         font-family: verdana;
}

.menu {
         width: 1024px;
         }


        ul, ul li {
     display: block;
     list-style: none;
     margin: 0;
     padding: 0;

}

ul {
     position: absolute;
}

ul li {
     float: left;
     border-width: 0 1px 1px 1px;
     border-style: solid;
     border-color: transparent #25b #25b #9ce;
}

ul a:link, ul a:visited {
     text-decoration: none;
     display: block;
     width: 203px;
     text-align: center;
     padding: 5px 0;
     font-weight: bold;
     background-color: #27c;
     color: #def;
     border-top: 10px solid #25b;
}

ul a:hover {
     background-color: #28e;
     color: #fff;
     border-top: 20px solid #26d;
}
</style>


Kod
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moja strona portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="top">
<div id="header">
</div>


<div class="menu">
<ul>
<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>
</ul>
         </div>


<div id="column">
<div id="column-left">
<br />
<a href="index.htm">Strona głowna</a><br /><br />
<a href="index.html">Html</a><br /><br />
<a href="index.html">Css</a><bR /><br />
<a href="idnex.html">Kontakt</a>
</div>

<div id="column-right">
test newsa...
Naturalnie po japońskim ataku na Pearl Harbor organizacja się rozwiązała i prawie wszyscy przystąpili do walki, jak przystało na patriotów.

Obecnie głosy izolacjonistów różnego odcienia nasilają się. Najgłośniejszy z nich to Pat Buchanan, który odwołuje się do tradycyjnych argumentów. Ameryka jest republiką, a nie imperium. Dlaczego więc prowadzi imperialną politykę zagraniczną?

Dlaczego amerykańscy żołnierze giną w konfliktach na obcej ziemi, choćby w Iraku i Afganistanie? To nie ma nic wspólnego z obroną USA. Zamknijmy się u siebie, uszczelnijmy granice i będzie cicho, dobrze i bezpiecznie. Może powinniśmy rozwiązać NATO?

Jest to tendencja do pewnego stopnia popularna, jak ostrzegają neokonserwatyści Robert Kagan i William Kristol. Siły izolacjonizmowi dodaje brak klarownej wizji w amerykańskiej polityce zagranicznej.

Naturalnie wycofanie się Ameryki ze spraw światowych oznaczałoby zamianę układu jednobiegunowego na wielobiegunowy. Cyniczny makiawelista Henry Kissinger uważa, że wyłoniłby się układ oparty na regionalnych hegemonach (Chiny, Rosja, Indie, Unia Europejska i USA). Ale nawet Kissinger przyznaje, że harmonijna współpraca w takim układzie byłaby trudna, bowiem najsilniejsi gracze nie są kompatybilni cywilizacyjnie. Co będzie, gdy Pax Americana się rozsypie? Albo gdy Amerykanie zrezygnują z palmy pierwszeństwa?
</div>
<div id="footer">
<p>Podpis</p>
</div>
</body>
</html>


pytaj się jak by co


no dzięki , ide przestudiować teraz ten kod czym sie różni a różni się nieźle ^^
krzysztof_kf
kolego byś kliknoł pomógł smile.gif
gigzorr
Cytat(krzysztof_kf @ 21.02.2010, 22:01:50 ) *
kolego byś kliknoł pomógł smile.gif



poszło smile.gif , a co to są te em , ? bo jak np chciałem powiekszyć , że tak powiem lewe menu to px, % nie działa a emy dzialająhm??^^

i poco jest
  1. <div id="top">
  2. <div id="header">
  3. </div>

a później w cssie trzeba robić dwa , nie lepiej to połączyć w jedno top ? niż robić header?sam sie już pogubiłem w tym
  1. #top {
  2. width: 1024px;
  3. margin: 0 auto 0 auto;
  4. }
  5.  
  6. #header {
  7. width: 1024px;
  8. height: 122px;
  9. background-image:url(images/logo.jpg);
  10.  
  11. }
krzysztof_kf
jak wycentrujesz za pomocą header np

Kod
#header {

margin: 0 auto;


to tylko to wycentrujesz a reszta pójdzie w bok przetestuj i zobaczysz

jak pisesz

Kod
<h3 class="menu">Menu</h3>


to staraj sie temu selektorowi dawać jakąś wartość w postaci

Kod
h3.menu {

twoja wartość


bo w innym wypadku będzie niezbędny kod


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.