Problema en CSS

fercalbla #1 Mar '13 Penitente

Hola sabios mediavideros, tengo un problemilla en CSS, ya que nunca se me ha dado bien esto y estoy empezando a utilizar poco a poco estoy quebrandome la cabeza por esto:
A ver, he hecho un CSS en con dos barras (superior e inferior) y un elemento central, al ajustarlo para que ocupe toda la pantalla pongo todos los elementos en 'position: fixed' pero claro, el problema viene a ser que el elemento central se queda por encima de la barra superior, pero si cambio la barra superior a 'position: relative' se queda bien el elemento central pero no se ajusta a la pantalla. ¿Soluciones?
Croquis:

spoiler

Código HTML:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>Test</title>
	</head>
	<body>
		<div class="upperbar">
			<p>Test</p>
		</div>
		<div class="divcentral">

	</div>
	<div class="lowerbar">
		
	</div>
</body>
</html>

Código CSS:

.upperbar {
	border: 1px solid black;
	width: 100%;
	height: 32px;
	position: fixed;
	top: 0;
    left: 0;
}

.upperbar p {
	color: #00000;
	vertical-align: middle; 
	text-align: center;
	font-size:20px;
	margin: auto;
}

.divcentral {
	border: 1px solid black;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
}

.lowerbar {
	border: 1px solid black;
	width: 100%;
	height: 32px;
	position: fixed;
	bottom: 0;
    left: 0;
}

HeXaN #2 Mar '13

¿Has probado a envolverlos en otro DIV y ponerles un float:left? A lo mejor sirve y todo xD

B

[Borrado] #3 Mar '13

Prueba con esto

	
	.upperbar {
        border: 1px solid black;
        width: 100%;
        height: 32px;
        position: relative;

}

.upperbar p {
        color: #00000 ;
        vertical-align: middle; 
        text-align: center;
        font-size:20px;
        margin: auto;
}

.divcentral {
	border: 1px solid black;
	height: 100%;
	width: 100%;
        position: fixed;
}

.lowerbar {
        border: 1px solid black;
        width: 100%;
        height: 32px;
        position:absolute;
        bottom:0px;
}

eXtreM3 #4 Mar '13

Ponle position relative a divcentral y margin-top equivalente a la altura de la cabecera.

TeNSHi #5 Mar '13

Es esto lo que quieres? y yo no usaría height, jugaría un poco con el padding:

http://jsfiddle.net/jk2AX/

orion295 #6 Mar '13

Suscribo la solución de eXtreM3. Yo también te recomiendo que hagas eso.

El problema de esta solución es que si mantienes la línea de borde para los tres divs, la página va a tener una anchura de 100% de la pantalla + 2px, de forma que te aparecerá un scroll horizontal.
Esto lo puedes arreglar de varias formas:
Opción A:
Eliminas la barra de navegación horizontal:

body { overflow-x:hidden}

Opción B:
Maquetas sin líneas de borde

Opción C:
Define una anchura del 99% en lugar del 100%, de forma que da un resultado similar.

Aun así, aplicaría un reset CSS para poder maquetar de una forma más cómoda.

* { margin:0; padding:0}

Otro consejo es que no maquetes con bloques que tengan una línea de borde, sino con bloques que estén coloreados.

fercalbla #7 Mar '13 Penitente

Bueno, os dejo el nuevo código, parece haberse resuelto pero hay algo que sigue sin funcionar:
Tengo unas imagenes que van rotando en el centro y no aparecen ahora.
CSS:

* { 
	margin: 0; 
	padding: 0;
}

body {
	background: #000000;
}

.upperbar {
	background: #014464;  

	background: -moz-linear-gradient(top, #0272a7, #013953);  

	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); 
	width: 100%;
	height: 32px;
	position: fixed;
	margin: auto;
	top: 0;
    left: 0;
}

.upperbar p {
	font-family: "Brush Script Std";
	src: url("fonts/BrushScriptStd.ttf") format("truetype");
	color: #FFFFFF;
	vertical-align: middle; 
	text-align: center;
	font-size: 20px;
	margin: auto;
}

.images {
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	margin: auto;
	margin-top: 32px;
}

.rotating-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.lowerbar {
	background: #014464;  

	background: -moz-linear-gradient(top, #013953, #0272a7);  

	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#013953), to(#0272a7)); 
	width: 100%;
	height: 32px;
	position: fixed;
	margin: auto;
	bottom: 0;
    left: 0;
}

HTML:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type='text/javascript' src='js/rotator.js'></script>	
		<title>Test</title>
	</head>
	<body>
		<div class="upperbar">
			<p>Test</p>
		</div>
		<div class="images">
			<img class="rotating-image" src="images/1.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/2.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/3.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/4.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/5.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/6.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/7.jpg" width="100%" height="100%" />
			<img class="rotating-image" src="images/8.jpg" width="100%" height="100%" />
		</div>
		<div class="lowerbar">
			
	</div>
</body>
</html>

orion295 #8 Mar '13

No se cómo tendrás hecho el javascript rotator.js, pero en los estilos css tienes definida la class de las imágenes con display none.

.rotating-image { display: none;

Imagino que será eso, sino tendrás que subir los archivos js para poder ver la página completa que tienes.

1 respuesta

fercalbla #9 Mar '13 Penitente

#8 Lo he arreglado, he puesto images en fixed y ya funciona. :epicfacepalm:

Gracias sabios mediavideros, podeis chapar.

1 respuesta

eXtreM3 #10 Mar '13

#9 no uses fixed salvo casos específicos en los que quieres que el elemento quede fijo pase lo que pase. En tu caso tiene pinta de ser más un relative (y el 99% de las veces también será relative)

Problema en CSS

Usuarios habituales

Tags