Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rogerio.prince

[Resolvido] alinhamento de div

Por , em Desenvolvimento frontend

Recommended Posts

rogerio.prince    0

rogerio.prince
Postado

Pessoal quero fazer o alinhamento de duas divs uma ao lado da outra sendo que as duas já estão dentro de uma div principal.

 

é tipo assim: vou ter uma div com bordas e dentro dela 2 divs, do lado esquedo uma div com um input transparente e do lado direito um submit usando imagem...

 

Problema: o botão(imagem) esta ficando na linha de baixo, ou seja, esta quebrando a linha...

 

MEU CÓDIGO:

 

<style type="text/css">
#geral { 
    width:400px;
    height: 20px;
	position:relative;
	margin:0;
	padding:0px;
	display: block;
	border:1px solid #000000;
	color:#FFF;
	font-weight:700;
	font-style:normal;
	text-decoration:none; padding-left:float; padding-right:float; padding-top:2; padding-bottom:left
} 
#s {
    background-color: transparent; 
    border: 0px none;
}
#1 { 
    float: left;
    width: 350px;
    height: 20px;
    position: relative;
    margin: 0;
    padding: 0px;
}
#2 { 
    float: right;
    width: 50px;
    height: 20px;
    position: relative;
    margin: 0;
    padding: 0px;
} 
</style>

<DIV id=geral>
      <form action="resultado.asp" name="form2" method="post">                               
         <div id=1>
            <input type="text" name="T1" size="20" id="s">
         </div>
         <div id=2>
             <input type="image" src="images/lupa.gif">
         </div>                            
       </FORM>
</DIV>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rogerio.prince    0

rogerio.prince
Postado

obrigado pela atenção, o forum permiti imagem?

 

o curioso é que na edição da pagina eu vejo tudo alinhado certinho, ou seja, input do lado esquerdo e imagem do lado direito, mas na hora de visualizar: quabra a linha e fica campo texto em cima e imagem em baixo tudo do lado esquerdo....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tente assim:

 

*{
	margin: 0;
	padding: 0;
}
#geral { 
    width:400px;
    height: 20px;
    border:1px solid #000000;
    color:#FFF;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
} 
#s {
    background-color: transparent; 
    border: 0px none;
}
#um { 
    float: left;
    width: 350px;
    height: 20px;
	background: red;
}
#dois { 
    float: left;
    width: 50px;
    height: 20px;
	background: blue;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

rogerio.prince    0

rogerio.prince
Postado

Muito obrigado mesmo pela ajuda... Será que posso aproveitar o mesmo tópico para tirar outra duvida?

 

Utilizei o niceform para estilizar um formulario, só que estou tendo problema com relação a alinhamento na exibição entre IE e FIREFOX:

 

Imagem:

Imagem Postada

 

O problema é no primeiro formulario, onde a posição do botão buscar fica direfente de um browse para o outro.

 

código:

 

<div id="container">
    <form action="resultado.asp" class="niceform" id="formulario" name="form1" method="post">
       <label for="textinput">Busca direcionada:</label><br />
       <div class=s1>
           <select size="1" id="regiao" name="regiao" class="width_120"> 
             	<OPTION value="ne" selected>Regiao</OPTION> 
                <OPTION value=2>Opcao1</OPTION>
                <OPTION value=5>Opcao2</OPTION>
                <OPTION value=6>Opcao3</OPTION>          
           </select>
       </div>
       <div class=s2> 
            <select size="1" id="Categoria" name="categoria" class="width_155">
		<OPTION value="0" selected>Categoria</OPTION> 
                   <% while not oRS.eof %>
                <option value="<%= oRS("id_categoria")%>"><%= oRS("descricao")%></option>
                   <% oRS.movenext
                      wend
                   %>
	    </select>
	                           
        </div>
	<INPUT type="submit" value="Buscar">
     </form>
</div>

[b]CSS do NICEFORM:[/b]

/*##########################################
Name: Default styling for Niceforms v.1.0
Author: Lucian Slatineanu
URL: http://www.badboy.ro/
##########################################*/

/*General styles - NOT really related to the forms*/
* {
	margin:0;
	padding:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#404040;
	background:#fff;
}
img {border:0;}
#container {padding:0px;}

