Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1]
DrukujPobierz PDF
Autor Wątek: Obwódki oraz rozmieszczanie (HTML i CSS)  (Przeczytany 6311 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« : 02.07.2009, 11:32:36 »

Witam, narodził się pewien problem przy tworzeniu stronki... Otóż, przy załadowaniu obrazków do menu wraz z odsyłaczami do poszczególnych podstron(wszystko znajduje się w jednym folderze) odsyłacze działają! Problem jest z obwódkami przy owych odsyłaczach....

Zamieszczam kody (HTML i CSS) i jednoczenie prośba o pomoc w wyeliminowaniu tego "buga" Język

Cytuj
<!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">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="copyright" content ="Bartłomiej Dobrowolski"/>
<meta name="author" content="Bartłomiej Dobrowolski"/>


<head>

<title>Bartłomiej Dobrowolski vel Dobrotek - portfolio</title>

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

</head>

<body>
<a href="strona.html"><div id="menu"><img src="obrazki/Menu/menu.png" alt="strona glowna"></div></a>
<a href="art.html"><div id="menu1"><img src="obrazki/Menu/menu1.png" alt="Art"></div></a>
<a href="zdjecia.html"><div id="menu2"><img src="obrazki/Menu/menu2.png" alt="zdjecia"></div></a>

<div id="newart"><img src="obrazki/newarts.png" alt="najnowsza praca"></div>

<div="naglowek"><font size="6" color="white">
Witam w moim portfolio.
</font>
</div>

<div id="informations">
<font size="4">
Nazywam się Bartłomiej Dobrowolski.<br />
Występuję również pod nickiem Dobrotek. Obecnie mieszkam w Łodzi i <br />
uczęszczam do 1 klasy Liceum Ogólnokształcącego. <br />
Wszystkie prace tworzę w GIMPie.<br />
</font>
</div>


</body>

</html>

zaś CSS wygląda tak:

Cytuj

body {
   background-color: #000000;
   margin-left: 200px;
   margin-right: 150px;
   margin-top: 30px;
   background-image:url(obrazki/tlo.png);
   background-repeat:no-repeat;
   background-attachment: scroll

   
}


#menu

{
   position:absolute;
   top: 100px;
   left: 200px;

}


#menu1


{
   position:absolute;
   top: 100px;
   left: 326px;

}


#menu2


{
   position:absolute;
   top: 100px;
   left: 438px;

}


#informations

{
   position:absolute;
   color: #E6E6FA;
   top: 300px;
   left: 190px;
   
}


#newart

{
   position:absolute;
   top: 20px;
   right: 20px;

}


#naglowek

{

   position:absolute;
   color:#E6E6FA;
   top: 100px;
   left: 190px;


dołączam jeszcze wygląd (w FF)

Co ciekawsze, w Google Chrome takiego problemu nie ma.

Kombinowałem jeszcze z metodą filtra Image Map, lecz tutaj już żadnego obrazka nie ma Język

Cytuj
<!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">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="copyright" content ="Bartłomiej Dobrowolski"/>
<meta name="author" content="Bartłomiej Dobrowolski"/>

   <head>

   <title>Bartłomiej Dobrowolski vel Dobrotek - portfolio</title>

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

   </head>

      <body>

<img src="tlo.jpg" width="1024" height="255" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Dobrowolska -->
<area shape="rect" coords="367,92,479,160" alt="Prace" href="art.html" />
<area shape="poly" coords="241,92,276,161,368,161,367,91,366,92" alt="Strona Główna" href="strona.html" />
<area shape="poly" coords="481,91,481,162,591,161,624,92" alt="Zdjęcia" href="zdjecia.html" />
</map>

      </body>


</html>

Myślałem, że ten filtr problem rozwiąże jeśli chodzi o menu, ale stało się inaczej...

Pozdrawiam,
Dobrotek
« Ostatnia zmiana: 02.07.2009, 14:00:15 wysłane przez Dobrotek » Zapisane
Kutsu
Użytkownik

Reputacja: 12 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: CC-NC-BY-SA
Wiadomości: 232
Galeria Użytkownika


907610717098


Zobacz profil
« Odpowiedz #1 : 02.07.2009, 11:47:39 »

A może by dać w CSS coś w stylu:

Kod:
a:link {
text-decoration: none;
border: none;
}

a:hover {
text-decoration: none;
border: none;
}

a:visited {
text-decoration: none;
border: none;
}

U mnie działało. Tzn głównie chodzi o border Uśmiech
Zapisane




Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« Odpowiedz #2 : 02.07.2009, 13:59:08 »

Przepraszam za double post'a, ale nasunęło mi się jeszcze kilka pytań...  Zawstydzony

Mam dane odnośnie obrazków:

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">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="copyright" content ="Bartłomiej Dobrowolski"/>
<meta name="author" content="Bartłomiej Dobrowolski"/>


<head>

<title>Bartłomiej Dobrowolski vel Dobrotek - portfolio</title>

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

</head>

<body>


<div id="decoration"><img src="obrazki/decoration.png"></div>
<a href="strona.html"><div id="menu"><img src="obrazki/Menu/menu.png" alt="Strona Glowna"></div></a>
<a href="art.html"><div id="menu1"><img src="obrazki/Menu/menu1.png" alt="Art"></div></a>
<a href="zdjecia.html"><div id="menu2"><img src="obrazki/Menu/menu2.png" alt="Zdjecia"></div></a>

<div id="newart"><img src="obrazki/newarts.png" alt="najnowsza praca"></div>

1.I bez ciągłego "kopiuj wklej", można to zrobić by był jako uniwersalny we wszystkich podstronach?
2. W arkuszu CSS

Kod:
body 

{
background-color: #000000;
margin-left: 200px;
margin-right: 150px;
margin-top: 30px;
background-image:url(obrazki/tlo.png);
background-repeat:no-repeat;
background-attachment: scroll

}

#menu

{
position:absolute;
top: 100px;
left: 200px;

}


#menu1


{
position:absolute;
top: 100px;
left: 326px;

}


#menu2


{
position:absolute;
top: 100px;
left: 438px;

}


#informations

{
position:absolute;
color: #E6E6FA;
top: 300px;
left: 190px;

}


#newart

{
position:absolute;
top: 20px;
right: 20px;

}


#naglowek

{

position:absolute;
color:#E6E6FA;
top: 100px;
left: 190px;




#decoration

{
position:absolute;
top: 10px;
left: 10px;
}

a:link

{
text-decoration: none;
border: none;
}

a:hover

{
text-decoration: none;
border: none;
}

a:visited

{
text-decoration: none;
border: none;
}

problem polega na tym, że #decoration w ogólnie nie reaguje na zmiany położenia. Wpiszę top: 300 - nie zmienia położenia. Jak kombinowałem z #newart to wszystko szło bez problemu, mogłem obrazek rozmieścić, gdzie się żywnie podobało, ale z decoration już są problemy...

Mam nadzieję, że w miarę zrozumiale przedstawiłem problem, a zakładać kolejne wątki raz po raz głupio by było... zaraz topic zmienię na bardziej przejrzysty
Zapisane
Luczi
Użytkownik

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 81
Galeria Użytkownika



Zobacz profil
« Odpowiedz #3 : 02.07.2009, 21:56:21 »

Dokładnie nie analizowałem kodu, ale czy wrzuciłeś go do Validatora ?

A może by dać w CSS coś w stylu:

Kod:
a:link {
text-decoration: none;
border: none;
}

a:hover {
text-decoration: none;
border: none;
}

a:visited {
text-decoration: none;
border: none;
}

U mnie działało. Tzn głównie chodzi o border Uśmiech

Nie lepiej:
Kod:
a#div :link
a#div :hover
itp.
wtedy tylko w tych divach będzie to zdefiniowane.

Moim zdaniem najlepiej będzie zrobić:
Kod:
img
{
border: 0;
}

Ja "miszcz" nie jestem ale tak mi sie wydaje.
Zapisane
Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« Odpowiedz #4 : 03.07.2009, 09:43:59 »

Hmmm. Jak już dalej jesteśmy przy tych obwódkach to zastosowałem metodę border'a bezpośrednio na obrazku Język

border;0px; i hula Chichot

Kod:
<a href="strona.html"><div id="menu"><img src="obrazki/Menu/menu.png" style="border:0px; alt="Strona Glowna"></div></a>


    <a href="art.html"><div id="menu1"><img src="obrazki/Menu/menu1.png" style="border:0px; alt="Art"></div></a>


    <a href="zdjecia.html"><div id="menu2"><img src="obrazki/Menu/menu2.png" style="border:0px; alt="Zdjecia"></div></a>

Problem drugi w moim double post'cie został rozwiązany  Cool
Cytuj
problem polega na tym, że #decoration w ogólnie nie reaguje na zmiany położenia. Wpiszę top: 300 - nie zmienia położenia. Jak kombinowałem z #newart to wszystko szło bez problemu, mogłem obrazek rozmieścić, gdzie się żywnie podobało, ale z decoration już są problemy...

teraz nadzieja na to, że będzie osoba która pomoże z pkt. 1 Uśmiech
Cytuj
1.I bez ciągłego "kopiuj wklej", można to zrobić by był jako uniwersalny we wszystkich podstronach?

Pozdrawiam,
Dobrotek
Zapisane
wywrot4
Użytkownik

Reputacja: 1 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 46
Galeria Użytkownika

wywrot4

no i co że nie mam avka?


Zobacz profil
« Odpowiedz #5 : 05.07.2009, 20:07:59 »

możesz zrobić tak
Kod:
 ../../obrazki/Menu/menu2.png
Zapisane

Komputer pomaga ci w pracy której bez niego by nie było...

"Uwaga! Komunikat z Komendy Głównej Policji: Miszcz sygniatur aka. K-ja powrócił jako *wywrota* tudzież *wywrot4*. Prosimy o zachowanie ostrożności." Danyeru
Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« Odpowiedz #6 : 06.07.2009, 00:01:38 »

To będzie sam obrazek. A mi chodziło o to by we wszystkich podstronach był ten sam kod:

Kod:
	<a href="strona.html"><div id="menu"><img src="obrazki/Menu/menu.png" alt="Strona Glowna"></div></a>
<a href="art.html"><div id="menu1"><img src="obrazki/Menu/menu1.png" alt="Art"></div></a>
<a href="zdjecia.html"><div id="menu2"><img src="obrazki/Menu/menu2.png" alt="Zdjecia"></div></a>

<div id="newart"><img src="obrazki/newarts.png" alt="najnowsza praca"></div>

bez osobnego włażenia na stworzone przez siebie podstrony, tylko zrobić taki jeden uniwersalny. Próbowałem tak jak jest z CSS'em czyli wsadziłem:

Kod:
	<link rel="stylesheet" type="text/html" href="glowne.html" />

I jakoś nie podziałało, a w necie skąpo o tym jest Niezdecydowany Przynajmniej to co potrzebuje... Tylko ten jeden problem i więcej głowy nie zawracam Język


Pozdrawiam,
Dobrotek

Zapisane
wywrot4
Użytkownik

Reputacja: 1 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 46
Galeria Użytkownika

wywrot4

no i co że nie mam avka?


Zobacz profil
« Odpowiedz #7 : 06.07.2009, 10:27:32 »

To podaj pełny adres do podstron i obrazków np.:
Kod:
<a href="http://dobrotek.pl/strona.html"><div id="menu"><img src="http://dobrotek.pl/obrazki/Menu/menu.png" alt="Strona Glowna"></div></a>

i wtedy możesz spokojnie wstawiać menu w każdej podstronie bez obaw że coś nie będzie działać
Zapisane

Komputer pomaga ci w pracy której bez niego by nie było...

"Uwaga! Komunikat z Komendy Głównej Policji: Miszcz sygniatur aka. K-ja powrócił jako *wywrota* tudzież *wywrot4*. Prosimy o zachowanie ostrożności." Danyeru
Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aOgólne dyskusjeDyskusjeWebmastering & WebdesignJęzyki InternetuWątek: Obwódki oraz rozmieszczanie (HTML i CSS)
Skocz do: