CSS: due elementi sulla stessa linea allineati all'opposto!
salve ragazzi!
temo che il titolo non sia abbastanza chiaro ma non so bene come spiegarlo quindi scusate anticipatamente.
Se date un occhiata al mio forum vedrete il alto il mio logo ed il banner di altervista.
Vorrei far si che rimangano in quella posizione però il logo allineato a sinistra e il banner a destra (per le risoluzioni superiori a 1024).
Ho già fatto qualche prova ma con scarsi risultati.
Questo è il codice che c'è adesso:
Codice:
echo ' <a href="http://www.simplemachines.org/"> <img src="', $settings['images_url'], '/smflogo.gif" style="width: 250px; float: ', !$context['right_to_left'] ? 'right' : 'left', ';" alt="Powered by SMF 1.1.4" title="Powered by SMF 1.1.4" /></a>';
if (empty($settings['header_logo_url']))
echo ' <span style="font-family: Georgia, sans-serif; font-size: xx-large;">', $context['forum_name'], '</span>';
else
echo ' <a href="http://darkwolf.altervista.org/forum/index.php"> <img src="', $settings['header_logo_url'], '" alt="', $context['forum_name'], '" title="', $context['forum_name'], '" border="0" /></a>';
Semplicemente invece del logo smf vorrei mostrare il banner medio ma nonostante le prove fatte non va come vorrei.
Potete darmi una mano?
Ho l'ftp aperto quindi possiamo fare insieme le prove al volo :wink:
Grazie anticipatamente, DarkWolf :top:
-
Edit:
ce l'ho quasi fatta!
css:
Codice:
/* Logo & Banner */
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
position: relative;
text-align: center;
width: 100%;
}
Codice:
Codice:
echo '
<div class="line">
<span class="left">
<a href="http://darkwolf.altervista.org/forum/index.php">
<img src="', $settings['header_logo_url'], '" alt="', $context['forum_name'], '" title="', $context['forum_name'], '" border="0" /></a></span>
<span class="right">
<script type="text/javascript" src="http://darkwolf.altervista.org/script/banner_m.js"></script>
<noscript>
<img src="http://darkwolf.altervista.org/img/java/java_m.gif" border="0" alt="Please enable Javascipt" title="Please enable Javascipt" />
</noscript></span></div>';
solo che viene ricoperto dai blocchi di sotto.
Comunque adesso la posizione è perfetta con tutti i browser quindi è quasi perfetto :lol:
Per la posizione (margin bottom?)
-
Edit!
Ho risolto alla grande :lol:
scrivo come che potrebbe sempre tornare utile:
Codice:
/* Logo & Banner */
div.left {
position: absolute;
left: 0;
}
div.right {
position: absolute;
right: 0;
}
div.line {
position: relative;
padding-bottom: 65px;
text-align: center;
width: 100%;
}
e
Codice:
echo '
<div class="line">
<div class="left">
<a href="http://darkwolf.altervista.org/forum/index.php">
<img src="', $settings['header_logo_url'], '" alt="', $context['forum_name'], '" title="', $context['forum_name'], '" border="0" /></a></div>
<div class="right">
<script type="text/javascript" src="http://darkwolf.altervista.org/script/banner_m.js"></script>
<noscript><img src="http://darkwolf.altervista.org/img/java/java_m.gif" border="0" alt="Please enable Javascipt" title="Please enable Javascipt" />
</noscript></div></div>';
Ho usato tutti "div" invece di "span" in quanto il tag "noscript" dentro "span" dava un errore nella validazione :wink:
Adesso è perfetto! :top:
