Potrzebuje troche informacji na temat Div -ow...

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Galthar
Nowy
Nowy
Posty: 44
Rejestracja: czw lut 24, 2005 8:12 pm
Lokalizacja: Ostróda
Kontakt:

Potrzebuje troche informacji na temat Div -ow...

Post autor: Galthar »

Witam..
Tworze strone. Zrobilem layout. pocialem go. I tu sie zaczyna moj problem. Zrobilem tabelke w html i nadalem rozmiary komorkom tworzac plik style.css Wszystko ladnie pieknie rozmiary sie zgadzaja. Jednak po wklejeniu kazdej czesci nie moge pozbyc sie BORDER z tabelki. Jest poprostu niewidoczny ale przerwa istnieje. Kolega polecił mi div-y. Chcialbym sie dowiedziec co to sa te div-y, na czym polega ich wykorzystywanie i jak je stosowac.

Przeszukałem kilka dobrych kursow ale nie znalazlem tam tego.

http://webmaster.helion.pl/kurshtml/
http://www.w3schools.com/html/default.asp


Prosze o pomoc.

:cry:


Dodam jeszcze ze probowalem juz robic ta strone na kilka sposobow. Robilem body background z layouta i probowalem zmapowac przyciski. Ok. Ale ja i tak bede potrzebowal odzielnej ramki na main window i buttony bo chcialbym aby sie podmienialy dzieki onMouseOver na inny button. .
Siwy_PO
Przelotem
Przelotem
Posty: 351
Rejestracja: pn sty 27, 2003 12:10 am
Lokalizacja: Bełchatów
Kontakt:

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Siwy_PO »

Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Stig »

Galthar pisze:Kolega polecił mi div-y
I bardzo dobrze kolega polecił :wink:.
Galthar pisze:Chcialbym sie dowiedziec co to sa te div-y, na czym polega ich wykorzystywanie i jak je stosowac.
Div jest znacznikiem, który, można tak powiedzieć, służy do budowy strukturu dokumentu strony www. Więcej na ten teamt powie Ci specyfikacja.

Ich wykorzystanie polega na odpowiednim zastosowaniu kody CSS do wypozycjonowania elementów na stronie www. Ten sposób budowy stron jest zalecany przez standardy sieciowe. W odpowiedzi na pytanie jak je stosować może pomóc Ci ten artykuł.

Budowanie layoutów pozbawionych tabelek wymaga bardzo dobrej znajomości CSS, w szczególności atrybutów margin, float i position, a także zagadnień z "box-model". Mimo wszystko nauka to w znacznej mierze praktyka, dlatego pomocne są przykłady layout'ów stworzonych za pomocą tej techniki. Oto przykładowa lista.
Galthar
Nowy
Nowy
Posty: 44
Rejestracja: czw lut 24, 2005 8:12 pm
Lokalizacja: Ostróda
Kontakt:

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Galthar »

Stig zapoznam sie z tym wszystkim... Bardzo jasna i rzetelna odpowiedz... Dzieki wielkie... W razie problemow oczywiscie forum zabazgram :wink:


Dodam jeszcze ze dopiero zapoznaje sie z CSS.

Mam dosc "floating frames" i tym podobnym rozwiazaniom dla poczatkujacych :wink:
Calif
Nowy
Nowy
Posty: 91
Rejestracja: sob lut 26, 2005 3:03 pm
Lokalizacja: Kaplica

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Calif »

Galthar twój zapał mnie zadziwia i cieszy bardzo lecz tak jak pisze Stig, dużo pracy Cię czeka.
Koledzy chyba już dużo napisali na temat DIV-ów. Oczywiście są to elementy blokowe, a każdy z tych bloczków okraszamy CSS-em.
Nie zrażaj się na początku gdy będziesz miał problemy z ujarzmieniem DIV-ów, mam na myśli ich ułożenie.
Troszkę treningu się przyda. Oczywiście jeśli będą problemy wiesz, że zawsze możesz mnie pytać czy o DIV-y czy CSS.

Pozdrawiam.
Galthar
Nowy
Nowy
Posty: 44
Rejestracja: czw lut 24, 2005 8:12 pm
Lokalizacja: Ostróda
Kontakt:

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Galthar »

Udalo sie.
Zakumalem juz div-y. Na samym poczatku mialem problem z pozycjonowaniem ich. Tzn wszystkie elementy z ktorych sklada sie strona marginesy naglowki pojawialo sie po lewej stronie. Powodem bylo uzycie cechy
position:absolute; Zrezygnowalem z tego wywaliłem wspolrzedne z CSS do kazdego elementu div i uzylem liniki kodu w pliku html ktora dopisalem przy div-ach :
<div style="float:center;"> albo <div style="float:left;">
I wszystko gra. Odpala sie na firefoxie, przy zmniejszaniu okna nic sie nie wywala jest ok.

