Autor Wątek: [CSS] Chodzące bloki div  (Przeczytany 3597 razy)

Offline Pawel1503

  • Użytkownik
    • DevBlog Pawel1503

# Sierpień 29, 2010, 19:03:10
Witam!

Mam problem. Zrobiłem sobie strone na podstawie pliku css w którym zrobiłem kilka bloków. Wszystko działało fajnie dopóki nie zmieniłem rozmiaru przeglądarki do modyfikowania. Gdy tylko zacząłem sobie ten rozmiar zmniejszać... o zgrozo... bloki zaczeły razem nią. A gdy jakiś się nie mieścił to przechodził na dół. Dodaje plik css:

Kod: (css) [Zaznacz]
html, body {
background-image: url("tlo.png");
background-color: #fff;
color: #000;
padding: 0;
}

#top {
width: 780px;
}

#NAGLOWEK {
background-color: #888;
}

#MENU {
min-width: 600px;
width: 150px;
height: 500px;
        background-image: url("panel_boczny.png");
float: left;
overflow: hidden;
background-color: #ccc;margin-left: 50px;
}

#MENU2 {
min-width: 600px;
width: 150px;
height: 500px;
         background-image: url("panel_boczny.png");
float: right;

background-color: #ccc;margin-right: 50px;
}

#INFORMACJE {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}

#TRESC {

text-align:justify;;overflow: auto;
height: 500px;
min-width: 600px;
float: center;
background-color: #fff;
background-image: url("tlo_tresc.jpg");
}

#STOPKA {

clear: both;
width: 100%;
background-color: #888;
}

Pozdrawiam! Pawel1503

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline BrutalComputer

  • Użytkownik

# Sierpień 29, 2010, 19:09:42
Nie ma pytania, nie oczekuj odpowiedzi ;-)
Poza tym CSS ciężko nazwać językiem programowania... ( zapewne zaczynam 10-stronicowy flamewar ) :D

Jakby co to ustal sobie jakąś minimalną rozdzielczość - 1024x768 jest dobrym wyborem.

Offline Avaj

  • Użytkownik

# Sierpień 29, 2010, 19:15:17
Pomyliłeś fora, tu jest gamedev, nie webdev.

Offline AS

  • Użytkownik
    • Homepage

# Sierpień 29, 2010, 19:38:32
Wszystko działało fajnie dopóki nie zmieniłem rozmiaru przeglądarki do modyfikowania.

? Rozumiem, że "dopóki nie zmieniłem rozmiaru okna przeglądarki"

A patrząc na css to pewnie chciałeś sobie wykonać layout strony od zera, bo ponazywałeś sekcje strony "swojsko". Mieszasz tam float: left i right (a nawet i center się znalazl). Rada: popatrz sobie na jakieś wzorowe strony jak są poukładane, często jest to nagłówek + content + 1/2 sidebar'y, jest tego masa, use google, np. CSS Zen Garden. Do lektury polecam też np. A List Apart. Własne wynalazki tez z duzym prawdopodobienśtwem nie będą dzialac po IE, a niestety sporo ludzi dalej uzywa tej przegladarki. Ile konkretnie - @see ranking.pl
« Ostatnia zmiana: Sierpień 29, 2010, 19:40:04 wysłana przez AS »

Offline Pawel1503

  • Użytkownik
    • DevBlog Pawel1503

# Sierpień 29, 2010, 20:08:05
Oj sory, błąd przy pisowni. Ok, zlokalizowałem źródło problemu którym jest float (okazało się że to służy do tworzenia pływających obiektów). I szukam teraz jakiejś funkcji do ustawienia moich bloków. Znalazłem coś takiego jak:

position: relative; left: 5%
position: static; left: 5%
position: absolute; left: 5%

Ale normalnie jak teraz mi się to porobiło to szok. Albo każdy blok jest w oddzielnej linijce, albo jest zwielokrotniony do końca strony lub nachodzi na inny blok. Generalnie chodzi mi o takie co:

------------------
||++++++++||
||++++++++||
||++++++++||
||++++++++||
==========

Każdy znak to inny blok. Zna ktoś rozwiązanie? Pozdrawiam!

Offline Rokuzo

  • Użytkownik
    • Masz na sprzedaż klucze do cs go?

# Sierpień 29, 2010, 20:16:56
Patrz -> www.kurshtml.boo.pl (są, również gotowe szablony stron wykonane w CSS);

Używaj najlepiej % zamiast suchych wartości;

Nie każdy użytkownik ma taką samą rozdzielczość a czasem wkurw****** jest gdy muszę przewijać co chwile stronę by coś przeczytać bo webmaster zrobił stronkę pod rozdz. 1280x1024 ...;

