Foros del Web » Creando para Internet » CSS »

Novatisimo problemas posicionamiento

Estas en el tema de Novatisimo problemas posicionamiento en el foro de CSS en Foros del Web. Bien... Postee el otro dia para solucionar una cosa pero sigo sin poder arreglarla... Os cuento: Tenemos una imagen de fondo puesta en el contenedor ...
  #1 (permalink)  
Antiguo 01/12/2010, 02:07
 
Fecha de Ingreso: noviembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Novatisimo problemas posicionamiento

Bien... Postee el otro dia para solucionar una cosa pero sigo sin poder arreglarla... Os cuento:


Tenemos una imagen de fondo puesta en el contenedor y luego un color de fondo puesto en el body. Entonces me quedan dos lineas gordas azules a los costados y en medio mi imagen bien puesta :). Ahora me pongo a escribir texto y mas texto y mas texto y cuando paso de la imagen esta no se hace mas grande.. Se hace mas grande el documento, la web, pero la imagen no con lo cual me queda otra linea del color de fondo por abajo.... Necesito "estirar" mi web tanto como las noticias que pongamos.

Luego he estado leyendo un poco y creo que lo mejor para hacer la web es dividirla en partes no? Por ejemplo menu.html, centro.html, abajo.html y arriba.html y luego ya colocarlas segun el css o algo asi no?

Un saludo.
  #2 (permalink)  
Antiguo 01/12/2010, 02:53
 
Fecha de Ingreso: noviembre-2010
Mensajes: 38
Antigüedad: 7 años
Puntos: 2
Respuesta: Novatisimo problemas posicionamiento

Quizás si posteas el código, se te pueda ayudar más.
  #3 (permalink)  
Antiguo 01/12/2010, 03:02
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: Novatisimo problemas posicionamiento

Cita:
Iniciado por Gomiw0www Ver Mensaje
Bien... Postee el otro dia para solucionar una cosa pero sigo sin poder arreglarla... Os cuento:


Tenemos una imagen de fondo puesta en el contenedor y luego un color de fondo puesto en el body. Entonces me quedan dos lineas gordas azules a los costados y en medio mi imagen bien puesta :). Ahora me pongo a escribir texto y mas texto y mas texto y cuando paso de la imagen esta no se hace mas grande.. Se hace mas grande el documento, la web, pero la imagen no con lo cual me queda otra linea del color de fondo por abajo.... Necesito "estirar" mi web tanto como las noticias que pongamos.

Luego he estado leyendo un poco y creo que lo mejor para hacer la web es dividirla en partes no? Por ejemplo menu.html, centro.html, abajo.html y arriba.html y luego ya colocarlas segun el css o algo asi no?

Un saludo.
La verdad es que no te entendemos porque no tenemos idea de lo que tu estás viendo, pero deduciendo lo que dices...te cuento que para que se agrande tu imagen...está dificil jeje...si es un FONDO...te recomendaría ponerle SCROLL para que baje con la pantalla. jejeje Trata de poner lo que estás haciendo para entenderte saludos! ;)
  #4 (permalink)  
Antiguo 01/12/2010, 09:42
 
Fecha de Ingreso: noviembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: Novatisimo problemas posicionamiento

Bueno visto que no me entendeis posteo lo que tengo de momento :

css
Código:
body {
	background-color: #28454D;
	background-repeat:repeat-y;
}
#container {
	width: 1024;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding: 60px;
	height: auto;
	background-image: url(img2/fondo.jpg);
}
#menu {
	font-size: 10px;
	color: #000000; 
	position: absolute;
	top: 200px;
	width: 100px;
	margin-left: -55px;
	height: auto;
	background-color: #026495;
}
#menu #sub_0 {
	color:#000000;
	list-style-type:none; 
	padding:0; 
	margin:0; 
	width:100px; 
	position:absolute; 
	left:0; 
	top:200px;
}
#menu ul#sub_0 li {
	display:block; 
	width:100px; 
	height:25px; 
	float:left;
}
#menu ul#sub_0 a {
	display:block; 
	text-decoration:none; 
	text-indent:15px;
}
#menu ul.none {
	display:none;
}
#menu ul.yes {
	display:block; 
	position:absolute; 
	top:200px; 
	left:190px; 
	width:100px; 
	padding:0; 
	margin:0; 
	list-style:none;
}
#menu ul.yes li a {
	display:block; 
	height:45px;
	border:0px; 
	line-height:0px; 
	text-decoration:none; 
	text-indent:-18px; 
	white-space:nowrap; 
	width:100px;
}
#centro{
	position: absolute;
	top: 120px;
	left: 300px;
	width: 70%;
	height: 100%;
}

html
Código:
<html>
	<head>
		<title></title>
		<link href="estilo.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="riser.js"></script>
		<script type="text/javascript" src="altura.js"></script>
	</head>
