Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> budowa strony, potrzeba opisu klas ew. innych porad
piotras9000
post
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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:
(IMG:http://images23.fotosik.pl/256/dadd444bdaa54cea.jpg)
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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) 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.
Go to the top of the page
+Quote Post
pyro
post
Post #2





Grupa: Zarejestrowani
Postów: 2 148
Pomógł: 230
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
piotras9000
post
Post #3





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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.

Ten post edytował piotras9000 30.07.2008, 21:03:47
Go to the top of the page
+Quote Post
pyro
post
Post #4





Grupa: Zarejestrowani
Postów: 2 148
Pomógł: 230
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>div test</title>
  5. <style type="text/css">
  6. <!--
  7. #div1 {
  8.     position:absolute;
  9.     left:10%;
  10.     top:3%;
  11.     width:80%;
  12.     height:10%;
  13.     z-index:1;
  14. }
  15. -->
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div id="div1"></div>
  21. </body>
  22. </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
Go to the top of the page
+Quote Post
piotras9000
post
Post #5





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
pyro
post
Post #6





Grupa: Zarejestrowani
Postów: 2 148
Pomógł: 230
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
-----

piotras nie wiem jak wtedy to robiles ale to co ci podalem powinno być raczej tak jak opisałeś (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) , div w divie tak jak ma być
Go to the top of the page
+Quote Post
.radex
post
Post #7





Grupa: Zarejestrowani
Postów: 1 657
Pomógł: 125
Dołączył: 29.04.2006

Ostrzeżenie: (0%)
-----

ehhhh. Najłatwiej by to było zrobić za pomocą display: table/table-row/table-cell; no ale wiadomo, IE.
Go to the top of the page
+Quote Post
Lk_hc
post
Post #8





Grupa: Zarejestrowani
Postów: 36
Pomógł: 1
Dołączył: 12.06.2006

Ostrzeżenie: (0%)
-----

@piotras9000 Tzn. ty masz problem czy po prostu chcesz żebyśmy tego CSSa za ciebie napisali?
Go to the top of the page
+Quote Post
cbagov
post
Post #9





Grupa: Zarejestrowani
Postów: 181
Pomógł: 18
Dołączył: 19.04.2008

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
Lk_hc
post
Post #10





Grupa: Zarejestrowani
Postów: 36
Pomógł: 1
Dołączył: 12.06.2006

Ostrzeżenie: (0%)
-----

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]

Ten post edytował Lk_hc 31.07.2008, 10:28:47
Go to the top of the page
+Quote Post
piotras9000
post
Post #11





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
pyro
post
Post #12





Grupa: Zarejestrowani
Postów: 2 148
Pomógł: 230
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
-----

Cytat(piotras9000 @ 31.07.2008, 18: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.


Proszę, przeczytaj powyższe (w tym moje) rady, przed następnym postem ^^
Go to the top of the page
+Quote Post
piotras9000
post
Post #13





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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.

Ten post edytował piotras9000 3.08.2008, 16:01:06
Go to the top of the page
+Quote Post
tiraeth
post
Post #14





Grupa: Przyjaciele php.pl
Postów: 1 789
Pomógł: 41
Dołączył: 30.10.2003
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

W atrybutach CSS kolejnego diva (po divie z obrazkiem) daj clear : both - powinno pomóc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
piotras9000
post
Post #15





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 22.08.2007

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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

Ten post edytował piotras9000 4.08.2008, 14:22:55
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.12.2025 - 12:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn