Comunidad de diseño web y desarrollo en internet online

Problema con margin

Citar            
MensajeEscrito el 18 Abr 2011 09:01 pm
hola gente, como va?

Te quería hacer una cosnsulta, porque no logro posicionar bien con margin. Por ejemplo, creo un div (llamemosle "botonera") que esta adentro de un div "general" y un div "header". Cuando a "botonera" lo situo a mi gusto con margin, en vez de bajarme ese div, me baja el el header y el contenedor a la posicion que supuestamnte deberia estar "botonera".


Código :

<style>
*{
   margin:0 auto;
   padding:0;
}
html{
   height:100%;
   width:100%;
}


body{
   background-color:#F00;
   height:100%;
   height:100%;
   background-position:top center;
}
#contenedor{
   margin:0 auto;
   width:800px;
   height:500px;
   background-color:#000;
}
#arriba{
   width:100%;
   height:150px;
   background-color:#666;
   position:relative;}
   
#logo{
   position:absolute;
   height:50px;
   width:90px;
   background-color:#F60;
   left: 59px;
   top: 19px;
}
#arriba ul{
   background-color:#F60;
   margin:80px  0 0 250px;
   
   width:280px;
   
}
#arriba ul li {
   display:inline;
   text-decoration:none;
   padding:0 0 0 15px;
   
}

#botonera{
   height:100px;
   width:100px;
   background-color:#a34;
   [b]margin: 30px 0 0 600px;[/b]
}

</style>

</head>

<body>

<div id="contenedor">
      <div id="arriba">
           <a href="logo" id="logo"></a>
<!--
            <ul>
                <li>Home</li>
                <li>Servicios</li>
                <li>Contacto</li>
                <li> About us</li>
              
          </ul>
           -->

         [b] <div id="botonera">[/b]
          
          </div>
        </div>
   
</div>
</body>





Si le saco el margin a a botonera, vuelvo contenedor y arriba a su normalidad.

Por yoelotero

51 de clabLevel



Genero:Masculino  

Programador web.

chrome
Citar            
MensajeEscrito el 20 Abr 2011 12:30 am
hola como estas,

mira hay unos errores leves en tu código como las flechas en tu navegación y las letras b dentro del código css.

Código :

<style>
*{
   margin:0 auto;
   padding:0;
}
html{
   height:100%;
   width:100%;
}


body{
   background-color:#F00;
   height:100%;
   height:100%;
   background-position:top center;
}
#contenedor{
   margin:0 auto;
   width:800px;
   height:500px;
   background-color:#000;
}
#arriba{
   width:100%;
   height:150px;
   background-color:#666;
   position:relative;}
   
#logo{
   position:absolute;
   height:50px;
   width:90px;
   background-color:#F60;
   left: 59px;
   top: 19px;
}
#arriba ul{
   background-color:#F60;
   margin:80px  0 0 250px;
   
   width:280px;
   
}
#arriba ul li {
   display:inline;
   text-decoration:none;
   padding:0 0 0 15px;
   
}

#botonera{
   height:100px;
   width:100px;
   background-color:#a34;
   margin: 300px 0 0 600px;
}

</style>

</head>

<body>

<div id="contenedor">
      <div id="arriba">
           <a href="logo" id="logo"></a>

            <ul>
                <li>Home</li>
                <li>Servicios</li>
                <li>Contacto</li>
                <li> About us</li>
              
          </ul>
        

         [b] <div id="botonera">[/b]
          
          </div>
        </div>
   
</div>
</body>


espero haberte ayudado ;)

Por armijo

8 de clabLevel



 

chrome
Citar            
MensajeEscrito el 20 Abr 2011 11:37 pm
la negrita en realidad la puse porque queria remarcarlo en este post jaja.

y la linea de codigo son las flechas, no los inclui.

Por yoelotero

51 de clabLevel



Genero:Masculino  

Programador web.

chrome
Citar            
MensajeEscrito el 21 Abr 2011 03:12 am
muy bien te entiendo, ahí probé tu código y solo quitando lo que te dije en la respuesta anterior se logra que el margen lo puedas usar a tu gusto en el div que querías.

Ahí prueba el código que te dejé.

Por armijo

8 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 Abr 2011 06:43 pm
No utilices márgenes para situarlos así...

Utiliza "float: " ya sea left o right... y así según su espacio se irán ubicando y te apoyas con los márgenes...

verás, si colocas "margin: 30px 0 0 600px" <- todos esos 600 pixeles de la izquierda a la derecha, van a quedan inhabilitados si no le colocas el float.

Por MmO

1078 de clabLevel

4 tutoriales

Genero:Masculino  

Marketing interactivo y gestión de proyecto de software.

safari
Citar            
MensajeEscrito el 22 Abr 2011 01:19 am

MmO escribió:

No utilices márgenes para situarlos así...

Utiliza "float: " ya sea left o right... y así según su espacio se irán ubicando y te apoyas con los márgenes...

verás, si colocas "margin: 30px 0 0 600px" <- todos esos 600 pixeles de la izquierda a la derecha, van a quedan inhabilitados si no le colocas el float.



Mmo como va? pasa que no quiero usar Float porque queria programar algo con jquery, donde necesito que un bloque contenedor se deslice hacia abajo. No se si me explico...
En un bloque llamemosle "medio" div medio, podria 1 boton que si apretas con jquery empieza a aparecer un div que esta oculto y moveria al footer, si lo hago con float, no lo podria hacer. si lo hago con absolute tampoco, tengo que pocionar todo con margin, padding y positon relative,

pero ustedes saben bien que los divs son elementos de bloque, y si quiero poner mas de 3 divs en el mismo eje x deberia pasarlo a inline pero tampoco es lo que busco ya que me limita un poco.

Mi problema viene cuando necesito que el medio crezca de alto, porque si hago desaparecer el bloque que iria oculto, y pongo a los botones floats, el bloque al estar en height: auto; desapareceria. Ya que con los floats no estarian por asidecir adentro del bloque.


Seguramente los re maríe, pero espero que me hayan entendido. Es algo muy interesante que les podria servir a muchisima gente del foro para hacer una pagina bien dinamica.


Un saludo

Por yoelotero

51 de clabLevel



Genero:Masculino  

Programador web.

chrome
Citar            
MensajeEscrito el 26 Abr 2011 10:48 pm
En primer lugar a tu linea del código css debes quitarle [ b ] y [ / b ], para que así margin respete los valores que le estas indicando.

Y por otro lado, para que puedas mover tu div en el lugar que desees, debes indicar en tu código css los 0px.

Así como lo asignas, tu div tedran un margen top y bottom de 90px, y left y right de 600 px.

Tu código quedaría así:

#botonera{
height:100px;
width:100px;
background-color:#a34;
margin: 30px 0px 0px 600px;
}

Por Inés Guadalupe

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Abr 2011 02:43 am
Emm no @Inés, cuando el valor es 0 no importa la unidad..

@yoelotero pon una imagen de lo que quieres lograr y otra de como te sale

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 27 Abr 2011 05:42 pm

Por yoelotero

51 de clabLevel



Genero:Masculino  

Programador web.

chrome
Citar            
MensajeEscrito el 27 Abr 2011 05:44 pm

Por yoelotero

51 de clabLevel



Genero:Masculino  

Programador web.

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.