Tak CSS to jak HTML ... kilka znaczników i często wystarczy znać tylko język angielski i dobrze trafić w znacznik ;p;


html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}

#NAGLOWEK {
background-color: #888;
}

#MENU {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}

#INFORMACJE {
width: 150px;
float: right;
overflow: hidden;
position: relative;
background-color: #ccc;
}

#TRESC {
margin-left: 150px;
margin-right: 150px;
background-color: #fff;
}

#STOPKA {
clear: both;
background-color: #888;
}


Powyżej podałem szablon strony na divach, który sam lubię używać ;p

Avaj pisał to nie nie webdev ... no właśnie z takimi pytaniami najlepiej kierować się na http://www.webcentral.pl/;

Chociasz tutaj też ludzie z tworzeniem stron WWW pomogą ;p;
« Ostatnia zmiana: Sierpień 29, 2010, 20:23:42 wysłana przez Rokuzo »

Offline Pawel1503

  • Użytkownik
    • DevBlog Pawel1503

# Sierpień 29, 2010, 20:40:58
Po pierwsze: Dlaczego na końcu zdania dajesz ; ? Czyżby jakiś nawyk z programowania ? :D
Po drugie: Ja też na tym szablonie pracowałem i z tego jest to co dałem w pierwszym poście. Chociaż jak sobie wkleiłem szablon do style.css, i zmniejszyłem przeglądarkę to też występuje podobny efekt czyli np. jak mamy nagłówek: Witaj Paweł!, to po zmniejszeniu rozmiaru do minimum ten tekst wygląda tak:

Witaj
Paweł

Wydaje mi się że to niepożądany efekt CHOCIAŻ moge się mylić. Co o tym myślicie? Pozdrawiam.

PS> Inny przykład: w miare zmieniania rozmiaru przegl. moja rabelka z danymi też zmienia rozmiar.

Offline Rokuzo

  • Użytkownik
    • Masz na sprzedaż klucze do cs go?

# Sierpień 29, 2010, 21:34:08
Pamiętam, że też miałem z tym problemy i napisałem ładny szablon, który działał jak powinien ale go już dawno nie mam ;p;

Kurde z tym ";" to nie wykluczam twojego przypuszczenia ;p Ciekawe jak będą moje prace w szkole wyglądać ;p;

Bo ten szablon to dopasowuje się do rozmiaru przeglądarki a Tobie chodzi o to, żeby gdy np. zmniejszamy rozmiar przeglądarki ... to tabelki się do siebie nie przybliżały tylko stały w miejscu poprzez co musimy przewijać stronkę by ujrzeć inne bloczki ?;

Ten szablon co Tobie podałem z tamtej stronki to trzeba na 50% z "position: ..." pogrzebać ;p coś na przykład "static" czy tam "absolute" podać czy coś w ten design;

Tak przynajmniej mi się wydaje ... dawno się w te klocki nie bawiłem ^^;

Kiepsko tłumaczę to przykład podam;

www-> Mamy tabelkę <table>Grzyb leży na stole</table> oczywiście mamy pełen rozmiar przeglądarki ok jest good;

www-> Wyświetla się "Grzyb leży na stole";

www-> Teraz pomniejszamy rozmiar przeglądarki na minimum;

www-> Teraz wyświetla się
"Grzyb
leży
na stole";

www-> Teraz by temu zapobiec prawdopodobnie musimy ustawić "position : x" gdzie x jest na 50% != relative;


html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}

#NAGLOWEK {
background-color: #888;
}

#MENU {
width: 150px;
float: left;
overflow: hidden;
position: absolute;
background-color: #ccc;
}

#INFORMACJE {
width: 150px;
float: right;
overflow: hidden;
position: absolute;
background-color: #ccc;
}

#TRESC {
margin-left: 150px;
margin-right: 150px;
background-color: #fff;
}

#STOPKA {
clear: both;
background-color: #888;
}


Lub coś w tym stylu ...
Jeżeli Tobie nie chodzi o to pisz ^^
« Ostatnia zmiana: Sierpień 29, 2010, 21:45:18 wysłana przez Rokuzo »

Offline jaboja

  • Użytkownik
    • JaBoJa

# Sierpień 29, 2010, 21:58:11
Jak dajesz CSS to daj też HTML - najlepiej link do oryginalnego pliku, żeby można było zobaczyć co jest nie tak.

ps. Co to za durny nawyk pisania "tu jest gamedev, a nie webdev". Nie umiecie pomóc, nie piszcie, ewentualnie przenieście do innego działu forum (JavaScript/HTML/CSS).

Offline Rokuzo

  • Użytkownik
    • Masz na sprzedaż klucze do cs go?

