|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
Pomoc - budowa strony[CSS/HTML]
|
Liczba postów: 3
Liczba wątków: 1
Dołączył: 19-04-2011
Reputacja:
0
19-04-2011, 03:38
(Ten post był ostatnio modyfikowany: 19-04-2011, 03:48 przez mag12da.)
Cześć wszystkim!
Z początku chciałabym przywitać się z użytkownikami forum - jestem tutaj nowa 
Mam problem dotyczący CSS. Ukończyłam kurs CSS ze strony i wzięłam się za pisanie kodu. Po kilku godzinach moich wypocin udało mi się zrobić całkiem fajną stronę, z przyzwoitą oprawą graficzną - wszystko tak jak chciałam. Niestety napisany przeze mnie kod CSS i zarazem budowa strony składała się prawie w 100% z selektorów które powiązane były jedynie z obrazkami. Innymi słowy - w kodzie HTML nawaliłam grafik, a następnie w CSS je uporządkowałam za pomocą pozycjonowania. I tak wyszła mi strona. Tutaj pytanie do Was. Czy strona napisana w ten sposób jest poprawna? Ja osobiście odnoszę efekt, że wszystko pomimo dobrego wyglądu jest niestabilne i źle napisane.
Prócz tego problemu napotkałam jeszcze sytuacje, gdzie przy oddalaniu mojej strony w przeglądarce (kombinacja CTRL + pokrętło mysze) cały układ grafik(cała "strona") zmniejszał się i zostawał w rogu, gdzie w innych stronach to w większości tekst i niektóre elementy zmieniały wielkość nie psując struktury reszty.
Co jest nie tak? Prosiłabym o wytłumaczenie/wskazanie co robię źle.
Przypomnę jeszcze, że żadnych tabel ani div'ów nie stosuję bo nie wiem jak używać ich przy budowie strony oraz nie wiem czy one poprawiłyby w.w problemy.
Pozdrawiam!
mag12da
Liczba postów: 367
Liczba wątków: 32
Dołączył: 22-04-2009
Reputacja:
9
eee ja jestem w stanie odpowiedzieć na pierwsze pytanie i podrzucić jakiś trop w ostatnim 
No więc ja wychodzę z założenia (nie wiem czy wszyscy, ale myślę że tak) aby ilość grafik na stronie zmniejszyć do minimum, w miare możliwości użyć gradientu, cienia, barw napisanych w czystym css, gdy to nie będzie poprawnie wyświetlane, nie będzie możliwości odtworzenia projektu graficznego w ten sposób, dajemy grafikę
Divy, a jeśli wolisz to tabelki (ja sugeruje divy) należy stosować, raczej nie wyobrażam sobie budowy strony bez tego.
Liczba postów: 2,587
Liczba wątków: 2
Dołączył: 03-04-2010
Reputacja:
58
1. Tabel nie stosuje do budowy dokumentu.
@autor - Daj link/kod, bo bez tego to ciężko powiedzieć.
Liczba postów: 44
Liczba wątków: 0
Dołączył: 09-04-2011
Reputacja:
0
Wstawianie zbyt dużej ilości grafik, spowalnia wczytywanie się strony, dlatego lepiej ograniczać to do minimum. Warto też dodać, że obrazki lepiej jest wstawiać w postaci tła (background-image:url(); - w css), zamiast zwykłych img.
Liczba postów: 3
Liczba wątków: 1
Dołączył: 19-04-2011
Reputacja:
0
Dzięki wszystkim za odpowiedzi
Hmm rozumiem. Zbyt dużo grafik nie jest OK, lecz w moim wypadku najpierw projektuje szablon w GIMPie, potem tnę grafiki, a potem w fragmentach układam z nich stronę, więc trudno mi jest je ograniczyć. Mój sposób zobaczycie w niżej podanym kodzie, i odpowiedzcie czy można tak pisać strony? Jeśli nie, to jak je pisać?
HTML:
Kod: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta name="Keywords" content="">
<meta name="Description" content="Opis strony">
<title>Nazwa Strony</title>
</head>
<body>
<img class="a1" src="logo1.png"/>
<img class="b1" src="menu.png"/>
<img class="c1" src="telt.png"/>
<img class="kol" src="kolumna.gif"/>
<img class="kol1" src="kolumna.gif"/>
<img class="kol2" src="kolumna.gif"/>
<img class="kol3" src="kolumna.gif"/>
<img class="img1" src="img1.gif"/>
<img class="pr" src="przerwa.gif"/>
<img class="pr2" src="przerwa.gif"/>
<img class="pr3" src="przerwa.gif"/>
<img class="pr4" src="przerwa.gif"/>
<img class="img2" src="img2.jpg"/>
<img class="img3" src="img3.png"/>
<img class="img4" src="img4.jpg"/>
<img class="img5" src="img5.jpg"/>
<a id="a1" href="index.html"><font size="4">Strona Główna</font></a>
<a id="a2" href="uslugi.html"><font size="4">Usługi</font></a>
<a id="a3" href="onas.html"><font size="4">O Nas</font></a>
<a id="a4" href="kontakt.html"><font size="4">Kontakt</font></a>
<img class="st" src="stopka.gif"/>
<img id="asd" src="anim.gif"/>
</body>
</html>
Oraz CSS:
Kod: img.a1 {
position:absolute;
left: 270px;
top: 30px;
z-index: 5;
}
img.b1 {
position:absolute;
left: 278px;
top: 270px;
z-index: 5;
}
#a1 {
position:absolute;
left: 340px;
top: 340px;
z-index: 5;
color: white;
}
#a2 {
position:absolute;
left: 340px;
top: 380px;
z-index: 5;
color: white;
}
#a3 {
position:absolute;
left: 340px;
top: 425px;
z-index: 5;
color: white;
}
#a4 {
position:absolute;
left: 340px;
top: 470px;
z-index: 5;
color: white;
}
a {
text-decoration: none;
}
#a1:link {
color: white;
}
#a1:visited {
color: white;
}
#a1:hover {
color: white;
font-weight: bold;
}
#a2:link {
color: white;
}
#a2:visited {
color: white;
}
#a2:hover {
color: white;
font-weight: bold;
}
#a3:link {
color: white;
}
#a3:visited {
color: white;
}
#a3:hover {
color: white;
font-weight: bold;
}
#a4:link {
color: white;
}
#a4:visited {
color: white;
}
#a4:hover {
color: white;
font-weight: bold;
}
img.c1 {
position:absolute;
left: 300px;
top: 300px;
z-index: 2;
}
img.kol {
position:absolute;
left: 100px;
top: 0px;
z-index: 5;
}
img.kol3 {
position:absolute;
left: 100px;
top: 470px;
z-index: 5;
}
img.kol1 {
position:absolute;
left: 100px;
top: 340px;
z-index: 5;
}
img.kol2 {
position:absolute;
left: 100px;
top: 440px;
z-index: 5;
}
img.img1 {
position:absolute;
left: 0px;
top: 0px;
z-index: 1;
}
img.pr {
position:absolute;
left: 0px;
top: 190px;
z-index: 1;
}
img.img2 {
position:absolute;
left: 0px;
top: 195px;
z-index: 1;
}
img.pr2 {
position:absolute;
left: 0px;
top: 382px;
z-index: 1;
}
img.img3 {
position:absolute;
left: 0px;
top: 393px;
z-index: 1;
}
img.pr3 {
position:absolute;
left: 0px;
top: 578px;
z-index: 1;
}
img.img4 {
position:absolute;
left: 0px;
top: 583px;
z-index: 1;
}
img.pr4 {
position:absolute;
left: 0px;
top: 774px;
z-index: 1;
}
img.img5 {
position:absolute;
left: 0px;
top: 779px;
z-index: 1;
}
img.st {
position:absolute;
left: 300px;
top: 870px;
z-index: 5;
}
#asd {
position:absolute;
left: 810px;
top: 600px;
z-index: 5;
}
#obrazek {
position:absolute;
left: 500px;
top: 340px;
z-index: 5;
}
body {
background-image: url("background.jpg");
background-attachment: scroll;
}
Pozdrawiam i dziękuje za pomoc
Liczba postów: 2,587
Liczba wątków: 2
Dołączył: 03-04-2010
Reputacja:
58
Magda, nie - to najgorsza technika jaka jest tylko możliwa. Właściwie to nawet trudno nazwać techniką.
Jak pisać? Używać divów do budowy struktury dokumentu. Przeczytaj kurs na kurshtml.boo.pl.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
mag12datwojekodowaniewchwiliobecnejjestbardzozleinietrzymasiepodstawowychzasadkodowaniastrondlategopowinnaswpierwprzeczytackurstworzeniastrontakijakpodanypowyzejlubtenzhelionu.
Ciężko się czyta prawda? Dlatego, że nie zachowałem żadnych zasad gramatyki. Tak samo w przypadku tworzenia stron - żeby strona była dobra, trzeba nauczyć się "gramatyki". Bez tego będzie to tylko zbitek liter.
Liczba postów: 3
Liczba wątków: 1
Dołączył: 19-04-2011
Reputacja:
0
A myślałam, że po ukończeniu kursu będę znała chociaż w połowie CSS 
Ale z tego co widać - muszę wrócić do podstaw i nauczyć się poprawnie budować strony. Czas zajrzeć na tę stronkę.
Dziękuje wszystkim za odpowiedzi i wytłumaczenie choć pewnie nie będzie to mój ostatni kłopot
Problem rozwiązany więc chyba temat można zamknąć.
Pozdrawiam
PS: @Kartofelek dzięki za zobrazowanie mojego kodu 
|
| Podobne wątki… |
| Wątek: |
Autor |
Odpowiedzi: |
Wyświetleń: |
Ostatni post |
| |
Kursy (x)HTML/CSS |
DoGeR |
9 |
23,675 |
18-01-2017, 21:55
Ostatni post: Michael
|
|
HTML/CSS/JQUERY - Potrzebuje pomocy / Bezradność |
jokerblitzz |
10 |
10,228 |
28-04-2016, 00:24
Ostatni post: mubi
|
| |
[CSS]+[HTML] Pozycjonowanie slidera. |
Youras |
2 |
4,751 |
16-01-2016, 23:11
Ostatni post: Szymon Słowik
|
| |
Kolor tła dla aktywnej podstron [CSS i HTML] |
bahafo |
5 |
7,782 |
27-12-2014, 15:25
Ostatni post: Kartofelek
|
| |
[problem][html] cutenews i szablon |
kawadodek2000 |
1 |
2,988 |
13-08-2013, 16:49
Ostatni post: mateo
|
Użytkownicy przeglądający ten wątek: 2 gości
|
|
|
Sponsorzy i przyjaciele
|
|
|
