posizionamento logo su drupal via css

[pazoozoo]

Salve,

non sono molto pratico con i css, in verità sviluppo per web tranne quel che riguarda la grafica e stile dell'applicativo web, e ho un problema di posizionamento del logo su un'installazione Drupal6.13.

<div id="header">
<div class="description" style="float: left"><?php print $hsx ?></div>
<div class="description" style="float: right"><?php print $hdx ?></div>
<div id="headerimg">
<a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"
style="display: block; position: relative; top: -40%; left: 15%; width: 0%; height: 0px">
<?php
print '<h1>[img]'. check_url($logo) .'[/img]</h1>';
?>
</a>
</div>
</div>

qua ho postato parte della struttura xhtml e parte dello stile inserito (in fase di sviluppo). l'header dell'applicativo ha due regioni inserite ai lati dello stesso, mentre in centro volevo posizionare il logo.
il logo è caricato dal tag img, contenuto in un <h1> che a sua volta è contenuto da un link, il cui tag ha il seguente style="display: block; position: relative; top: -40%; left: 15%; width: 0%; height: 0px"
width e height hanno 0% in modo tale da far apparire la cornice tratteggiata (quando si clicca su un link) risulti grande tanto quanto l'immagine.

accade che al variare della risoluzione, il logo cambia di posizione all'interno dell'header. inoltre, facendo delle prove cliccando, il logo cambia di posizione arbitrariamente, posizionandosi più in basso del previsto.

esiste un modo per poterlo posizionare via css in modo tale che resti sempre nella medesima posizione al variare di browser, pc e risoluzione?

ho cercato di postare solamente il codice da me ritenuto utile; qualora risultasse insufficiente, basta chiedere ciò che vi serve, che io lo posterò. lo stesso vale per la mia breve spiegazione del problema.

grazie ^^

[LùcazStrict]

ciao
io setterei il div contenitore (headerimg) con posizionamento relative, e il link con posizionamento assoluto, in questa maniera la sua posizione dovrebbe dipendere dal suo contenitore

[pazoozoo]

ciao,

a headerimg che valori do ti top e left?

[LùcazStrict]

beh se è posizionato in modo corretto li puoi anche omettere.
piuttosto dovrai assegnare top e left al link una volta che è in posizionamento assoluto

[pazoozoo]

mmm ho provato ma i link contenuti dentro $hdx non funzionano più (e non so perchè).
un modo per semplificare questa struttura?

[LùcazStrict]

mmm direi che potresti fare: (ometto il codice php di cui non capisco una fava)

<div id="header" style="position:relative">
  <div class="description" style="float: left"></div>
  <div class="description" style="float: right"></div>
  <div id="headerimg" style="position:absolute;top:10px;left:10px;">
    [img]'url'[/img]
  </div>
</div>

[pazoozoo]

...
<div id="header" style="position:relative">
<div class="description" style="float: left">
<div id="block-mtcm-4" class="block block-mtcm">
<div class="content">[img][/img]</div>
</div>
</div>
<div class="description" style="float: right">
<div id="block-mtcm-1" class="block block-mtcm">
<div class="content">[img][/img]</div>
</div>
<div id="block-mtcm-2" class="block block-mtcm">
<div class="content">[img][/img]</div>
</div>
<div id="block-mtcm-3" class="block block-mtcm">
<div class="content">[img][/img]</div>
</div>
</div>
<div id="headerimg" style="position:absolute;top:10px;left:150px;">
[img][/img]
</div>
</div>
...

risultato della pagina, i link in <div class="description" style="float: right"> non funzionano ancora...

help...

[pazoozoo]

dal css riporto:

#header {
background: #81bd01 url('images/kubrickheader.jpg') no-repeat bottom center;
}

#headerimg {
margin: 7px 9px 0;
height: 314px;
width: 994px;
}

[ricman]

Finchè usi position:relative (che non importerebbe neanche specificare) va bene. Però sul codice (tuo primo post) applichi il "top" e il "left" che sono rompico***oni. Inoltre li hai messi in percentuale... ancora peggio.

[pazoozoo]

<div class="description" id="hsx"><?php print $hsx ?></div>
    <div class="description" id="hdx"><?php print $hdx ?></div>
    <div id="headerimg">
       <div id="logo">
           <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>">
               <?php print '[img]'. $logo .'[/img]' ?>
           </a>           
       </div>
        <?php
        if (!file_exists($logo2)) {
                  print '<div class="description">'. $site_slogan. '</div>';
              }
           ?>
    </div>

#hsx {
float: left;
}
#hdx {
float: right;
}
#logo {
position: relative;
top: 15px;
left: 58px;
border: 0;
display: inline;
}
#h1 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
font-size: 4em;
text-align: center;
text-decoration: none;
color: white;
}

ho risolto così... e provando con diversi pc funziona.

grazie ^^