Visualizzazione risultati 1 fino 1 di 1

Discussione: CSS: due elementi sulla stessa linea allineati all'opposto!

  1. #1
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito 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
    Grazie anticipatamente, DarkWolf
    -
    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
    Per la posizione (margin bottom?)
    -
    Edit!
    Ho risolto alla grande
    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
    Adesso è perfetto!
    Ultima modifica di darkwolf : 19-03-2008 alle ore 17.10.09

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •