Napis na przycisku

[9Jarek9]

Ostatnio zacząłem się bawić w tworzenie stron.

Zrobiłem jakiś prosty szablon w photoshopie, zamieniłem go w kod html/css i wygląda to mniej więcej tak:

 

Chce jednak dodać w miejscach zaznaczonych czerwonym kółkiem tekst (na przyciskach). Jak to zrobić? Nie znam się za bardzo na tym więc proszę o pomoc.

 

Tutaj mam kod jednego z przycisków:

HTML:

</div><a href="przycisk1.html" alt="Przycisk1"<div id="Przycisk1"><img src="images/Przycisk1.png"></div></a>

CSS:

#Przycisk1 
{ 
     left: 410px; 
     top: 252px; 
     position: absolute; 
     width: 140px;
     height: 76px;
     z-index:6;
} 

[MattRep.]

Nie za bardzo wiem co chcesz zrobić, przyciski można tworzyć za pomocą <Button>tekst</button>, szablonów w photoshopie "do pocięcia" raczej już się nie wykorzystuje... A! No i bym zapomniał... Masz tu błąd

</div><a href="przycisk1.html" alt="Przycisk1"<div id="Przycisk1"><img src="images/Przycisk1.png"></div></a>
Powinno być
</div><a href="przycisk1.html" alt="Przycisk1"><div id="Przycisk1"><img src="images/Przycisk1.png"></div></a>

[9Jarek9]

Nie za bardzo wiem co chcesz zrobić, przyciski można tworzyć za pomocą <Button>tekst</button>, szablonów w photoshopie "do pocięcia" raczej już się nie wykorzystuje... A! No i bym zapomniał... Masz tu błąd

</div><a href="przycisk1.html" alt="Przycisk1"<div id="Przycisk1"><img src="images/Przycisk1.png"></div></a>
Powinno być
</div><a href="przycisk1.html" alt="Przycisk1"><div id="Przycisk1"><img src="images/Przycisk1.png"></div></a>

A jak ustawić żeby przycisk miał taki wygląd jaki ja chce?

I jakim innym sposobem mogę zrobić następnym razem szablon?

[MattRep.]

Przygotuj sobie na każdy przycisk grafikę / jedną na wszystkie - to zależy i zrób tak

<A href="#link" id="przycisk">BlaBlaBlaLubieplacki</a>

A wygląd:

#przycisk{
	background-image: url("przycisk.jpg");
	width: szerokosc;
	height: wysokosc;
	etc....
}

I tyle! Po prostu zamiast robić szablon i go ciąć robisz oddzielne elementy

[9Jarek9]

Przygotuj sobie na każdy przycisk grafikę / jedną na wszystkie - to zależy i zrób tak

<A href="#link" id="przycisk">BlaBlaBlaLubieplacki</a>

A wygląd:

#przycisk{
	background-image: url("przycisk.jpg");
	width: szerokosc;
	height: wysokosc;
	etc....
}

I tyle! Po prostu zamiast robić szablon i go ciąć robisz oddzielne elementy

Wyszło coś takiego:

Tylko w tych dwóch zaznaczonych miejscach pojawiły mi się dodatkowe przyciski i nie wiem gdzie jest błąd w kodzie:

 <div id="background"><img src="images/Warstwa1.png" /></div>
            <a  href="index.html"<div id="logo"><img src="images/logo.png"></div></a>
            <div id="ss"><img src="images/ss.png"></div>
            <div id="p"><img src="images/p.png"></div>
            <div id="l"><img src="images/l.png"></div>
            <a  href="przycisk1.htm" alt="Przycisk1" id="przycisk">Przycisk1<div id="przycisk"><img src="images/przycisk.png"></div></a>
            <a href="przycisk2.htm" alt="Przycisk2" id="przycisk2">Przycisk2<div id="przycisk2"><img src="images/przycisk2.png"></div></a>
            <a href="przycisk3.htm" alt="Przycisk3" id="przycisk3">Przycisk3<div id="przycisk3"><img src="images/przycisk3.png"></div></a>                                 
            <div id="stopka"><img src="images/stopka.png"></div>
        </div>

body {
    margin: 0;
    padding: 0;
 }
 
 #background 
{ 
     background-image: url("images/warstwa1.png");
     left: 0px; 
     top: 0px; 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
     width: 1280px;
     height: 2000px; 
     overflow: hidden;
     z-index:0;
    } 



 #logo 
{ 
     left: 169px; 
     top: 52px; 
     position: absolute; 
     width: 462px;
     height: 157px;
     z-index:2;
} 

 #ss
{ 
     left: 410px; 
     top: 356px; 
     position: absolute; 
     width: 460px;
     height: 1302px;
     z-index:3;
} 

 #p
{ 
     left: 880px; 
     top: 252px; 
     position: absolute; 
     width: 240px;
     height: 1434px;
     z-index:4;
} 

 #l 
{ 
     left: 160px; 
     top: 252px; 
     position: absolute; 
     width: 240px;
     height: 1434px;
     z-index:5;
} 


 #przycisk2
{ 
     background-image: url("images/przycisk2.png");
     left: 570px; 
     top: 252px; 
     position: absolute; 
     width: 140px;
     height: 76px;
     z-index:7;
} 

 #przycisk3
{ 
     background-image: url("images/przycisk3.png");
     left: 730px; 
     top: 252px; 
     position: absolute; 
     width: 140px;
     height: 78px;
     z-index:8;
} 

 #stopka
{ 
     left: 25px; 
     top: 1686px; 
     position: absolute; 
     width: 1292px;
     height: 318px;
     z-index:9;
} 

#przycisk
{ 
     background-image: url("images/przycisk.png");
     left: 410px; 
     top: 252px; 
     position: absolute; 
     width: 140px;
     height: 76px;
     z-index:6;
} 

[BlackPanda]

1)

<a  href="index.html"<div id="logo"

2) Nie dajemy znaczników blokowych w liniowe!