<body>
	<div id="container" class="dest">
		<div id="menu" class="dest">
			<div id="sub0">
				<ul style="top: 181px;" id="sub_0">
					<li class="yes" id="nosub1"><a href="http://www.google.es" target="ifrActividades"><img src="img2/menuinicio.jpg" border="0"/></a></li>
					<li id="top_1"><a href="#nogo" class="arrow" target="ifrActividades"><img src="img2/menupresentacion.jpg" border="0"/></a></li>
					<li id="top_2"><a href="#nogo" class="arrow"><img src="img2/menuhistoria.jpg" border="0"/></a></li>
					<li id="top_3"><a href="#nogo" class="arrow"><img src="img2/menuactividades.jpg" border="0"/></a></li>
					<li id="top_4"><a href="#nogo" class="arrow"><b><img src="img2/menumultimedia.jpg" border="0"/></b></a></li>
					<li id="top_5"><a href="#nogo" class="arrow"><b><img src="img2/menucontactos.jpg" border="0"/></b></a></li>
				</ul>
			</div>
	
			<div id="sub1">
				<ul id="sub_1" class="none">
					<li class="" id="nosub11"><a href="#nogo11"><img src="img2/introduccion1.jpg" border="0"/></a></li>
					<li class="" id="nosub12"><a href="#nogo12"><img src="img2/origen1.jpg" border="0"/></a></li>
					<li class="" id="nosub13"><a href="#nogo13"><img src="img2/bienvenida1.jpg" border="0" /></a></li>
					<li class="" id="nosub14"><a href="#nogo14"><img src="img2/organigrama1.jpg" border="0" /></a></li>
					<li class="" id="nosub15"><a href="#nogo15"><img src="img2/objetivos1.jpg" border="0" /></a></li>
				</ul>
				<ul id="sub_2" class="none">
					<li class="" id="nosub21"><a href="#nogo21"><img src="img2/introduccion1.jpg"  border="0"/></a></li>
					<li class="" id="nosub22"><a href="#nogo22"><img src="img2/siderurgia1.jpg"  border="0"/></a></li>
					<li class="" id="nosub23"><a href="#nogo23"><img src="img2/ahv1.jpg"  border="0"/></a></li>
					<li class="" id="nosub24"><a href="#nogo24"><img src="img2/ahm1.jpg"  border="0"/></a></li>
					<li class="" id="nosub24"><a href="#nogo25"><img src="img2/ensidesa1.jpg" border="0"/></a></li>
					<li class="" id="nosub24"><a href="#nogo26"><img src="img2/reconversion1.jpg" border="0" /></a></li>
				</ul>
				<ul id="sub_3" class="none">
					<li class="" id="nosub31"><a href="#nogo31"><img src="img2/voluntariado1.jpg"  border="0"/></a></li>
					<li class="" id="nosub32"><a href="#nogo32"><img src="img2/valoreseneltrabajo1.jpg"  border="0"/></a></li>
					<li class="" id="nosub33"><a href="#nogo33"><img src="img2/fomentodelacultura1.jpg" border="0" /></a></li>
					<li class="" id="nosub33"><a href="#nogo34"><img src="img2/inclusionsociolaboral1.jpg" border="0" /></a></li>
					<li class="" id="nosub33"><a href="#nogo35"><img src="img2/promociondelaexcelencia1.jpg" border="0" /></a></li>
				</ul>
				<ul id="sub_4" class="none">
					<li class="" id="nosub41"><a href="#nogo41"><img src="img2/video1.jpg" border="0" /></a></li>
					<li class="" id="nosub42"><a href="#nogo42"><img src="img2/libropdf1.jpg" border="0" /></a></li>
					<li class="" id="nosub43"><a href="#nogo43"><img src="img2/fotos1.jpg" border="0" /></a></li>
				</ul>
				<ul id="sub_5" class="none">
					<li class="" id="nosub51"><a href="#nogo51"><img src="img2/ftsi1.jpg" border="0" /></a></li>
					<li class="" id="nosub52"><a href="#nogo52"><img src="img2/enlaces1.jpg" border="0" /></a></li>
				</ul>
			</div>
		</div>
		<div id="centro" style="z-index:1;opacity:.60" class="dest">
			 <iframe name="ifrActividades" src="" width="100%" height="100%" scrolling="no" frameborder="0">Texto para cuando el navegador no conoce la etiqueta iframe</iframe>
		</div>
	</div>
</body>
</html>
Asi que lo que quiero es que el fondo.jpg se engrandezca si el iframe es mas grande ( el iframe es todo el contenido, cargo en el todas las paginas asi que puede tener un tamaño muy diferente ( de largo ).

Un saludo

Última edición por Gomiw0www; 01/12/2010 a las 09:45 Razón: falta
  #5 (permalink)  
Antiguo 01/12/2010, 09:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Gomiw0www

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #6 (permalink)  
Antiguo 01/12/2010, 12:16
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Novatisimo problemas posicionamiento

Gomiw0www:

Por el momento lo único que con lo que se puede ajustar una imágen de fondo, sin recurrir a varias imágenes o implementando javascript, es con la propiedad background-resize, introducida en CSS3, lamentablemente por el momento IE, no la soporta

Te dejo una demo en

http://foros.emprear.com/css/background-size/bgs.html


Saludos

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: posicionamiento
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 11:02.