+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: lista odsyłaczy pod obrazkiem (/thread-lista-odsylaczy-pod-obrazkiem)
Strony:
1
2
lista odsyłaczy pod obrazkiem - pudzianex88 - 29-08-2010
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 ;
}
RE: lista odsyłaczy pod obrazkiem - Dhofca - 29-08-2010
Ale obrazek masz jeden cały czy masz pocięte poszczególne przyciski?
RE: lista odsyłaczy pod obrazkiem - pudzianex88 - 29-08-2010
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
RE: lista odsyłaczy pod obrazkiem - Pedro84 - 29-08-2010
Mapa odsyłaczy ew. pocięcie?
RE: lista odsyłaczy pod obrazkiem - pudzianex88 - 29-08-2010
RE: lista odsyłaczy pod obrazkiem - Kartofelek - 30-08-2010
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.
RE: lista odsyłaczy pod obrazkiem - pudzianex88 - 30-08-2010
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 {
}
RE: lista odsyłaczy pod obrazkiem - Sheken - 30-08-2010
(30-08-2010, 22:04)pudzianex88 napisał(a): 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*/
}
RE: lista odsyłaczy pod obrazkiem - pudzianex88 - 30-08-2010
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 ???
RE: lista odsyłaczy pod obrazkiem - Sheken - 30-08-2010
(30-08-2010, 23:17)pudzianex88 napisał(a): wiec tak zastosowałem reset i zniklo mi tłoReset 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.