/*Forms defaults - change as needed*/
input, textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#404040;
}
label {
	color:#000000;
	cursor:pointer;
	padding-left:2px;
	line-height:14px;
}
label.chosen {color:#333;}

/*Transparent items*/
.outtaHere {
	position:absolute;
	left:-3000px;
}

/*Radio buttons*/
.radioArea, .radioAreaChecked {
	display:block;
	float:left;
	clear:left;
	width:15px;
	height:14px;
	font-size:0;
	cursor:pointer;
}
.radioArea {background:url(images/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(images/radio.gif) no-repeat left bottom;}

/*Checkboxes*/
.checkboxArea, .checkboxAreaChecked {
	display:block;
	float:left;
	clear:left;
	width:13px;
	height:13px;
	font-size:0;
	padding:0;
	margin:0;
	cursor:pointer;
}
.checkboxArea {background:url(images/checkbox.gif) no-repeat left top;}
.checkboxAreaChecked {background:url(images/checkbox.gif) no-repeat left bottom;}
.focused {border:1px dotted #ddd;}

/*Text inputs*/
.textinput, .textinputHovered {
	height:15px;
	background:url(images/input_bg.gif) repeat-x left top;
	border:none;
	padding:4px 0;
	vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
        padding-bottom:0;
	vertical-align:middle;
}

/*Text areas*/
.txtarea .tr, .txtarea .tr_xon {background:url(images/txtarea_tr.gif) no-repeat top right;}
.txtarea .tr_xon {background:url(images/txtarea_tr_xon.gif) no-repeat top right;}
.txtarea img.txt_corner {
	width:5px;
	height:5px;
	display:block;
}
.txtarea .br, .txtarea .br_xon {background:url(images/txtarea_br.gif) no-repeat top right;}
.txtarea .br_xon {background:url(images/txtarea_br_xon.gif) no-repeat top right;}
.txtarea .cntr {background:url(images/txtarea_cntr.gif) repeat-y right top;}
.txtarea .cntr_xon {background:url(images/txtarea_cntr_xon.gif) repeat-y right top;}
.txtarea .cntr_l, .txtarea .cntr_l_xon {
	width:5px;
	background:url(images/txtarea_l.gif) repeat-y left top;
	float:left;
}
.txtarea .cntr_l_xon {background:url(images/txtarea_l_xon.gif) repeat-y left top;}
.txtarea textarea {
	border:0;
	background:none;
	padding:0;
	margin:5px;
}

/*Selects*/
.selectArea {
	width:140px;
	height:21px;
	background:url(images/select_bg.gif) repeat-x left top;
}
.selectArea .left {
	width:8px;
	height:21px;
	float:left;
	background:url(images/select_left.gif) no-repeat left top;
}
.selectArea .right {
	width:21px;
	height:21px;
	float:right;
	background:url(images/select_right.gif) no-repeat left top;
}
.selectArea .right a {
	display:block;
	width:200px;
	height:21px;
	margin-left:-179px;
	position:absolute;
}
.selectArea .right i {display:none;}
.selectArea .center {
	width:160px;
	color:#FFF;
	padding-top:3px;
	overflow:hidden;
	white-space:nowrap;
}

/*Selects drop-down*/
.optionsDivInvisible, .optionsDivVisible {
	position:absolute;
	margin-top:-1px;
	margin-left:3px;
	width:172px;
	background:#6f7074;
	padding:0px;
	font-size:11px;
	z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
	margin:0;
	padding:0;
}
.optionsDivVisible a {
	color:#F2F2F2;
	text-decoration:none;
	display:block;
	padding:1px 4px;
	border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
	color:#FFF;
	background:#5F6062;
	border-color:#cfd0d6;
}
/*Button*/
.buttonSubmit, .buttonSubmitHovered {
	width:auto;
	height:21px;
	color:#6f7074;
	font-weight:bold;
	padding:2px;
	background:url(images/button_bg.gif) repeat-x left top;
	cursor:pointer;
	border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}

/* Acrescentado*/
.s1 {
     float: left;
     position: relative;
     display: inline;
     padding:0px 9px 0px 0px;
}
.s2 {
     float: left;
     position: relative;
     display: inline;
     padding:0px 10px 0px 0px;
}

 

mais uma vez obrigado...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito