Forum PHP.pl > budowa strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

piotras9000

30.07.2008, 20:38:12

Witam, właśnie jestem na etapie projektowania cms'a i szukam porady jak opisać poszczególne klasy css tak aby to się wszzystko trzymało kupy. Wcześniej robiłem już takie fajerwerki i jakoś się trzymało ale mała zmiana w generowanej treści i się waliło. No więc chciałbym aby schemat strony wyglądał tak:

A kod mniej więcej tak:

<div id="wraper">

<div class="wiersz">Coś tam 1</div>

<div class="wiersz">

<div class="komorka">
<div class="zawartosc">Coś tam 2</div>
</div>
</div>

<div class="wiersz">

<div class="komorka">

<div class="zawartosc">Coś tam 3</div>

</div>

</div>

</div>

I potrzebuję ich opisania tak aby się trzymało kupy w każdej przeglądarce. Chyba że ktoś ma inny pomysł albo wyjaśnicie mi jak to robi się profesjonalnie

Otórz każda zawartość to będzie jakiś komponent programu(okno logowania, arty, rankingi itd) i jego treść zostanie wstawiona właśnie w takiego diva w określonym miejscu.

pyro

30.07.2008, 20:49:22

Możesz zrobić układ stałej szerokości, lub określać szerokość w procentach, aby cały układ był dopasowywany do szerokości okna przeglądarki, zmien background-color divów i sam zobacz

piotras9000

30.07.2008, 21:02:47

Z tym że mi chodzi o coś takiego jak opisać te divy.

np czy wystarczy coś takiego żeby to się nie rozleciało:

.komorka{
float: left
width:100%
}

Idt...

aaaa i wolałbym bez stałych szerokości tylko bardziej dopasowane do zawartości.

pyro

30.07.2008, 21:10:51

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div test</title>
<style type="text/css">
<!--
#div1 {
    position:absolute;
    left:10%;
    top:3%;
    width:80%;
    height:10%;
    z-index:1;
}
-->
</style>
</head>
 
<body>
<div id="div1"></div>
</body>
</html>
[HTML] pobierz, plaintext

Powyżej masz przykład, żeby zrobić sobie to wszystko na układzie dopasowywanym do szerokości przeglądarki wystarczą proste obliczenia procentowe i można zrobić układ

piotras9000

30.07.2008, 21:23:23

Mniej więcej wiem o co w tym biega jednak chodzi oo coś takiego:

W IE jak wsadzam divy w diva i dodaje im float to wszystko ok. Wychodzą bloczki gdzie każdy ma swoje miejsce zgodnie z kolejnością w kodzie. Natomiast np w FF robi się kompletny bajzel i jeden div wchodzi na drugiego tak jakby FF malował je jak prostokąty w paint-cie o tym samym 1 wierzchołku.

Quest polega na tym aby opisać tak klase "komorka" aby można było ją wsadzić w wiersz i każda następna znajdowała się obok niej jedna za drugą jak komórki w tabeli
2 zadanie to zrobić to tak aby do "komorki" wsadzić następnego diva o klasie "zawartosc" tak aby się nie pojawił problem jaki opisywałem wcześniej czyli żeby bloczki na siebie nie właziły

pyro

30.07.2008, 21:31:56

piotras nie wiem jak wtedy to robiles ale to co ci podalem powinno być raczej tak jak opisałeś

, div w divie tak jak ma być

.radex

31.07.2008, 08:22:28

ehhhh. Najłatwiej by to było zrobić za pomocą display: table/table-row/table-cell; no ale wiadomo, IE.

Lk_hc

31.07.2008, 09:01:32

@piotras9000 Tzn. ty masz problem czy po prostu chcesz żebyśmy tego CSSa za ciebie napisali?

cbagov

31.07.2008, 09:23:19

Projektujesz CMS a stoisz na takim banale i na dodatek zarzucasz cos FF albo IE. Tak po prostu jest, ze trzeba kontrolowac pod roznymi. Radze wiecej pokombinowac niz pytac o tak proste rzeczy.
A skoro CMS to generowanie dynamiczne tresci, jak chcesz wtedy zapanowac nad ukladem przy takim podejsciu?

I ten rysuneczek, nie ograniczaj sie nim. Skoro div tworzysz w divie - zachodzi rekurencja - taka abstrakcyjna.
Pozwala to na taka konstrukcje CMS, ze bez problemu z ukladu [] otrzymujesz [ | | ] a potem [-| |-] itd. czyli zagniezdzasz w 1 div 2 divy, pozniej np w div gornym lub lewym, zagniezdzasz nastepne itd - to tyczy CMS, chociaz recznie tez nalezy dysponowac jakims schematem dzialania.
W sumie nawet i twoj schemat przywodzi to na mysl.

Lk_hc

31.07.2008, 10:12:42

Szkielet HTML

CODE

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>


<div id="wrapper">

    <div id="header"> header stuff </div>

    <div id="upper">

        <div class="ucell">
            <div id="ucell_1">upper cell</div>
			<div id="ucell_2">upper cell</div>
			<div id="ucell_3">upper cell</div>
			<div id="ucell_4">upper cell</div>
        </div>

    </div>

    <div id="nether">

     <div class="ncell">
            <div id="ncell_1">nether cell</div>
			<div id="ncell_2">nether cell</div>
			<div id="ncell_3">nether cell</div>
     </div>

    </div>

</div>

</body>
</html>

Css:

CODE

* { padding: 0; margin: 0; }


