Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP]Tworzenie strony www z laikiem - krok po kroku
Forum PHP.pl > Forum > Przedszkole
Kruk1
Witam,
Będę tworzył stronę pod Allegro i potrzebuje pomocy krok po kroku



Zadanie 1

Mam tło strony podzielone na 8 części i chodzi mi aby te tło tworzyło całość od samej góry okna wyświetlania strony do samego dołu (bez żadnych przerw pomiędzy nimi, ani marginesów góra/dół). Jedynie co mi się udało to część górna marginesu "orzel_grafika/orzel_szablon_1.png" która przylega do górnego marginesu strony tak też tu nie trzeba nic zmieniać, z kolei już między poszczególnymi częściami tła jak też na marginesie dolnym występują już niestety kilkupikselowe pionowe przerwy których chciałbym się pozbyć.


Oto kod strony. Przy okazji jeśli popełniłem jakieś błędy w zapisie, proszę o pomoc w poprawce.
Linijki w zapisie, jak też przerwy występują z doładną numeracją

Cytat
<!DOCTYPE html>
<html>
<head>
<title>Logo Orzeł</title>
<meta charset="utf-8">
<style>
#tlo {background; display:block; width:1200px; margin:0 auto 0 auto; margin-top:0px; padding:0px; border=0;}
</style>

</head>

<body>
<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_1.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_2.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_3.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_4.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_5.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_6.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_7.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_8.png"/>
</section>

</body background>
</body>

</html>
Johnas
do css dodaj
  1. body {margin-top:-10px;}
\
kod powinien zniwelować odstęp o 10 px

a jak nie pomoże to do img... Ciężko pomóc nie widząc w czym tkwi problem. Możesz to wrzucić na serwer?
MESSIAH :)
Czegoś tutaj nie rozumiem albo ktoś ma problemy z nauką. Jeśli chcesz mieć całe tło to po kiego kroisz tło na kawałki? Zrób całe tło i ustaw jako tło. Tylko musisz mieć każdą podstronę mieć ze stałą wysokością a to może być kłopotliwe.
Kruk1
Cytat(MESSIAH :) @ 4.09.2015, 09:28:45 ) *
Czegoś tutaj nie rozumiem albo ktoś ma problemy z nauką. Jeśli chcesz mieć całe tło to po kiego kroisz tło na kawałki? Zrób całe tło i ustaw jako tło. Tylko musisz mieć każdą podstronę mieć ze stałą wysokością a to może być kłopotliwe.


Eksport do PNG ma swoje ograniczenia 10 000 pikseli wysokości, a tło stanowi pewien wzór na którym zostanie zamieszczonych przeszło 70 mniejszych obrazków PNG



GodOfPeople
Udało mi się! Jednak miałeś rację, trzeba do IMG. Teraz po aktualizacji wygląda to tak:

Cytat
<!DOCTYPE html>
<html>
<head>
<title>Logo Orzeł</title>
<meta charset="utf-8">
<style>
#tlo {background; display:block; width:1200px; margin:0 auto 0 auto; margin-top:0px; padding:0px; border=0;}
</style>

</head>

<body>
<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_1.png"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_2.png" style="display:block; margin-top:-4px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_3.png" style="display:block; margin-top:0px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_4.png" style="display:block; margin-top:0px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_5.png" style="display:block; margin-top:0px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_6.png" style="display:block; margin-top:0px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_7.png" style="display:block; margin-top:0px;"/>
</section>

<body background id="tlo">
<section id="head">
<img src="orzel_grafika/orzel_szablon_8.png" style="display:block; margin-top:0px;"/>
</section>

</body background>
</body>

</html>



Za jakiś czas wróce z kolejnym zadaniem

Zadanie 2 - guziki menu




Poniższy rysunek przedstrawia ścieżki PNG (z małej litery) z obrazkami pod guziki menu + napisy, trzy podstawione są pod każdy kwadracik. Jak widać dokładnie na rogach kwadraciki stykają się ze sobą. Bardzo bym prosił o pomoc w napisaniu kodu pod takowe guziki, wszelkie wymiary względem osi pikseli mogą być przykładowe. Ważne też aby pozbyć się efektu przerywanej obwódki podczas naciśniętego guzika. Jeżeli to ma jakieś znaczenie, menu będzie się znajdowało w pierwszej cześci tła "orzel_szablon_1".

Guzik1 odwołuje się do podstrony (przykładowo)
Guzik6 - po jego naciśnięciu ma wyskoczyć okienko z e-mail
Guzik7 - ma być odnośnikiem do fanpage'a na facebooku (przykładowo)

Pozostałe guziki odwołują się do poszczególnych działów Allegro

Proszę się podpierać danymi poniższego kodu HTML.




Fred1485
Czekasz na gotowca?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.