Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 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
 
 Start new topic
Odpowiedzi
Lk_hc
post
Post #2





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

Posty w temacie
- piotras9000   budowa strony   30.07.2008, 20:38:12
- - pyro   Możesz zrobić układ stałej szerokości, lub określa...   30.07.2008, 20:49:22
- - piotras9000   Z tym że mi chodzi o coś takiego jak opi...   30.07.2008, 21:02:47
- - pyro   [HTML] pobierz, plaintext <html><head...   30.07.2008, 21:10:51
- - piotras9000   Mniej więcej wiem o co w tym biega jednak chodzi o...   30.07.2008, 21:23:23
- - pyro   piotras nie wiem jak wtedy to robiles ale to co ci...   30.07.2008, 21:31:56
- - radex_p   ehhhh. Najłatwiej by to było zrobić za pomocą disp...   31.07.2008, 08:22:28
- - Lk_hc   @piotras9000 Tzn. ty masz problem czy po prostu ch...   31.07.2008, 09:01:32
- - cbagov   Projektujesz CMS a stoisz na takim banale i na dod...   31.07.2008, 09:23:19
- - Lk_hc   Szkielet HTML CODE<html> <head> <li...   31.07.2008, 10:12:42
- - piotras9000   No tak tylko tutaj wszystkie komórki są opisane od...   31.07.2008, 17:51:09
|- - pyro   Cytat(piotras9000 @ 31.07.2008, 18:51...   31.07.2008, 18:20:35
- - piotras9000   No i doszedłem do problemu który mi się często pow...   3.08.2008, 16:00:29
- - tiraeth   W atrybutach CSS kolejnego diva (po divie z obrazk...   3.08.2008, 16:26:15
- - piotras9000   Nic.. :/ Problem zawsze się pojawia gdy w div...   4.08.2008, 17:23:09

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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