Autor Zpráva
rorsach
Profil
#1 · Zasláno: 23. 3. 2011, 04:48:23
Odpovědět Citovat
Ahoj,

sice jsem tady našel, že už se to řešilo, ale nějak nejsme schopen to dát dohromady s mým konkrétním příkladem. Vytvářím v Dreamweaveru (DW) šablonu podle Grid960 12column. Vše by bylo ok, ale chci docílit toho, aby mi stále fungovalo hezké pozadí nehledě na velikost stránky, která se samoz. mění podle množství kontentu (V Joomle).
Prodlužování stránky jsem vyřešil jednoduše a to, že do posouvajícího se footeru vložím řezy z pozadí a přechod mezi hýbajícím se footerem a contentem proložím asi 5 px "spojovníkem"s repeat-y.
Tedy fixní vrh-> spojovník 5px repeat-y -> fixní spodek. To je ok.


Ale teď bych potřeboval vyřešit druhou stranu, a to aby se mi stránka při načtení otevřela natvrdo v určité minimální velikosti. Říkal jsem si, že by to mohl někde ve CSSku vyřešit "min-height" či jak, ale nějak se v tom neorientuji. CSSko je definované dle gridu, takže to mám "container_12.
Těžko se to vysvětluje, zkusím ukázku.

1. Statický obrázek na pozadí (teda rozřezaný atd. atd. ale prostě jeden celistvý na oko)
2. Můj "posunovník s parametrem" repeate-y"
3. Statický obrázek na pozadí (teda rozřezaný atd. atd. ale prostě jeden celistvý na oko)

ER (error :-) )
A zde se mi podle kontentu mění výška. Jak říkám s prodloužením problém nemám a ani bych nejradši nenastavoval pevnou délku), ale jak vyřešit zmenšení, to babo raď.

Na webu to zatím není nikde. Díky za každou radu ;-)
panther
Profil
#2 · Zasláno: 24. 3. 2011, 14:52:15
Odpovědět Citovat
rorsach:
uvedený odkaz nefunguje.

„Na webu to zatím není nikde.“
tak to někam dej. Na nastavení minimální výšky slouží skutečně min-height, příp. height pro starší IE.
rorsach
Profil
#3 · Zasláno: 25. 3. 2011, 00:05:24 · Upravil/a: rorsach
Odpovědět Citovat
3
rorsach
Profil
#4 · Zasláno: 25. 3. 2011, 00:07:04
Odpovědět Citovat
Omlouvám se za odkaz, omylem jem ho smazal.

Zde je to jako obrázek (live verze není zatím)

Tedy číslo I. je content, číslo 2 je proužek, který jsem zamýšlel opakovat jako repat-y, ale asi ot nepujde a číslo III. je footer.

Tak i moje snaha s proužkem (číslo II.) taky selhala. Teď už opravdu netuším, jak to udělat, abych zachoval normální obrázek bez posunování kvůli kontentu. Když bude nejhůř pokusím se nějak nastavit ten min-height a nastyluju scroller. ideální by bylo zachovat schopnost prodlužování, ale nepřijít o obrázek.
Díky za každou radu
panther
Profil
#5 · Zasláno: 25. 3. 2011, 14:36:23
Odpovědět Citovat
rorsach:
„číslo 2 je proužek, který jsem zamýšlel opakovat jako repat-y“
to je jistě správná úvaha, z jakého důvodu nevyšla?


Schématicky:
<div style=background - repeat-y>
     <div style=background A left top no-repeat>OBSAH</div>
</div>
rorsach
Profil
#6 · Zasláno: 25. 3. 2011, 15:33:47
Odpovědět Citovat
No vlastně ještě nevím, jestli nevyšla. Budu to cpát do Joomly a nejsem si ještě zcela jist, jeslti budu schopen to tak nějak nacpat. Ikdyž teď, když o tom přemýšlím, tak by to mělo být asi teoreticky jedno, když je to prostě tabulka.
panther
Profil
#7 · Zasláno: 25. 3. 2011, 15:35:56
Odpovědět Citovat
rorsach:
nevím, jaký by měl být problém s Joomlou - do Joomly cpeš HTML, které si připravíš, ta si nic sama od sebe negeneruje ani nvymýšlí. Druhá věc je umět s Joomlou efektivně zacházet, to však příliš s HTML kódem nesouvisí.

