Zaloguj się

ygt · (Ten post był ostatnio modyfikowany: 22-11-2009, 17:36 przez ygt.)

Witam !

Jestem newbie jeśli chodzi o składanie grafiki do html-a czy pisanie css,
mam zapytanie chciałem jako tło strony internetowej ustawić tapete .. owszem udało mi się ale jest ona dość ciężka tj: dużo zajmuje sama tapety , i chciałem pociąć ją na pasy żeby szybciej się ładowała no i pojawił się problem bo nie mam pojęcia jak to ugryźć , z tego co czytałem to wchodzi opcja tylko za pomocą CSS próbowałem zrobić jakiś arkusz styli ale za cholere nie wiem co dalej .. jeśli ktoś ma chwilkę wolnego i może to jakoś łopatologicznie zobrazować będe bardzo wdzięczny.

tapete pociołem na 10 pasków poziomych.

Podam kody do danych plików może ułatwi to komuś czytanie tego mojego bałaganu htmlowego

style.css
body {
background-color: #FFFFFF;
background-image: url("");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0cm 10cm;
}

#1 {
background-image: url("images/bg_02.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0cm 10cm;
height: 100%;
width: 100%;
}

#2 {
background-image: url("images/bg_02.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0cm 10cm;
height: 132px;
width: 1920px;
}

index.html
<html>
<head>
<title>Test na stylach</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head><br>
<body>
<div id="1">
<div id="2">
</div>
</body>
</html>

i teraz nie wiem jak zrobić aby dodać kolejne części jedna pod drugą...

razorskate · 22-11-2009, 17:40

Hmm...

A nie lepiej by było zmniejszyć rozmiar tej tapety? Np. w IrfanView . Jeśli koniecznie chcesz ciąć sądzę, że lepiej by było pociąć na pionowe pasy, i dodać 10 divów w html-u i w css podać deklaracje tła (Ale przy takim sposobie musiałbyś się trochę pomęczyć odpowiednio zagnieżdżając divy itp, umieszczając treść...):

Html:

Kod:
<div id="bg_1">

treść na bg_1

</div>

<div id="bg_2">

treść na bg_2

</div>

Analogicznie dodajesz resztę divów.

CSS:

Kod:
#bg_1 {

background-image: url("images/bg_01.jpg") no-repeat;

}

#bg_2 {

background-image: url("images/bg_02.jpg") no-repeat;

}

Analogicznie robisz dalej.

Według mnie, najlepiej bybyło jednak po prostu zmniejszyć rozmiar tepety, bo w tym rozwizaniu, niepotrzebnie zawalasz css i html, przez co kod staje się coraz mniej optymalny, a zaczyna się robić ociężały. . .

Mam nadzieję, że ruszy ;]
Pozdrawiam, Mikołaj.

ygt · (Ten post był ostatnio modyfikowany: 22-11-2009, 17:58 przez ygt.)

Jeśli chodzi o rozmiar tapety to mogę ją zmienić tyle że sama strona nie będzie posiadać wiele więcej treści , będzie to raczej strona wizytówka .. tyle że chciałem aby strona była wyświetlana poprawnie w najczęściej używanych rozdzielczościach.. stąd myślałem że skoro jako źródło umieszczę tapetę 1650x1080 to będzie też ona wyświetlana przy mniejszych rozdzielczościach.. chyba że to nie ma jedno z drugim nic wspólnego (znalałem program sizer który obrazuje dane okno np: przeglądarki w różnych rodz. i na jego podstawie widziałem jak wygląda strona w innych rozdziel.

razorskate

zrobiłem tak jak mi podałeś jednak strona jest pusta Sad

nie wiem z pewnością czegoś brakuje

HTML:
<html>
<head>
<title>Mój dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bg_1">
</div>
<div id="bg_2">
</div>
<div id="bg_3">
</div>
<div id="bg_4">
</div>
<div id="bg_5">
</div>
<div id="bg_6">
</div>
<div id="bg_7">
</div>
<div id="bg_8">
</div>
</body>
</html>

STYLE.CSS
body {

#bg_1 {
background-image: url("images/bg_01.jpg") no-repeat;
}

#bg_2 {
background-image: url("images/bg_02.jpg") no-repeat;
}

#bg_3 {
background-image: url("images/bg_03.jpg") no-repeat;
}

#bg_4 {
background-image: url("images/bg_04.jpg") no-repeat;
}

#bg_5 {
background-image: url("images/bg_05.jpg") no-repeat;
}

