[RISOLTO][68portal] vorrei riuscire ad annidare i div nell'HEADER

[nirovi]

vorrei mettere un banner a sx un logo al centro ed un banner sulla dx
Le ho provate tutte ma non ci sto riuscendo. E' una soluzione fattibile opppure è impossibile?
layout.css

Codice: [Seleziona]


/* header

****************************/

div#header

{ height: 90px; font-size: 0.85em; line-height: 155%; border-bottom: 1px solid #fff; position: relative; }



div#header div#topmod

{ height: 90px; width: 120px; /*float: left;*/ position: absolute; top: 0; left: 0; background: #ffffff; overflow: auto; }



div#header div#topmod .article_separator

{ display: none; }



/* module layout -> template_css.css */
/*{ position: relative; left: 121px; margin: 0 121px 0 0; height: 90px; background: url(../images/header-image.png) left 0 no-repeat; }*/
div#header div#image

{ position: relative; left: 121px; margin: 0 121px 0 0; height: 90px; background: url(../images/header-image.png) left 0 no-repeat; }






div#header div#image h2#slogan

{ position: absolute; right: 10px; bottom: 5px; margin: 0; color: #fff; font-size: 1.3em; letter-spacing: 0.05em; font-family:  Arial, Trebuchet MS, Verdana, Geneva, Helvetica, sans-serif }
index.php

Codice: [Seleziona]

    <div id="page-r">



       



        <!-- header -->

        <div id="header">



            <!-- topmodule -->

            <div id="topmod" <?php if ($this->params->get('topmodule') == 'welcome') : ?>class="welcome"<?php endif; ?>>



                <?php if ($this->params->get('topmodule') == 'module') : ?>

                <jdoc:include type="modules" name="top" style="68portal_left" />

                <?php endif; ?>



                <?php if ($this->params->get('topmodule') == 'welcome') : ?>

               
<div  class="moduletable">

                <?php if ($this->params->get('welcomehead') != '') : ?>

                    <h3 class="welcome_heading">

                        <?php echo $this->params->get('welcomehead'); ?>

                    </h3>

                    <?php endif;

                    if ($this->params->get('welcometext') != '') : ?>

                    <p class="welcome_text">

                        <?php echo $this->params->get('welcometext'); ?>

                    </p>

                    <?php endif; ?>

                </div>

                <?php endif; ?>



            </div>

            <!-- //topmodule -->



            <!-- headerimage -->



            <div  id="image">

                <?php if ($this->params->get('slogan') != '') : ?>

                <h2 id="slogan">

                    <?php echo $this->params->get('slogan'); ?>

                </h2>

                <?php endif; ?>



<?php middleBody(); ?>



        <!-- content -->

        <div id="content">



            <?php if($this->countModules('left')) : ?>

            <!-- left sidebar -->

            <div id="left-sidebar">

                <jdoc:include type="modules" name="left" style="68portal_left" />

            </div>

            <!-- //left sidebar -->

            <?php endif; ?>

<!-- top header -->

        <div id="top-header">

            <!-- codice logo -->



            <jdoc:include type="modules" name="user3" />

           

        </div>

[conti1]

ciao


posta il link del sito o almeno dire il template che usi ,
x fare quel che dici mettere 3 div orizzontali
 devi creare
oltre al logo gia esistente altri 2 posizioni con i suii rispettivi id  e poi col css dai fload :left a tutti e tre .
oppure crei una tabella di 3 posizioni

[nirovi]

Il template che uso è 68portal, il sito non è ancora online. Proverò la soluzione che mi ha delineato. Con esattezza sapresti indicarmi nel codice dove andare a modificare grz1000

[conti1]

ma dove di preciso ?
in cima al template dove c'è la scritta 68portal
se li vuoi mettere li vedi che hai sulla tua destra anche un user3 che e quello del menu

,oppure sotto dove c'è l'immagine con le nuvole?

[nirovi]

dove c'è l'immagine con le nuvole, praticamente vorrei che ci fosse:

• un modulo banner a dx
• un immagine al centro
• un modulo banner a sx

in modo tale che chi visualizza il sito in base alle risoluzioni del proprio schermo possa vedere sempre tutto senza che appaiano le scroll bar per interderci e che non ci sia spazio bianco tra le tre posizioni.

[nirovi]

Il codice è il seguente:

[conti1]

ciao
allora inserisci il codice come lo vedi nel punto esatto del tuo index
confrontato con il tuo e vedrai che il pezzo che ho aggiunto a te manca e lo metti i quel punto

Codice: [Seleziona]

  <!-- headerimage -->
            <div id="image">
                <?php if ($this->params->get('slogan') != '') : ?>
                <table width="100%" border="0" cellspacing="0">
                  <tr>
                   <!-- header banner logo banner1 -->
                    <td width="" valign="top"><div id="banner">
                      <jdoc:include type="modules" name="banner" style="none" />
                    </div></td>
                    <td width="" valign="top" bordercolor="0"><div id="logo">
                      <jdoc:include type="modules" name="logo" style="none" />
                    </div></td>
                    <td width="" valign="top"><div id="banner1">
                      <jdoc:include type="modules" name="banner1" style="none" />
                    </div></td>
                  </tr>
                </table>
                <!-- fine header banner logo banner1 -->
<h2 id="slogan">
poi devi aggiungere il css
nel template.css  ci metti questo poi lo modifichi a tuo piacimento

Codice: [Seleziona]

div#banner{
height:118px;
}

#banner1 {
height:118px;
}

div#logo {
height:118px;
}
in questo modo hai ancora l'immagine delle nuvole come sfondo  se lo vuoi togliere devi agire nel css e elimini l'immagine.

i 3 moduli aggiunti  non anno larghezza prendono la larghezza in base a quello che ci metti  se vuoi definire la larghezza dei moduli torni nel html nel punto del codice che hai inserto
e in tutti e 3 i moduli dai la larghezza

vedi che vuoto
width=""

Codice: [Seleziona]

<td width="" valign="top"><div id="banner">
                      <jdoc:include type="modules" name="banner" style="none" />
alla fine apri come editor templateDetails.xml

aggiungi i 3 nomi mancanti

in pratica dovrai avere in questo modo

Codice: [Seleziona]

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
<position>banner</position>
<position>logo</position>
<position>banner1</position>
</positions>ciao ciao

[nirovi]

Vederò di implementare le modifiche il prima possibile, ma quello che mi chiedo è:
i voglio che:

banner di dimensioni 120x90 sia sempre a sx
banner1 di dimensioni 120x90 sia sempre a dx
e che il logo sia sempre al centro
 
In modo tale che se le dimensioni della risoluzioni dello schermo cambiano 800x600 / 1024x768 / 1280x800 ecc tutto resta nella stessa posizione.

[nirovi]

  ok risolto con le tue indicazioni grz mille a buon rendere.

Buon vento.

vn