„by to mělo být asi teoreticky jedno, když je to prostě tabulka.“
žádná tabulka nikde není. Nebo ty jí snad někde vidíš?
rorsach
Profil
#8 · Zasláno: 25. 3. 2011, 16:49:34
Odpovědět Citovat
Já bych řekl, že se v Joomle celkem vyznám. Alespoň myslím (ikdyž šablony jsem dělal v Artisteeru a až teď nově všechno "hand made" a trochu v tom plavu.
Teď tam tabulka není, ale já dělám design v Photoshopu a poté ho překopnu do PHP. Nacpu do určitých tabulek jednotlivé muduly a komponenty, přičemž tabulka s "contentem" se bude měnit.
Možná jsem jen blbě pochopil, co jsi psal. To pozadí mám generované z tabulek napozicovaných v CSSku. Takže by to vlastně nemělo mít vliv na Joomlu jako takovou. Pokud se obsah změní a tránka se prodlouží, roztáhne se mi tabulka a vté bych měl mít to repeat-y. Chápu to dobře ne?
panther
Profil
#9 · Zasláno: 25. 3. 2011, 17:13:01 · Upravil/a: panther
Odpovědět Citovat
rorsach:
„roztáhne se mi tabulka a vté bych měl mít to repeat-y“
nevím, co myslíš tabulkou. Pro mě je tabulka <table>, tu tam ty mít nepotřebuješ. Tedy, pokud se nepokoušíš o tabulkový layout, který bych ti nedoporučoval.

Layouty se dají hrubě podělit asi následovně:
- rámy
- tabulkové (o tomhle teď, zdá se mi, přemýšlíš. Nedoporučuji.)
- beztabulkové
- - pozicovaný (tento jsi nechtěl, to ti schvaluju)
- - floatovaný (tenhle jsem naznačoval celou dobu já)
rorsach
Profil
#10 · Zasláno: 25. 3. 2011, 18:37:10 · Upravil/a: rorsach
Odpovědět Citovat
Je mi jasné, že floatovaný je nej, ale ten jsem se ještě nenaučil. Budu se ho muset naučit, ale to chce čas. V tuhle chvíli budu skutečně využívat tabulkový. Dělám to s tím gridem960. Takže layout vyskládám z tabulek nadefinovaných CSSkem. Resp. je to moje první šablona takhle, tak jsem zmatenej krapet. Zkusím se zeptat jednodušeji, mmt. dám jednoduchej příklad dohromady.
rorsach
Profil
#11 · Zasláno: 25. 3. 2011, 19:54:00
Odpovědět Citovat
Vezmu to jednoduše a postupně. Případní "helpeři" ať na mne prosím nekřičí :-)

příklad pro horní první modulovou oblast
CSS: 
top {
	position:absolute;
	left:0px;
	top:0px;
	width:940px;
	height:250px;
}

HTML: 
<div id="top">
		<img id="top" src="images/top.jpg" width="940" height="250" alt="" />
</div>

PHP Joomla (tím by se myslím měl načíst styl z CSSka a umístění a velikost díky definovanému Gridu: 
<div id="top" class="grid_12">
<jdoc:include type="modules" name="top" />
</div>


Definice Gridu jako taková: 
.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.
grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_
10,.grid_11,.grid_12,.grid_12 {
display:inline;
float:left;
position:relative;
margin-left:10px;
}
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940


Celý zápis: 
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );	

// build the full path to the template files
$templatePath = $this->baseurl.'/templates/'.$this->template; // template path

// get the site name
$config =& JFactory::getConfig();
$siteName = $config->getValue('config.sitename');

// determine which positions we want to show
$showRightPosition  = $this->countModules('right');
$showTopPosition    = $this->countModules('top');
$showUser1User2User3Positions = $this->countModules('user1 or user2 or user3');
$showUser1Position  = $this->countModules('user1');
$showUser2Position  = $this->countModules('user2');
$showUser3Position  = $this->countModules('user3');
$showUser4Position  = $this->countModules('user4');

// calculate column widths of positions left, component and right
$leftPositionWidth  = $this->params->get('leftPositionWidth',  3);
$rightPositionWidth = $this->params->get('rightPositionWidth', 3);
$componentWidth     = 12 - $leftPositionWidth - ($showRightPosition ? $rightPositionWidth : 0);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
<head>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html;<?php echo _ISO; ?>" />
<link rel="stylesheet" href="<?php echo $templatePath; ?>/css/template_css.css" type="text/css" />
</head>

<body>
	<div class="container_12">
		            <h1>
            <?php echo $siteName; ?></h1>
   	  </div>
        <div class="clear"></div>

        <?php if ($showTopPosition) : ?>
        <div id="top"  class="grid_12">
            <jdoc:include type="modules" name="top" style="box" />
        </div>
        <div class="clear"></div>
        <?php endif; ?>


Tím bych měl docílit, že se jako první zobrazí 940px široká(class="grid12") modulová oblast, která bude mít vzhled z CCska(id: header) a bude zobrazovat vše, co Joomle zadám do pozice "top" v nastavení modulů.

Pokud se pletu budu vděčný za nakopnutí.

Otázka ale zní, jak docílit vzhledu mimo tuto oblast, jelikož mi díky Gridu požadovaně vzniknou mezery 10px.

Zná- li někdo jednodušší způsob- sem s ním :-)
panther
Profil
#12 · Zasláno: 26. 3. 2011, 00:14:50 · Upravil/a: panther
Odpovědět Citovat
rorsach:
nemůžu si pomoct, ale nechápu, na co potřebuješ milion indexovaných gridů. To začátečník narazil na něco, co mu mělo zůstat ještě pár let skryto.

Tohle je jedno- nebo max. dvousloupcový layout, nevím, co vymýšlíš za složitosti.
rorsach
Profil
#13 · Zasláno: 26. 3. 2011, 12:38:51 · Upravil/a: rorsach
Odpovědět Citovat
Jo, přesně to jsem chtěl. Hned vím jak na to. To se snaží radit někdo, kdo se v tom gridu zjevně neorientuje. Vzhledem k tomu, že Grid960 je řízen scriptem, je nunté do šablony Joomla 1.6 takhle vkládat.
Omlouvám se a příště zkusím třeba poradnu lásky. Pohled by také mohl být takový, že se někdo zetal i na něco složitějšího, než jak udělat odkaz, nebo obarvit tabulku.

Třeba mám důvod, proč ten grid takhle využívám. A ano, snažím se ten Grid pořádně naučit. Kupodivu jsem se s tím nenarodil. Navíc je to založené na oficiálním tutoriálu pro Joomla Tepmltae 1.6.

Všechno jsem sem nenapsal. Počítám samoz. s úpravou i xml atd. Jde jen o přehled.
Časová prodleva: 13 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0