lista odsyłaczy pod obrazkiem

[pudzianex88]

witam jestem nowy wiec proszę o wyrozumiałość

mam taki problem mam listę która będzie odsyłaczem do podstron i jest na obrazku co zrobić żeby znalazła się pod obrazkiem oto mój kod css

#navi ul {
margin: 0;
padding:15px;
background: url(../images/t%C5%82onavi_y-131_sz135_w1328.png) no-repeat;
height:132px;
z-index: 10 ;
}

#navi ul li {
float:left;

width:3px;
margin-top:35px;
margin-left:165px;

display:block;
font: bold 30px tahoma, verdana, arial, helvetica, sans-serif;
z-index: 101 ;

}

[Dhofca]

Ale obrazek masz jeden cały czy masz pocięte poszczególne przyciski?

[pudzianex88]

jeden cały i chce by pod tym obrazkiem znalazły się odsyłacze w ustalonych miejscach w postaci listy która ma być nie widoczna

[Pedro84]

Mapa odsyłaczy ew. pocięcie?

[pudzianex88]

[Kartofelek]

dla LI dajesz
width
height
display:left

dla A w LI dajesz
width:100%;
height takie jak dla li
display:block
overflow:hidden
text-indent:-999px
padding-top: -height (to dla IE6)

U ciebie li są chyba różnej szerokości, więc albo użyj klas albo dodatkowych id (li.uslugi itp)
Sprawdz to ze swoimi stylami i wprowadz poprawki.

[pudzianex88]

to jest cod odpowiedzialny za nawigacje gdzie co zmienić i w prowadzić twoje ustawienia bo mi się rozjeżdża wszystko ??


/* navi*/


#navi {




}
#navi ul {
margin: 0;
padding:15px;
background: url(../images/t%C5%82onavi_y-131_sz135_w1328.png) no-repeat;
height:130px;
}

#navi ul li {

float:left;

width:3px;
margin-top:35px;
margin-left:165px;

display:block;
font: bold 30px tahoma, verdana, arial, helvetica, sans-serif;

}
#navi ul li a {

}

[Sheken]

to jest cod odpowiedzialny za nawigacje gdzie co zmienić i w prowadzić twoje ustawienia bo mi się rozjeżdża wszystko ??


/* navi*/


#navi {




}
#navi ul {
margin: 0;
padding:15px;
background: url(../images/t%C5%82onavi_y-131_sz135_w1328.png) no-repeat;
height:130px;
}

#navi ul li {

float:left;

width:3px;
margin-top:35px;
margin-left:165px;

display:block;
font: bold 30px tahoma, verdana, arial, helvetica, sans-serif;

}
#navi ul li a {

}

---

Po pierwsze używaj zawsze reset.css najlepiej w osobnym pliku.

np:

html:

<link href="css/reset.css" media="all" rel="stylesheet" type="text/css" />

css

/*-------------------------------------------------*/
/*-------------------RESET CSS --------------------*/
/*-------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

fieldset{
border:none;
}

ol, ul {
list-style-position:inside;
}
blockquote, q {
quotes: none;
}


/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* additional options by Jaroslaw Krolewski */

*{
margin:0;
padding:0;
}

li {
list-style-type: none;
padding: 0px;
margin: 0px;
list-style-position: outside;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

.clr {
clear: both;
}

.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}

---

reset.css używasz w celu usunięcia domyślnych ustawień przeglądarek. (marginesów itp.).

Jeśli chcesz usunąć tekst z elementu a stosujesz:

#nav ul li a{
display:block;
text-indent:-9000px; /*usuwa tekst*/
cursor:pointer; /*nadaje łapkę w ie 6*/
outline:none; /*usuwa kropkowane obramowanie*/
}

Nie ma innego łatwiejszego sposobu na sporządzenie linka obrazkowego.

Pozdrawiam

---

Mała poprawka:

Tu masz poprawny (dałem #nav zamiast #navi - czasem ciężko wyłapać takie rzeczy).

#navi ul li a{
display:block;
text-indent:-9000px; /*usuwa tekst*/
cursor:pointer; /*nadaje łapkę w ie 6*/
outline:none; /*usuwa kropkowane obramowanie*/
}

[pudzianex88]

wiec tak zastosowałem reset i zniklo mi tło a co do nawigacji to owszem linki znikneły ale łapka nie pojawia się jak najeżdżam na obrazek jaki powód ???

[Sheken]

wiec tak zastosowałem reset i zniklo mi tło a co do nawigacji to owszem linki znikneły ale łapka nie pojawia się jak najeżdżam na obrazek jaki powód ???

Reset podpinasz na początku kodowania. Teraz jest troszkę za późno.
To tak na przyszłość było
Powód jest taki że musisz nadać im wysokość i szerokość.
Bo jeśli wyrzucasz tekst z odsyłacza to automatycznie padding jest pozbawiony punktu zaczepienia. Proponuje:

#navi ul li a{
display:block;
text-indent:-9000px;
float:left;
cursor:pointer;
outline:none;
width:100px;
height:50px;
}

wysokość i szerokość wedle uznania.

---

Moja dobra rada:

Nie stosuj lewych marginesów.
One są źle interpretowane w explorerze 6.
Na początek jednak nie zawracaj sobie tym głowy. Polecam ci książkę Charles'a Wyke-Smith'a "Witryny internetowe szyte na miarę". Jest to świetna lektura w tej dziedzinie. Nie znam lepszej. Po prostu krótko i na temat.