Jezeli ma ktos jakies uwagi do sposobu jakim sie posluzylem prosze sie wypowiedziec w tej sprawie.




Kolejnym problemem przed jakim stonie to stworzenie i usytuowanie zawartosci na tej stronie. Rowniez problem maly mam z menu.

Stworzylem 6 przyciskow ktore zapisane mam w "*.jpg" sa elegancko wypozycjonowane i uzyte jako div


To wyglada mniej wiecej tak kazdego diva opisuje go w pliku CSS
i wyglada to tak:

czesc z style.css

Kod: Zaznacz cały

#Wiesci {
background: url('menu/buttons/wiesci.jpg');
margin-left:auto;
width: 100px;
height: 25px;
}

#Historia {
background: url('menu/buttons/historia.jpg');
margin-left:auto;
width: 100px;
height: 25px;
}
do tego w HTML sa przypisane lnijki :

Kod: Zaznacz cały

<div id="wiesci" style="float:left;">
</div>
<div id="historia" style="float:left;">
</div>
Moje pytania brzmią:

1: Jak przypisac link do obrazka w div tak jak normalnie w html?
2: Stworzylem ramke w oknie main na tekst i obrazki do galerii czy to dobry pomysl i czy sie sprawdzi? wyglada to tak

HTML

Kod: Zaznacz cały

<div id="main" style="float:left;">
<div class="text">
<p><b>Ogłasza się wszem i wobec</b></p>
<Hr style="color:black;">
<p>
TEXTTEXTTEXTTEXTTEXT
</p>
<p>
TEXTTEXTEXT
</p>
CSS

Kod: Zaznacz cały

.text	{
text-align: center;
width: 575px;
height: 550px;
padding: 50px;
float: top;
}


Z gory dziekuje z pomoc.

Pozdrawiam
Ostatnio zmieniony wt sie 02, 2005 4:22 pm przez Galthar, łącznie zmieniany 2 razy.
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Stig »

Galthar pisze:Stworzylem 6 przyciskow ktore zapisane mam w "*.jpg" sa elegancko wypozycjonowane i uzyte jako div
Ale nie popadaj w skrajność :wink:. Div'y są OK, ale nie powinno się ich stosować zawsze i wszędzie, i do każadego zadania :wink:. Menu powinieneś skonstruować za pomocą elementów list <ul> i <li>. Ogrom wiedzy na ich temat oferuje Listmatic na css.maxdesign.com.au.
Druga sprawa: JPG to format przeznaczony do zdjęć. Jako przyciski do menu powinieneś użyć formatu PNG, ewentualnie GIF, jeśli martwisz się ich wyglądem pod IE.
Galthar pisze:1: Jak przypisac link do obrazka w div tak jak normalnie w html?
Jeśli użyjesz elementów list to wystarczy, że w ramach elementu <li>, zamieścisz element <a>. Oto przykład.
Galthar pisze:2: Stworzylem ramke w oknie main na tekst i obrazki do galerii czy to dobry pomysl i czy sie sprawdzi? wyglada to tak
Przyznam szczerze, że ne bardzo rozumiem, ale patrząc na kod nie więdzę minusów założenia, które przyjąłeś.

PS. Taka wielka prośba ode mnie: fajnie by było, gdybyś następnym razem przykład kodu zamieszczał korzystając z BBCode: "Code". W znacznym stopniu poprawia to czytelność post'a i pomaga wprowadzić jako taki porządek na forum :).
Galthar
Nowy
Nowy
Posty: 44
Rejestracja: czw lut 24, 2005 8:12 pm
Lokalizacja: Ostróda
Kontakt:

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Galthar »

Poprawione :wink:

i sprostuje to co nie zrozumiales.


Okno main jest to "ramka"
width: 575px;
height: 550px;
jest srodkiem gdzie napisany jest tekst... i wyglada to tak.

Obrazek

Tak to ma wygladac z zalozenia i juz prawie wyglada. Okno main jest puste a tekst wpisywany ma byc normalnie w html... Chce rowniez zrobic pasek przewijania pionowy w kolorze papirusa ale z tym sobie poradze. Takze widzisz stworzylem ramke na srodku i tam umieszczam tekst.

Jak rowniez widzisz podzielilem menu na paski o szerokosci 100 i wysokosci 25 i chce zrobic pod nimi linki. W najnormalniejszy sposob jaki robi sie hiperlacza na obrazkach w HTML.


Dzieki za kolejna porcje przydatnych linkow z tutorialami i przykladami. :-D
Przestudiuje to !


Pozdro!!! :wink:
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: Potrzebuje troche informacji na temat Div -ow...

Post autor: Stig »

Teraz rozumiem :).
W takim wypadku potwierdzam, że nie widzę minusów przyjętego założenia i wydaje mi się, że się ono sprawdzi :).
ODPOWIEDZ