#bg_6 {
background-image: url("images/bg_06.jpg") no-repeat;
}

#bg_7 {
background-image: url("images/bg_07.jpg") no-repeat;
}

#bg_8 {
background-image: url("images/bg_08.jpg") no-repeat;
}

}

ygt · 22-11-2009, 22:40

ma ktoś może jakiś pomysł lub wizje co tu jest nie tak ?

pozdrawiam

razorskate · 22-11-2009, 23:14

Dlaczego w CSS body jest tak dziwnie zrobione?

Kod CSS:

Kod:
#bg_1 {

background-image: url("images/bg_01.jpg") no-repeat;

}

#bg_2 {

background-image: url("images/bg_02.jpg") no-repeat;

}

#bg_3 {

background-image: url("images/bg_03.jpg") no-repeat;

}

#bg_4 {

background-image: url("images/bg_04.jpg") no-repeat;

}

#bg_5 {

background-image: url("images/bg_05.jpg") no-repeat;

}

#bg_6 {

background-image: url("images/bg_06.jpg") no-repeat;

}

#bg_7 {

background-image: url("images/bg_07.jpg") no-repeat;

}

#bg_8 {

background-image: url("images/bg_08.jpg") no-repeat;

}

W css nie zagnieżdżasz tak w stylach, to nie html Wink

Co do zmiany rozmiaru nie chodziło mi o rozdzielczość, tylko o rozmiar fizyczny.
Ściągasz program Irfan View włączasz, i kolejno: (piszę z głowy, więc może się nieco róznić)

1.Klikasz plik --> Open --> Wybierasz plik tapety --> dajesz OK

2.Klikasz plik/obraz (nie wiem dokładnie, zobaczysz jak włączysz Smile

) --> Konwersja wsadowa

3. Jako format podajesz PNG, i po wybraniu formatu dajesz w tym samym oknie konwersja/stropień konwersji i dajesz na 9 (na maxa).

4. Zapisujesz plik, tapeta jest już zmniejszona Smile

Pozdrawiam, Mikołaj.

ygt · (Ten post był ostatnio modyfikowany: 23-11-2009, 04:55 przez ygt.)

Co do body CSS to wklepałem tak jak mi podałeś Smile

Ale mniejsza z tym już doszedłem jednak nie jest to co chciałem uzyskać tapeta ma "stroke" wokoło biały lub czarny w zależności od koloru tła..
więc postanowiłem pójść za twoją drugą radą i zmniejszyłem w PS rozdzielczość i jakość kompresji jednak efekt prawie identyczny z 150 kb jest 80 ale nadal treść się wczytuje a za chwile wskakuje tło (irytujące troszke bo psuje cały efekt ..) nie wiem jak to ugryźć ... myślę nad jakimś preloaderem ale czy to jest wykonalne to nie wiem..

pozdrawiam i dziękuje za pomoc !

(23-11-2009, 04:43)ygt napisał(a): Co do body CSS to wklepałem tak jak mi podałeś

Ale mniejsza z tym już doszedłem jednak nie jest to co chciałem uzyskać tapeta ma "stroke" wokoło biały lub czarny w zależności od koloru tła..
więc postanowiłem pójść za twoją drugą radą i zmniejszyłem w PS rozdzielczość i jakość kompresji jednak efekt prawie identyczny z 150 kb jest 80 ale nadal treść się wczytuje a za chwile wskakuje tło (irytujące troszke bo psuje cały efekt ..) nie wiem jak to ugryźć ... myślę nad jakimś preloaderem ale czy to jest wykonalne to nie wiem..

"myślę nad jakimś preloaderem ale czy to jest wykonalne to nie wiem.."

no to opcja z preloaderem odpada z tego co wyczytałem na forach to pre ładuje wartość pliku swf i nastepnia go odtwarza no a jak by nie było rozchodzi się o html-a

więc dalej trzeba to ciąć i w tym css o którym mam blado zielone pojęcie

pozdrawiam i dziękuje za pomoc !

razorskate · 24-11-2009, 02:16

Psuje efekt i tego raczej nie zmienisz. . . Kiedy tak wolno się ładuje, warto pomyśleć, czy ta tapeta jest koniecznie potrzebna, jeśli odpowiedź będzie twierdząca, przemyśl czy nie da się wytrzymać z takim czasem ładowania... Ogólnie, im mniejszy rozmiar pliku, tym lepiej.
Pozdrawiam, Mikołaj. Wink

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie