[css]pytanie przy robieniu menu(grafika obok grafiki)jak? Opcje

[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?

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

Ten post edytował gigzorr 21.02.2010, 20:19:58

[Armstrong]

http://www.kurshtml.boo.pl/css/poziome_menu,menu.html Odwiedzałeś?

[HTML] pobierz, plaintext 
<a href="####" title="###"><img src="####" alt="##" /></a>
[HTML] pobierz, plaintext 

[gigzorr]

właśnie to odwiedziłem
:

[HTML] pobierz, plaintext 
	   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: 95px;
	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;
}
[HTML] pobierz, plaintext 

html:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

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 :



Ten post edytował gigzorr 21.02.2010, 20:52:31

[krzysztof_kf]

eee ja mam dobrze może jakiś selektro masz dopisany ?

Ten post edytował krzysztof_kf 21.02.2010, 20:54:20

[gigzorr]

tutaj cały kod css

[HTML] pobierz, plaintext 
* {margin:0;
  padding:0;
  margin-left:60px
  }
 
 
body {background:#999;}
 
#top {background-image:url(images/logo.jpg);
      height:122px;
	  width:1024px
 
}
 
 
#center {
	     background-image:url(images/center.jpg);
		 height:540px;
		 font-family:Verdana,Times New Roman;
		 font-size:20px;
		 width:830px;
		 margin-top:40px;
		 text-align:center;
		 margin-left:255px
 
 
 
}
 
#stopka {
	background-image:url(images/stopka.jpg);
	height:44px;
	width:1024px
}
 
.mila {color:#03C;
       font-family:Times New Roman,Arial,Verdana,Georgia;
}
 
.podpis {color:#FF0;
         text-align:right
}
 
#left {
	background:#0C0;
	width:200px;
	height:544px;
	position:absolute;
	top:160px;
	float:left;
 
}
 
 
.menu {color:#FC0;
       font-family:Verdana,Times New Roman;
}
 
 
	   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: 95px;
	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;
}
[HTML] pobierz, plaintext 

[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
    }

Ten post edytował krzysztof_kf 21.02.2010, 21:02:03

[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




Ten post edytował gigzorr 21.02.2010, 21:04:04

[krzysztof_kf]

za pomocą

Kod

margin: 0 auto;

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

[gigzorr]

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

[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

Ten post edytował krzysztof_kf 21.02.2010, 21:09:44

[gigzorr]

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

[HTML] pobierz, plaintext 
* {
  padding:0;
  margin: 0 auto;
 
  }
 
 
body {background:#999;}
 
#top {background-image:url(images/logo.jpg);
      height:122px;
	  width:1024px;
 
 
}
 
 
#center {
	     background-image:url(images/center.jpg);
		 height:540px;
		 font-family:Verdana,Times New Roman;
		 font-size:20px;
		 width:825px;
		 margin-top:40px;
		 text-align:center;
		 margin-left:200px
 
 
 
}
 
#stopka {
	background-image:url(images/stopka.jpg);
	height:44px;
	width:1024px
}
 
.mila {color:#03C;
       font-family:Times New Roman,Arial,Verdana,Georgia;
}
 
.podpis {color:#FF0;
         text-align:right
}
 
#left {
	background:#0C0;
	width:200px;
	height:544px;
	position:absolute;
	top:160px;
	float:left;
 
}
 
 
.menu {color:#FC0;
       font-family:Verdana,Times New Roman;
}
 
 
	   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;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
<!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>
 
<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 id="left">
<h3 class="menu">Menu:</h3>
<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="center">
<h1 align="center" class="mila">tytul</h1>
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? 
<h4 class="podpis">podpis</h4>
</div>
<div id="stopka"></div>
</body>
</html>
[HTML] pobierz, plaintext 

Wszelakie treści są przykładowe tylko.

Ten post edytował gigzorr 21.02.2010, 21:16:46

[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]

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ć a jednak nie , to jest od menu z lewej , a w cssie jest przypisany kolor i czcionka do tego

Ten post edytował gigzorr 21.02.2010, 21:44:09

[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

Ten post edytował krzysztof_kf 21.02.2010, 21:51:49

[gigzorr]

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ł

[gigzorr]

kolego byś kliknoł pomógł

poszło , 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

[HTML] pobierz, plaintext 
<div id="top">
<div id="header">
</div>
[HTML] pobierz, plaintext 

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

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

Ten post edytował gigzorr 21.02.2010, 22:14:08

[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




Ten post edytował krzysztof_kf 21.02.2010, 22:42:22