+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Struktura strony oraz CSS (/thread-struktura-strony-oraz-css)
Struktura strony oraz CSS - ygt - 22-11-2009
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ą...
RE: Struktura strony oraz CSS - razorskate - 22-11-2009
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>CSS:
Kod:
#bg_1 {
background-image: url("images/bg_01.jpg") no-repeat;
}
#bg_2 {
background-image: url("images/bg_02.jpg") no-repeat;
}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.
RE: Struktura strony oraz CSS - ygt - 22-11-2009
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
nie wiem z pewnością czegoś brakujeHTML:
<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;
}
}
RE: Struktura strony oraz CSS - ygt - 22-11-2009
ma ktoś może jakiś pomysł lub wizje co tu jest nie tak ?
pozdrawiam
RE: Struktura strony oraz CSS - razorskate - 22-11-2009
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
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
) --> 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
Pozdrawiam, Mikołaj.
RE: Struktura strony oraz CSS - ygt - 23-11-2009
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..
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 !
RE: Struktura strony oraz CSS - razorskate - 24-11-2009
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.