Colocando 3 divs uno al lado de otro

luisfer91 · #1 (**permalink**) 27/12/2012, 16:03

Muy buenas, Imagino que este tema es un tema que ha sido muy tocado pero llevo buscando por foros y pagina y no he encontrado nada que solucione mi problema.

Veran estoy utilizando el script opensource the osclass para una web de clasificados,
el tema es que tengo 3 botones (registro, log in y publicar ad) que se me ponen uno encima del otro. Soy novato con css y básicamente lo que he hecho ha sido copiar codigo de uno que estaba hecho y pegarlos para todos... looool

Ahora llevo probando y probando cambiando cositas aver si noto algun cambio pero nada! no hay manera, si alguien tiene alguna solución lo agradeceria muchisimo :D sino en cuanto la encuentre (no tengo ni idea de lo que me llevara) la posteare aqui para compartirla por si alguien se encuentra con el mismo problema, para tener una referencia. Bueno este es el codigo css que estoy utilizando:

Código:

/* List & Item Search Row */
.form_publish .search { float:left; width:960px; }
.form_publish .search #expand_advanced { font-size:11px; margin-left:10px;}
.form_publish .search .extras { display:none; }
.form_publish .publish_button { background:#ec4901 url(images/button_link_bg.gif) repeat-x top; border:1px solid #c54f00; float:right; margin:9px 10px 0 0; padding:6px 10px 7px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.form_publish .margin-bottom { margin-bottom: 10px; margin-top: 0px; }
.form_publish .publish_button a { background:url(images/button_link_icon.gif) no-repeat 0 2px; color:#FFF; float:left; padding-left:15px; text-decoration:none; }
.form_publish .publish_button a:hover { text-decoration: underline;}

/* Registrarse */

.form_publish2 .publish_button2 { background:#81c736 url(images/button_link_green_bg.gif) repeat-x top; border:1px solid #7ab53a0; float:right; margin: 9px 10px 0 0; padding:6px 10px 7px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

.form_publish2 .publish_button2 a { color:#FFF; float:left; text-decoration:none; }
.form_publish2 .publish_button2 a:hover { text-decoration: underline;}

/* Conectarse */

.form_publish3 .publish_button3 { background:#008ef9 url(images/button_link_blue.gif) repeat-x top; border:1px solid #0072ed; float:right; margin: 9px 10px 0 0; padding:6px 10px 7px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

.form_publish3 .publish_button3 a { color:#FFF; float:left; text-decoration:none; }
.form_publish3 .publish_button3 a:hover { text-decoration: underline;}

Si necesitan más información para poder ayudarme diganmelo :D Muchas Gracias y Felices Fiestas a todos, perdonad las faltas no me parado a corregir ni poner acentos ejejjeje

ArturoGallegos · #2 (**permalink**) 27/12/2012, 16:11

muestra el html, por lo regular bastaría con aplicar float a los elementos que deseas modificar.

luisfer91 · #3 (**permalink**) 27/12/2012, 16:20

Si voy! Los primeros dos divs estan juntos:

Código:

				<div class="form_publish">
                        <strong class="publish_button3"><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Conectarse', 'modern') ; ?></a></strong>
						</div>
                        <?php if(osc_user_registration_enabled()) { ?>
                            &middot;
                            <div class="form_publish">
							<strong class="publish_button2"><a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Registrate Gratis', 'modern'); ?></a></strong>
							</div>

Después hay lineas de codigo y llega el tercer div:

Código:

       <div class="form_publish">
                <strong class="publish_button"><a href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("P&uacute;blica tu Viaje Gratis", 'modern');?></a></strong>
            </div>

ArturoGallegos · #4 (**permalink**) 27/12/2012, 16:30

1.- coloca todo el código involucrado en esa sección para poder conocer la estructura y darte una solución, de lo contrario solo estaría especulando sobre que son esas lineas de código que dices que hay.

2.- no muestres PHP, visita tu sitio y copia el código que se imprime en el navegador, es decir el código resultante de procesar tu PHP ya que nosotros desconocemos que hace el php y que sera lo que mostrara.

3.- por el código mostrado hasta ahora, solo tienes que aplicar float como ya te lo había mencionado...

Código CSS:

Ver original.form_publish{float:left;}

luisfer91 · #5 (**permalink**) 27/12/2012, 16:44

Okay como me has dicho aqui esta el codigo html:

Te voy a coger ahora los 3 divs que interesan para que no tengas que rebuscar en el codigo, pero de entrada que este todo para que no falte nada :D

Código:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Compartir Viaje La forma más Barata de Viajar</title>
<meta name="title" content="Compartir Viaje La forma más Barata de Viajar">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Fri, Jan 01 1970 00:00:00 GMT">

<link href="http://compartirviaje.tk/oc-content/themes/modern/style.css" rel="stylesheet" type="text/css">
<link href="http://compartirviaje.tk/oc-content/themes/modern/tabs.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    var fileDefaultText = 'No file selected';
    var fileBtnText     = 'Choose File';
</script>
<script type="text/javascript" src="http://compartirviaje.tk/oc-content/themes/modern/js/jquery.js"></script>
<script type="text/javascript" src="http://compartirviaje.tk/oc-content/themes/modern/js/jquery-ui.js"></script>
<script type="text/javascript" src="http://compartirviaje.tk/oc-content/themes/modern/js/jquery.uniform.js"></script>
<script type="text/javascript" src="http://compartirviaje.tk/oc-content/themes/modern/js/tabber-minimized.js"></script>
<script type="text/javascript" src="http://compartirviaje.tk/oc-content/themes/modern/js/global.js"></script>

<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script><!-- Watchlist js --><script type="text/javascript">var watchlist_url = "http://compartirviaje.tk/index.php?page=ajax&action=custom&ajaxfile=watchlist/ajax_watchlist.php" ;</script><script type="text/javascript" src="http://compartirviaje.tk/oc-content/plugins/watchlist/js/watchlist.js"></script><!-- Watchlist js end --><meta name="generator" content="OSClass 3.0.2">        <meta name="robots" content="index, follow">
        <meta name="googlebot" content="index, follow">
    </head>
    <body>
        <!-- container -->
<div class="container">
<!-- header -->
<div id="header">
    <a id="logo" href="http://compartirviaje.tk/"><img border="0" alt="Compartir Viaje La forma más Barata de Viajar" src="http://compartirviaje.tk/oc-content/themes/modern/images/default-logo.jpg"></a>
    <div id="user_menu">
        <ul>
                                                <li class="first">
						
						<div class="form_publish3">
                        <strong class="publish_button3"><a id="login_open" href="http://compartirviaje.tk/index.php?page=login">Conectarse</a></strong>
						</div>
                                                    ·
                            <div class="form_publish2">
							<strong class="publish_button2"><a href="http://compartirviaje.tk/index.php?page=register&amp;action=register">Registrate Gratis</a></strong>
							</div>
							
						
                        					
                        <form id="login" action="http://compartirviaje.tk/index.php" method="post" style="display: none;">
                            <fieldset>
                                <input type="hidden" name="page" value="login">
                                <input type="hidden" name="action" value="login_post">
                                <label for="email">E-mail</label><br>
                                <input id="email" type="text" name="email" value=""><br>
                                <label for="password">Contraseña</label><br>
                                <input id="password" type="password" name="password" value="">                                <p class="checkbox"><input id="remember" type="checkbox" name="remember" value="1"> <label for="rememberMe">Recordar Cuenta</label></p>
                                <div class="button" id="uniform-undefined"><span>Entrar<button type="submit" style="opacity: 0;">Entrar</button></span></div>
                                <div class="forgot">
                                    <a href="http://compartirviaje.tk/index.php?page=login&amp;action=recover">¿Has Olvidado tu Contraseña?</a>
                                </div>
                            </fieldset>
                        </form>
                    </li>
                                                </ul>
                    <div class="form_publish">
                <strong class="publish_button"><a href="http://compartirviaje.tk/index.php?page=item&amp;action=item_add">Pública tu Viaje Gratis</a></strong>
            </div>

Vale aqui esta la parte que interesa:

Código:

<div class="form_publish3">
                        <strong class="publish_button3"><a id="login_open" href="http://compartirviaje.tk/index.php?page=login">Conectarse</a></strong>
						</div>
                                                    ·
                            <div class="form_publish2">
							<strong class="publish_button2"><a href="http://compartirviaje.tk/index.php?page=register&amp;action=register">Registrate Gratis</a></strong>
							</div>
							
						
                        					
                        <form id="login" action="http://compartirviaje.tk/index.php" method="post" style="display: none;">
                            <fieldset>
                                <input type="hidden" name="page" value="login">
                                <input type="hidden" name="action" value="login_post">
                                <label for="email">E-mail</label><br>
                                <input id="email" type="text" name="email" value=""><br>
                                <label for="password">Contraseña</label><br>
                                <input id="password" type="password" name="password" value="">                                <p class="checkbox"><input id="remember" type="checkbox" name="remember" value="1"> <label for="rememberMe">Recordar Cuenta</label></p>
                                <div class="button" id="uniform-undefined"><span>Entrar<button type="submit" style="opacity: 0;">Entrar</button></span></div>
                                <div class="forgot">
                                    <a href="http://compartirviaje.tk/index.php?page=login&amp;action=recover">¿Has Olvidado tu Contraseña?</a>
                                </div>
                            </fieldset>
                        </form>
                    </li>
                                                </ul>
                    <div class="form_publish">
                <strong class="publish_button"><a href="http://compartirviaje.tk/index.php?page=item&amp;action=item_add">Pública tu Viaje Gratis</a></strong>
            </div>

En cuanto a lo que dices del float, en el css el float esta aplicado a right... a no ser que te refieras a que lo ponga dentro del codigo php no entiendo a que te refieres, Gracias por molestarte en contestar e intentar ayudarme :D

luisfer91 · #6 (**permalink**) 27/12/2012, 16:47

Arturo, muchisimas gracias, acabo de hacer lo que me has dicho y ya lo he solucionado, tenias razon tan simple como eso y yo complicandome, he puesto 3 veces el float, solamente el float y ya funciona. Te lo agradezco mucho :D Perdona por marearte, tengo poca experiencia en esto!
Gracias! Felices Fiestas!