Foros del Web » Creando para Internet » CSS »

Dudas con cajas flotantes en CSS

Estas en el tema de Dudas con cajas flotantes en CSS en el foro de CSS en Foros del Web. Hola, primero que nada soy nuevo en este foro me registré porque necesito ayuda en una web en la que estoy trabajando. Para comenzar me ...
  #1 (permalink)  
Antiguo 16/07/2014, 12:23
 
Fecha de Ingreso: julio-2014
Ubicación: Madrid
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 0
Dudas con cajas flotantes en CSS

Hola, primero que nada soy nuevo en este foro me registré porque necesito ayuda en una web en la que estoy trabajando.

Para comenzar me descargué un template para empezar a diseñar la Web, sin embargo hay algunas cosas que no me gustan, la web tiene unas cajas flotantes en donde hay texto sin embargo me gustaría poder modificarlas a mi gusto. Unas cajas de texto mas arriba o debajo, dependiendo de la "subpagina" en la que este. Por ejemplo en "Sobre mi" me gustaría poner la caja debajo que puedo lograrlo poniendo margen-top:400px pero eso implica que todas las cajas de todas las subpaginas se pongan así sin embargo solo quiero que la de esa subpagina sea asi.

Os dejo por aquí el codigo HTML y el CSS encargado. Espero vuestra ayuda.

Index.html
Código HTML:
<div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offset-6 templatemo-content-wrapper">
                    <div class="templatemo-content">
                        
                       
                        <section id="home-text" class="active templatemo-content-section">
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <h2>Sobre mi</h2>
                                <p align="left">Ernesto Herrera, director de fotografía, ha trabajado en Encuadra Films y ha contribuido a grandes peliculas como Sudor Frio - 2014.</p>
                            </div>
                        </section><!-- /.home-text --> 
Aquí esta el css:

Código:
/* Credit: http://www.templatemo.com */

body, html { overflow-x: hidden; }

body {
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Raleway', sans-serif;
    font-style: normal; 
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, span, p { font-family: 'Raleway', sans-serif; }

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff; /* change if the mask should have another color then white */
    z-index: 99; /* makes sure it stays on top */
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%; /* centers the loading animation horizontally one the screen */
    top: 50%; /* centers the loading animation vertically one the screen */
    background-image: url(../images/status.gif); /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px; /* is width and height divided by two */
}

/* General */
#main-wrapper {
     overflow: hidden;
}

.templatemo-site-title { 
    color: #fff !important; 
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	font-size: 48px;
}

.templatemo-site-title a, .templatemo-site-title a:hover { 
	color: #fff;
	text-decoration: none;
}

img.slide {
    width: 100%; 
    z-index: -9999999; 
    position: absolute;
}

.active {
    display: block;
}

.inactive {
    left: 703px;
    display: none;
}

.image-section {
    position: fixed;
}

.image-container {
    position: relative;
}

.image-container img {
    position: absolute;
}

.templatemo-content {
    position: static;
    overflow: hidden; 
    margin-top: 36%;
}

.templatemo-content section {
    font-family: 'Raleway', sans-serif;
    position: relative; /*relative */
    overflow: hidden;
    top: 0; 
    background-color: rgba(0,0,0,0.75);
    padding-bottom: 20px;
	margin-top: 400px; /* Caja de texto abajo para primera pagina */
}
.templatemo-content1 section {
    font-family: 'Raleway', sans-serif;
    position: relative; /*relative */
    overflow: hidden;
    top: 0; 
    background-color: rgba(0,0,0,0.75);
    padding-bottom: 20px;
	/*margin-top: 400px; /* Caja de texto abajo para primera pagina */
}


.templatemo-content-wrapper {
    overflow: hidden;
}

.templatemo-content h2 {
    color: #FFF;
    font-family: 'Raleway', sans-serif;
}

.templatemo-content p {
    font-family: 'Raleway', sans-serif;
    color: #FFF;
    font-size: 16px;
}

.menu {
    position: fixed; 
    width: 220px;
    z-index: 1; 
    top: 35px;
}

#menu-list {
    background-color: rgba(0, 0, 0,0.5);
    font-size: 16px; 
    padding: 0;
}

#menu-list > li {
    display: block;
}


#menu-list > li > a {
    font-family: 'Raleway', sans-serif; 
    padding: 10px 0 10px 30px; 
    text-decoration: none; 
    display: block;
    color: #fff; 
}

#menu-list > .active > a,
#menu-list > li > a:hover { 
    background-color: rgba(255,255,255,0.25);
}


#responsive {
    font-size: 16px;
    padding: 0;
    background-color: rgba(0,0,0,0.5);
}

#responsive li {
    display: block;
}

#responsive li a {
    font-family: 'Raleway', sans-serif; 
    color: #fff; 
    text-decoration: none; 
    padding: 10px 0;
    display: block;
}

#responsive > .active > a,
#responsive li a:hover {
    background-color: rgba(0,0,0,0.5);
}

#map-canvas {
	height: 256px;
	margin-bottom: 10px;
}

.templatemo-content {
    padding-bottom: 6%;
}

.footer {
    overflow: hidden; 
    position: fixed; 
    bottom: 10px;
}

.footer-text {
    font-family: 'Raleway', sans-serif; 
    color: #fff; 
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
    margin-left: 30px;
    font-size: 14px;
}

.footer-text a, .footer-text a:hover { 
	color: #fff;
	text-decoration: none;
}

@media (max-width: 991px) {
    .footer {
        overflow:hidden; 
        position:static;
        text-align: center;
        
    }
    .footer-text {
        margin-left: 0;
    }
}
  #2 (permalink)  
Antiguo 16/07/2014, 15:23
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 1 mes
Puntos: 36
Respuesta: Dudas con cajas flotantes en CSS

seria bueno que te expliques de una mejor forma y de ser posible pongas algún diagrama por que la verdad no te entiendo del todo ,
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #3 (permalink)  
Antiguo 16/07/2014, 16:07
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 9 años, 9 meses
Puntos: 30
Respuesta: Dudas con cajas flotantes en CSS

¿Porqué no creas una clase nueva y le asignas "margen-top:400px" solo a esa caja? De esa manera las demás no heredarán el margen.
  #4 (permalink)  
Antiguo 17/07/2014, 11:20
 
Fecha de Ingreso: julio-2014
Ubicación: Madrid
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Dudas con cajas flotantes en CSS

Bueno la verdad es que al final me he rendido y he cogido otro template que va más acorde a lo que en realidad quería, muchas gracías por vuestra ayuda, antes de cerrar el tema, alguna recomendación para poder empezar con esto del CSS y HTML? tengo ciertos conocimientos en C y Java así que no creo que sea tan complicado :P

Un saludo
  #5 (permalink)  
Antiguo 17/07/2014, 14:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Dudas con cajas flotantes en CSS

LibrosWeb es un buen sitio para empezar.

Etiquetas: background, cajas, color, dudas, flotantes, hover, html, responsive, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:58.