ustawienie bloku div "na sztywno"

0

Cześć.
Nie za bardzo wiedziałem jaki dać tytuł, więc z góry przepraszam za to ,że jest taki.. ee... tajemniczy (ładniej to brzmi niż - "nic wam nie mówiący)
Może od razu przejdę do problemu.
Mam diva, który ma w sobie diva z obrazkiem, diva z tytułem i opisem oraz diva z danymi.
Pod spodem będą kolejne divy. Wszystko dobrze działa, kiedy mam dużo opisu - tak, że wypełnia wysokość do końca obrazka. Gorzej, gdy opisu jest mało lub nie ma go wcale. Wtedy dolny div wchodzi na góry i wszystko się psuje.

Później wszystkie style divów wywalę do zewnętrznego arkusza a strona będzie wyświetlała divy za pomocą PHP z bazy MySQL.

title

 <div id="RAMKA" style="padding-right: 30px;">
     <div id="OBRAZEK" style="float: left; text-align: center;">
	 <img src="img/gra2.png"><br><br>
	 <a href="#" border="0"><img src="img/download.png"></a>
     </div>
	 
	 <div style="padding-left: 10px; margin-left: 180px;">
	 <b>Subway Surfers</b>
	 
	 
	      <div align="center" style="background-color: #36918d; margin-left: -30px;">
		  <table cellspacing="5" width="90%">
		  <tr align="center" valign="middle">
		  <td>OCENA:</td><td>AUTOR:</td><td>POBRANIA:</td><td>ROZMIAR:</td><td>KATEGORIA:</td>
		  </tr>
		  <tr align="center" valign="middle">
		  <td>5,6/6</td><td>Markus5</td><td>4753</td><td>10GB</td><td>Gry PC</td>
		  </tr>
		  </table>
	      </div>
	 
	 Seria Angry Birds zdobyła ogromną popularność wśród użytkowników smartfonów, tabletów, konsol i komputerów. Deweloperzy ze studia Rovio Mobile postanowili zrobić kolejny krok i wprowadzić swój produkt do serwisu Facebook w formie bezpłatnej aplikacji dostępnej z poziomu przeglądarki WWW.<br>
Podobnie jak w przypadku klasycznych odsłon cyklu, w Angry Birds: Friends nie istnieje wyraźnie zarysowana fabuła. Jedynym wątkiem jest tu konflikt pomiędzy „wściekłymi ptakami” i zielonymi świnkami, czyli złodziejami ptasich jaj.<br>
Zabawa polega przede wszystkim na strzelaniu z procy. Do ukończenia poziomu wymagane jest zlikwidowanie (np. poprzez bezpośrednie trafienie, spowodowanie upadku lub zawalenia się konstrukcji) wszystkich świnek. Gracz ma jednak ograniczoną liczbę „pocisków”, czyli w tym przypadku ptaków. Musi więc wymyślić sposób na sforsowanie umocnień i wytyczyć odpowiednią trajektorię lotu. Miejscami można również wykorzystać rozmaite power-upy, np. nalot gigantycznego orła.
<p  align="right"><a href="#"><font color="#36918d">zobacz pełen opis >>></font></a>
	 </div>

</div>
	 
	 
	 
<div id="RAMKA" style="padding-right: 30px;">	 
	 <div id="OBRAZEK" style="float: left; text-align: center;">
	 <img src="img/gra1.png"><br><br>
	 <a href="#" border="0"><img src="img/download.png"></a>
     </div>
	 
	 <div style="padding-left: 10px; margin-left: 180px;">
	 <b>Angry Birds Friends</b>
	 
	 
	      <div align="center" style="background-color: #36918d; margin-left: -30px;">
		  <table cellspacing="5" width="90%">
		  <tr align="center" valign="middle">
		  <td>OCENA:</td><td>AUTOR:</td><td>POBRANIA:</td><td>ROZMIAR:</td><td>KATEGORIA:</td>
		  </tr>
		  <tr align="center" valign="middle">
		  <td>3,4/6</td><td>Nik22</td><td>834</td><td>150KB</td><td>Gry android</td>
		  </tr>
		  </table>
	      </div>
	 
	 Seria Angry Birds zdobyła ogromną popularność wśród użytkowników smartfonów, tabletów, konsol i komputerów. Deweloperzy ze studia Rovio Mobile postanowili zrobić kolejny krok i wprowadzić swój produkt do serwisu Facebook w formie bezpłatnej aplikacji dostępnej z poziomu przeglądarki WWW.<br>
Podobnie jak w przypadku klasycznych odsłon cyklu, w Angry Birds: Friends nie istnieje wyraźnie zarysowana fabuła. Jedynym wątkiem jest tu konflikt pomiędzy „wściekłymi ptakami” i zielonymi świnkami, czyli złodziejami ptasich jaj.<br>
Zabawa polega przede wszystkim na strzelaniu z procy. Do ukończenia poziomu wymagane jest zlikwidowanie (np. poprzez bezpośrednie trafienie, spowodowanie upadku lub zawalenia się konstrukcji) wszystkich świnek. Gracz ma jednak ograniczoną liczbę „pocisków”, czyli w tym przypadku ptaków. Musi więc wymyślić sposób na sforsowanie umocnień i wytyczyć odpowiednią trajektorię lotu. Miejscami można również wykorzystać rozmaite power-upy, np. nalot gigantycznego orła.
<p  align="right"><a href="#"><font color="#36918d">zobacz pełen opis >>></font></a>
	 </div>

</div>
0

ja dla mnie masz sporo chaosu w kodzie, poczytaj o gridzie, RWD, zrób kolumny dla menu, obrazków z download, potem dla ocen i opisu, oddziel html od styli, które wrzuć w plik css, bo jak potem będzie strona się rozrastać to będzie płacz

0
brychu napisał(a):

Później wszystkie style divów wywalę do zewnętrznego arkusza a strona będzie wyświetlała divy za pomocą PHP z bazy MySQL.

Cenie sobie uwagi bardziej doświadczonych,ale nie czytasz chyba do końca tego co napisałem a tylko pobieżnie. Zgadza się?
RWD - responsive web design. Poczytałem. Tutaj chodzi o wyświetlanie na urządzeniach mobilnych. Cenna uwaga, ale na razie staram się, żeby to wyglądało na komputerze dobrze, ponieważ kto pobierze grę 20GB na komórkę czy tableta? Później się tym zajmę.

"Celem technologii gridowej jest stworzenie prostego, lecz mimo to wielkiego i potężnego, wirtualnego komputera z ogromnej ilości połączonych, niejednorodnych systemów współdzielących różnego rodzaju zasoby." No tutaj to proszę Pana, ale nie rozumiem co do mnie piszą albo trochę odbiegamy od mojego problemu.

Menu działa mi tak jak chciałem, więc na razie nie widzę potrzeby by to zmieniać.

WAŻNE: Napisałem to wszystko na razie w CSS i HTML tylko po to, żeby zobaczyć jak całość wygląda. Powtórzę się. Wszystko będzie wyświetlane za pomocą PHP.

0
brychu napisał(a):

RWD - responsive web design. Poczytałem. Tutaj chodzi o wyświetlanie na urządzeniach mobilnych. Cenna uwaga, ale na razie staram się, żeby to wyglądało na komputerze dobrze, ponieważ kto pobierze grę 20GB na komórkę czy tableta? Później się tym zajmę.

spokojnie, odrzućmy negatywne emocje
RWD to nie tylko mobilne to po prostu dostosowanie do aktualnego okna, czyly ktoś sobie na ekranie stacjonarki z monitorem HD otwiera twą stronę w oknie to widzi cały content, a nie obcięty do połowy
Ja to wolę zrobić od razu z zachowaniem porządku, ale być może faktycznie każdy robi inaczej

0

Nie ma żadnych negatywnych emocji. Po prostu uważam, że nie przeczytałeś całości postu, ponieważ napisałem, ze wrzucę style w zewnętrzny arkusz a Ty mi odpisujesz, żebym właśnie tak zrobił, bo jest bałagan ; p

Wydaje mi się, że jeśli chodzi o różne rozdzielczości to jest prawie ok, chociaż przyznaję się bez bicia, że zawsze miałem z tym problem. Jedynie w "TOP" zagina mi się wyszukiwarka w dół. Reszta, poza opisanym problemem dostosowuje się do okna przeglądarki. Nadal nie wiem jak rozwiązać swój problem. Muszę coś ustawić inaczej w stylach tych divów. Wiesz może co?

1

@brychu: layout się sypie bo #OBRAZEK "wystaje" poza #RAMKA
Na początek zrób tak żeby nie było kilku takich samych id na stronie! (patrz RAMKA, OBRAZEK), id ma być unikatowe! Zamień je na class, w css # na .
Nazwy klas i id w html raczej pisz małymi literami.
@czysteskarpety ma rację, kod strasznie słaby, w większości do przepisania na czysto. Szkoda się w tym babrać. :/

0

Jak to wystaje? #OBRAZEK jest w środku #RAMKA.
Co do ID to wstawiłem drugi raz te same divy tylko po to, żeby zobaczyć jak będą wyglądać 2 divy (#RAMKA) obok siebie.
Gdy będę programował to w PHP automatycznie będzie to #RAMKA1, #RAMKA2 itd.
Nie wiem...

.div {
tutaj wszystkie "ustawienia", tak?
}

Oj. Widzę, że będę musiał od nowa to napisać, tylko, że nie mam innego pomysłu jak ten, który napisałem. Nie jestem specem od CSSa. Ogólnie nie jestem specem od języków programowania a jedynie samoukiem i robię to z zamiłowania. Przestudiowałem Pythona, bo w nim chciałem programować, ale na koniec wyszło, że żeby wyświetlił mi się na stronie kod pisany w Pythonie muszę zastosować Django. Nie mogę się przez to przebić ; / Coś tej Django mi nie wchodzi. Może słaby kurs a może to moja wina.

0

Zbadaj sobie te wszystkie divy przy użyciu narzędzi deweloperskich w przeglądarce. Zobaczysz, że #OBRAZEK jest wyższy niż #RAMKA.

http://www.kurshtml.edu.pl/ polecam, sam się kiedyś z tego uczyłem.

0

Znam tą stronę. Też się z niej uczyłem. Zaraz zbadam sytuację. Muszę się poduczyć CSSa. Myślałem, że jak div OBRAZEK jest w div RAMKA to RAMKA automatycznie przyjmie wartości wysokości i szerokości OBRAZEK + OPIS.
Dzięki.

Edit: Rzeczywiście. Obrazek z downloadem wychodzi poza ramkę. A gdybym zrobił osoby div dla "download"?
Albo dodam dla RAMKA minimalną wyskość równą obrazkowi i download czyli 254?

0

Gdy stosujesz float: left dla #OBRAZEK to wtedy jest jakby pomijany jego rozmiar w rodzicu. Najlepiej jakby opis miał też float jakiś np right, i do tego ustal szerokość obrazka i opisu tak aby razem było 100%.
Użyj clearfix np tak ale musisz dodać dla ramek też class="ramka"

 .ramka:after {
  content: '';
  display: block;
  clear: both;
  line-height: 0;
}
0

Do #RAMKA dodałem:
height: auto !important;
height: 260px; /* IE */
min-height: 260px;
Działa. ; ]

0

To raczej odwlekanie nieuniknionego :) !important używaj w ostateczności.
Powinno wystarczyć height: auto; i min-height: 260px;

1 użytkowników online, w tym zalogowanych: 0, gości: 1