# Sierpień 29, 2010, 22:02:36
@UP
Racja autorze wątku podaj dodatkowo plik HTML oczywiście nie wszystko ale to co potrzebne do pozycjonowania itp.

Z tą odpowiedzią to lepiej by było nic nie pisać ;p

@Autor Wątku
Pobaw się z "position: ..." ... i popróbuj czegoś, również samemu ;p

Offline Salceson

  • Użytkownik

# Sierpień 29, 2010, 22:30:50
A próbowałeś min-width i min-height?

Offline lukaszw

  • Użytkownik

# Sierpień 29, 2010, 22:56:54
A próbowałeś min-width i min-height?
To pomoże na float:right? Hmmm...

Offline Salceson

  • Użytkownik

# Sierpień 29, 2010, 23:03:48
Na float: right niekoniecznie.
Wszystkie 3 divy powinny mieć float: left...
I wtedy pomoże, przynajmniej tak sądzę.

Offline lukaszw

  • Użytkownik

# Sierpień 29, 2010, 23:15:23
Na float: right niekoniecznie.
Wszystkie 3 divy powinny mieć float: left...
I wtedy pomoże, przynajmniej tak sądzę.
Wtedy warstwa, która będzie najbardziej po prawej, będzie starała się przybliżyć do lewej krawędzi (bo ma float:left), a wtedy warstwa środkowa będzie miała swoją minimalną szerokość, czyli użycie min-width będzie rónoważne z użyciem width. Tak przynajmniej mi się wydaje...

Offline jaboja

  • Użytkownik
    • JaBoJa

# Sierpień 30, 2010, 03:04:33
Wiecie, tak na prawdę w jakiś sposób na każdym z tych stylów coś da się zrobić. Tylko że nie wiedząc jak wygląda kod HTML ani jak wygląda projekt layoutu (tj. gdzie które bloki mają być) możemy tylko prześcigać się w podawaniu własnych idei na uniwersalny layout.

Cóż, ja osobiście zwykle daję po prostu:

Kod: (css) [Zaznacz]
html,body {
    padding: 0;
    margin: 0 auto;
    text-align: center; /* to srodkuje blok #all w IE */
}
#all {
    margin: 0 auto; /* to srodkuje blok #all w normalnych przegladarkach */
    padding: 0;
    text-align: left;
    width: 1003px; /* minimalna szerokosc obszaru aktywnego zmaksymalizowanego okna przegladarki dla rozdzielczosci 1024 */
    position: relative; /* to pozwoli na pozycjonowanie elementow znajdujacych sie w srodku poprzez position:absolute */
}
Kod: (html4strict) [Zaznacz]
<body><div id="all">
Co do styli min-width i max-width to lepiej nie opierać layoutu na ich działaniu, bo IE ich nie obsługuje (co nie znaczy, że nie wolno ich używać, gdy ich niezadziałanie nie jest szczególnie szkodliwe).

Jeśli natomiast chcecie layout na floatach, to osobiście robię to w następujący sposób:
Kod: (css) [Zaznacz]
html,body {
    margin: 0;
    padding: 0;
}
#sidebarLeft {
    float: left;
    width: 150px;
}
#sidebarRight {
    float: right;
    width: 150px;
}
#content {
    margin: 0 150px;
}
#footer { clear: both; }
Kod: (html4strict) [Zaznacz]
<body>
    <div id="header">...</div>
    <div id="sidebarLeft">...</div>
    <div id="sidebarRight">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
</body>

Przy czym metoda na position:absolute ma tę zaletę nad metodą na floatach, że można sobie ustawić bloki w kodzie HTML zgodnie z zaleceniami odnośnie tworzenia stron pod kątem czytników treści (dla niewidomych), tj. w ten sposób, aby elementy powtarzające się na każdej podstronie były czytane po zasadniczej treści strony (z drugiej strony wtedy nie ma prostej metody na zrobienie stopki strony na całą szerokość, tak by nie było ryzyka, że sidebary ją zakryją, jeśli będą wyższe od treści).

Kod: (css) [Zaznacz]
(...)
#all {
    position: relative;
}
#content {
    margin: 0 150px;
}
#sidebarLeft, #sidebarRight {
    width: 150px;
    position: absolute;
    top: 0;
}
#sidebarLeft { left: 0; }
#sidebarRight { right: 0; }
Kod: (html4strict) [Zaznacz]
<body><div id="header">...</div><div id="all">
    <div id="content">...</div>
    <div id="sidebarLeft">...</div>
    <div id="sidebarRight">...</div>
</div></body>

(swoją drogą jeśli nie chcesz mieć stałej szerokości, ale spozycjonować na position:absolute, to możesz po prostu dać odpowiednie marginesy na content i pozbyć się #all)