body {
 font-family: Arial, Helvetica, sans-serif;
 margin: auto;
 font-size: 13px;

 text-align: center; /* for IE */

}

	#wrapper
	{ 
	 margin: 0 auto;
	 width: 1000px;
	 text-align: left;
	}
	
	#header
	{
	width: 100%;
	background-color:#5599ff;
	height: 250px;
	margin-bottom:10px;
	}
	
	#upper
	{
	width: 100%;
	background-color:#6fff83;
	height:280px;
	margin-bottom:10px;


	
	}
	
			#ucell_1 
			{
			float:left;
			height:260px;
			width:30%;
			margin:10px;
			border: 1px solid #969696; 
			}
			#ucell_2 
			{
			float:left;
			height:260px;
			width:30%;
			margin:10px;
			border: 1px solid #969696; 
			}
			#ucell_3 
			{
			float:left;
			height:260px;
			width:20%;
			margin:10px;
			border: 1px solid #969696; 
			}
			#ucell_4 
			{
			float:left;
			height:260px;
			width:11%;
			margin:10px;
			border: 1px solid #969696; 
			}

			
	#nether
	{
	width: 100%;
	background-color:#df91ff;
	height:500px;

	}		
	
			#ncell_1
			{
			float:left;

			height:470px;
			width:30%;
			margin:10px;
			border: 1px solid #969696; 
			}
			#ncell_2
			{
			float:left;

			height:470px;
			width:40%;
			margin:10px;
			border: 1px solid #969696; 
			}
			#ncell_3
			{
			float:left;

			height:470px;
			width:23%;
			margin:10px;
			border: 1px solid #969696; 
			}
	
	
	
	
	
	

Ponieważ komórki mają różne szerokości to sporo kodu trzeba było powtórzyć ( i tak nie jest to wiele ) Poza tym IE ma problemy z obsługą wyrażenia #nether > ncell * .

Działanie: http://loko.rootnode.net/tmp/test_php.pl.html

Sprawdzone na IE 7, Opera 9.2 i FF 3.
[mów mi wujek]

piotras9000

31.07.2008, 17:51:09

No tak tylko tutaj wszystkie komórki są opisane oddzielnie a mi chodzi o stworzenie jednej klasy która obsłuży nieskończenie wiele takich komórek obok siebie, bo w pionie to dla mnie nie jest problem bo polega to tylko na wstawianiu kolejnego div'a i wtedy mam wiersz po wierszu ale jak chce do tego wstawić komórki które mają znajdować się jedna obok drugiej i to w nieskończonej ilości i wymiarach zależnych od zawartości?

Sorry za stwarzanie kłopotu ale po prostu ucze się głównie PHP a css jakoś u mnie leży :/ Żeby nie było że ja się pytam a nic nie kumam oto mój poprzedni projekt:
http://kim-jestem.ovh.org/ < Ten o którym mówiłem że jak troche przy nim pozmieniam to się wszystko sypie. Ale pracując nad nowym właśnie szukam skutecznej recepty na rozwiązanie takowego problemu.

pyro

31.07.2008, 18:20:35

Cytat(piotras9000 @ 31.07.2008, 18:51:09 )

Proszę, przeczytaj powyższe (w tym moje) rady, przed następnym postem ^^

piotras9000

3.08.2008, 16:00:29

No i doszedłem do problemu który mi się często powtarzał kiedy wstawiałem obrazki oto przykład:

http://www.plemiona-team.yoyo.pl/problem/index.php.htm

Troche już kombinowałem nad tym ale lipnie mi to szło i bardziej zaśmieciłem kod niż coś zrobiłem. Otórz dopóki w divie o klasie col jest tekst to wszystko jest ok, ale problem pojawia się kiedy wklejam obrazek który ma być po prawej lub lewej stronie od tekstu. Wtedy ucina tego diva i jakby tworzy nowego.

Może mi ktoś pomóc? Bo ciągle trafiam na podobny problem.

tiraeth

3.08.2008, 16:26:15

W atrybutach CSS kolejnego diva (po divie z obrazkiem) daj clear : both - powinno pomóc

piotras9000

4.08.2008, 17:23:09

Nic.. :/ Problem zawsze się pojawia gdy w diva który ma ustawione opływanie(float) wstawie diva który również ma ustawione opływanie :/

Mniejsza o to. Jak się zrezygnuje z tła w formie obrazka to jakoś przejdzie ale mam kolejny problem

Otórz jeżeli mam div'a który reprezentuje wiersz a w nim znajduje się kilka div'ów reprezentujących komórki. Komórki nie mają przypisanych szerokości(są zależne od zawartości) i mają ustawione float:left tak aby znajdowały się jedna obok drugiej.

Chciałbym aby niezależnie od ilości tych komórek zawsze znajdowały się w jednej lini ponieważ jak zauważyłem, kiedy nie ma podanych wymiarów komórki, to przyjmuje ona długość tekstu(aż do <br/>) mimo że są spacje między słowami. Wtedy pojawia się coś takiego że ostatnia komórka przeskakuje pod pozostałe kiedy kończy się miejsce, a chciałbym aby po prostu szerokość wszystkich się zmniejszyła tak aby wszystkie weszły w jednej lini w głównym wierszu.

Słyszałem o display:inline, ale czy to to? i jak to zstosować?

Oto przykład. Chodzi o te szare divy. Chce aby były w jednej lini.

http://www.plemiona-team.yoyo.pl/problem/index.php.htm

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.